Thu, 2003-03-27 21:23
Hi I'm new to CSS and my problem is this: I have been laying out pages with the navigation links with a background contained in a <div> tag set on the left side of the page. I would like it to extend the length of this block to match the length of the content in the main section.
With a table this would be easy as the one cell would expand to match the other.
What am I missing here, I have tried several different things and am getting nowhere, the reason this is doing my head in is that the site that I am curently working on is about 165 pages and reseting the height on each page manualy(and repeatedly if I change a heading or font size in my main style sheet) is incredibly time consuming. If anyone could help me it would be a life saver.
:?:
Fri, 2003-03-28 03:38
#1
Extensible left column
You have a few options with CSS.
1) You can set the left padding of your main content div to be, say, 200 pixels. Then you can cause a background image to tile vertically along the left edge of the main content div or body element. This bg image serves as a background for your navigation div, which itself has no background, and you position it over the padded portion of your main content div with absolute positioning.
2) You float your content div right and give it a width of, say, 80%. Your navigation div, coming after the content div in the HTML, will sit up on the left of the content. It will not have any border or background, so you see no line where it ends. Then you could have a footer div which "clears" the float aspect of your content, thus slipping to the bottom and drawing a line across the entire page evenly underneath both the content and the nav. I did this on my home page: http://www.drpeterjones.com
3) You can absolutely position both divs and give them the same height. As long as all your pages are calling the same external stylesheet, you only have to edit that one stylesheet to effect the change across the entire site.
There are other tricks, these are just a couple.
cheers
Sat, 2003-03-29 22:52
#2
Thanks I have a solution
Thanks for the help.
The code below works for me, the strange thing is that if you remove the height parameter from the .main class the whole thing goes wrong, it makes no diference that the height in this case is 1px.
When I was trying this previously I didnt bother to set a height for the .main class as I simply thought that it would extend to fit the content (which it does) Is this a browser issue? (I am using IE6).
Thanks again.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title></title>
<style>
.main{width:600px; height:1px; background:#FFFFCC;}
.navbar{height:100%; width:200px; float:left; background:#0066FF;}
</style>
</head>
<div class="main">
<div class="navbar">
<a href="#">LINK</a>
</div>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</html>
Sun, 2003-03-30 02:46
#3
column heights
Hi Damian,
You should test that out in other browsers, it's not working for Netscape 7.
I think your going to have to look deeper into this one.
Potatoe's idea to leave the navbar without a background or border will be very helpful.
You could also separate the divs, at the moment you have the navbar inside the main.
Float both navbar and main left use percentages like 40% and 60% for widths if you can.