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,
<!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>You may be interested in Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) at A List Apart.Yeah, that's a good article.
And just to be nitpicky, two notes:
1.) Do you expect us to think "Hey, this guy said 'Please help'! Screw everyone else, this guy needs help!"? All you needed was something about 'Nav stretching to height of content, or something like that, you don't need to tell us you need help, no thread here is ignored.
2.) If you had this online, it'd be better... You needn't post all that code. Actually, the best solution would be to maybe just give us more of the general idea, such as "I have a content area, and a nav area....", etc., etc. Everyone here sees posts like these all the time, but I just feel like nagging ya about it. I'm mean like that.It appears that you have your left hand side-bar above your main content in the source code. If you do that then people with screen readers will have to sit through what I assume is your page navigation.
There is a work around (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/floats.htm">http://www.ryanbrill.com/floats.htm</a><!-- m -->) for this accessibillity problem if you're interested, it was inspired by a mezzoblue (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php">http://www.mezzoblue.com/archives/2004/ ... /index.php</a><!-- m -->) article.Hello guys.
Unfortunately I've read both of these articles, but I'm none of the wiser.
I tried adding (from the first article):
background : #fff url('/img/bg.jpg') repeat-y 0;
but it still won't "touch" the bottom...
Is there a simple thing I can edit, as I'm completely confused with this now.
I appreciate any help, and apologies for the "Please help" topic
Reading what you said, I completely agree...We really could do with a link.. or the images...There are two ways you can fix this...
The proper way (which dosent really work). Or the cheet way...
The proper way would be to give your #left and #content div bottom:0px; and height:auto; On fully CSS2 complient browsers this will work.
Meanwhile in the real work...(IE) Your going to have to cheet... a little.
First you need to create a tile image... the best way to do this really would be to view your page as is, take a screen shot then from the screen shot a slice from the area of the image where your #main div was, in your case it would be the width of the page 750px? and maybe 5px high to acomidate the tiling of the border.
Now in your #main div set the background to be the image you have just created, and have it tile verticaly only, and you'll probobly want to align it left for good measure.
background: white url("background.gif");
background-repeat: repeat-y;
background-position: left;
Now remove and border/background propities from #left and #content and your done. #main streach to acomidate #left and #content taking the hight of the larger but with the tiles background in #main it will apear as it #left and #content are the same size.
The draw back of this of course is should should you wish to change the style of backgrounds or borders of #left or #centent change you have to go and create a new tile image.That's not the only fix, I've made a layout that has a border on the #left and #centre div tags, the #left is then moved over the #center div tag (I used a hack for this to get it to work in IE
).
I've also moved the left column (in the source) to after the main content area so that people with screen readers won't have to sit through a list of links.
Edit: I almost forgot, the reason your border stops is because even though you have the same number of <p> </p> on each side, the left hand side bar has a font-size:10pt; and the main column has fon-size:9pt;
Therefore the left column is taller and pushes the footers down, but because the border is applied to the main content div (which stops short) the border stops.<sarcasm>Wow lavalamp, that works well...</sarcasm>
<!-- m --><a class="postlink" href="http://cafe.cic.hull.ac.uk/~icb01gh/skydan.gifOriginally">http://cafe.cic.hull.ac.uk/~icb01gh/sky ... Originally</a><!-- m --> posted by gazie
<sarcasm>Wow lavalamp, that works well...</sarcasm>Terribly sorry, I guess you've never made a mistake then.
I guess that it doesn't matter that it works in IE 5.0 5.5, Moz 1.4 1.5, FB/FF 0.6 0.8, NN 6.22 7.10, Opera 5.02 6.00 7.11 7.23
I'll work on a fix.Screen shot was taken of test in IE 6.I know.OK then.
Had not mentioned in previous post so i thought it might be helpful.Another hack.Thank you very much guys.
I've used what you've given and slightly modified it as a few things changed, and it seems to be working hunky dory on most browsers I've tested, including:
Netscape 7.x
Opera
IE 5.5+
Konqueror 3.1
Firebird
Thanks again
Regards,I'm glad that it works in Mac browsers, I can't test in those.
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,
<!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>You may be interested in Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) at A List Apart.Yeah, that's a good article.
And just to be nitpicky, two notes:
1.) Do you expect us to think "Hey, this guy said 'Please help'! Screw everyone else, this guy needs help!"? All you needed was something about 'Nav stretching to height of content, or something like that, you don't need to tell us you need help, no thread here is ignored.
2.) If you had this online, it'd be better... You needn't post all that code. Actually, the best solution would be to maybe just give us more of the general idea, such as "I have a content area, and a nav area....", etc., etc. Everyone here sees posts like these all the time, but I just feel like nagging ya about it. I'm mean like that.It appears that you have your left hand side-bar above your main content in the source code. If you do that then people with screen readers will have to sit through what I assume is your page navigation.
There is a work around (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/floats.htm">http://www.ryanbrill.com/floats.htm</a><!-- m -->) for this accessibillity problem if you're interested, it was inspired by a mezzoblue (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php">http://www.mezzoblue.com/archives/2004/ ... /index.php</a><!-- m -->) article.Hello guys.
Unfortunately I've read both of these articles, but I'm none of the wiser.
I tried adding (from the first article):
background : #fff url('/img/bg.jpg') repeat-y 0;
but it still won't "touch" the bottom...
Is there a simple thing I can edit, as I'm completely confused with this now.
I appreciate any help, and apologies for the "Please help" topic
Reading what you said, I completely agree...We really could do with a link.. or the images...There are two ways you can fix this...The proper way (which dosent really work). Or the cheet way...
The proper way would be to give your #left and #content div bottom:0px; and height:auto; On fully CSS2 complient browsers this will work.
Meanwhile in the real work...(IE) Your going to have to cheet... a little.
First you need to create a tile image... the best way to do this really would be to view your page as is, take a screen shot then from the screen shot a slice from the area of the image where your #main div was, in your case it would be the width of the page 750px? and maybe 5px high to acomidate the tiling of the border.
Now in your #main div set the background to be the image you have just created, and have it tile verticaly only, and you'll probobly want to align it left for good measure.
background: white url("background.gif");
background-repeat: repeat-y;
background-position: left;
Now remove and border/background propities from #left and #content and your done. #main streach to acomidate #left and #content taking the hight of the larger but with the tiles background in #main it will apear as it #left and #content are the same size.
The draw back of this of course is should should you wish to change the style of backgrounds or borders of #left or #centent change you have to go and create a new tile image.That's not the only fix, I've made a layout that has a border on the #left and #centre div tags, the #left is then moved over the #center div tag (I used a hack for this to get it to work in IE
).I've also moved the left column (in the source) to after the main content area so that people with screen readers won't have to sit through a list of links.
Edit: I almost forgot, the reason your border stops is because even though you have the same number of <p> </p> on each side, the left hand side bar has a font-size:10pt; and the main column has fon-size:9pt;
Therefore the left column is taller and pushes the footers down, but because the border is applied to the main content div (which stops short) the border stops.<sarcasm>Wow lavalamp, that works well...</sarcasm>
<!-- m --><a class="postlink" href="http://cafe.cic.hull.ac.uk/~icb01gh/skydan.gifOriginally">http://cafe.cic.hull.ac.uk/~icb01gh/sky ... Originally</a><!-- m --> posted by gazie
<sarcasm>Wow lavalamp, that works well...</sarcasm>Terribly sorry, I guess you've never made a mistake then.
I guess that it doesn't matter that it works in IE 5.0 5.5, Moz 1.4 1.5, FB/FF 0.6 0.8, NN 6.22 7.10, Opera 5.02 6.00 7.11 7.23
I'll work on a fix.Screen shot was taken of test in IE 6.I know.OK then.
Had not mentioned in previous post so i thought it might be helpful.Another hack.
Thank you very much guys.I've used what you've given and slightly modified it as a few things changed, and it seems to be working hunky dory on most browsers I've tested, including:
Netscape 7.x
Opera
IE 5.5+
Konqueror 3.1
Firebird
Thanks again
Regards,I'm glad that it works in Mac browsers, I can't test in those.