Menu
Community /Pin to ProfileBookmark
Please help. Height of my leftside…
Hello,
Hope you can help me. Probably very simple but i’m completely confused how to achieve this .. my new “beta” layout which I’ve pasted below is working fine, but how can I make the leftside always reach the bottom despite if the content is longer than the left itself? Hope that makes sense. If you look at the layout you’ll see how I mean.
I’ve removed all colours etc, as I use background images, but basically where the border-right stops on the left, so does my background, if the content is longer, it won’t reach the bottom…
Regards,
[code=php]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en” dir=”ltr”>
<head>
<title>test.</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<style type=”text/css”>
body, html {
margin : 0;
padding : 0;
color : #000;
font-size : 10pt;
min-width : 710px;
}
#head {
text-align : left;
}
#head p {
margin : 0;
padding : 13px;
font-size : 15pt;
}
#nav {
text-align : right;
border-width: 1px 0px;
border-color: #333366;
border-style: solid;
font-size : 9pt;
}
#nav p {
margin: 0;
}
#left {
padding: 10px;
float : left;
width : 186px;
border-right : 1px dashed #ccc;
font-size : 10pt;
}
#left p , #left h3 {
margin : 0;
margin-bottom : 1em;
}
#content {
padding : 15px;
text-align : center;
}
#main #content {
margin-left : 205px;
}
.spacer {
clear : both;
height : 1px;
font-size : 1pt;
}
#footerline {
border-width: 1px 0px;
border-color: #333366;
border-style: solid;
height : 6px;
color : inherit;
}
#footer {
width : 100%;
font-size : 10pt;
color : inherit;
}
#footer p {
margin : 0;
}
#copyright {
margin : 0;
padding : 6px;
text-align : right;
top : 0px;
left : 0px;
}
</style>
</head>
<body>
<div id=”head”><p>header here</p></div>
<div id=”nav”>
<form onsubmit=”return false” action=”#”>
<p>Some links etc.</p>
</form>
</div>
<div id=”main”>
<div id=”left”>
<p>Left side content here.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id=”content”>
<p>Content here</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class=”spacer”> </div>
</div>
<div id=”footerline”></div>
<div id=”footer”>
<div id=”copyright”>
<p>Copyright here.</p>
</div>
</div>
</body>
</html>
Sign in
to post a comment