Thread: extensible left column
Results 1 to 3 of 3
Related
-
CSS two column problem Forum: CSS Forum
Replies: 5 -
Can i specify field value without using column-name? Forum: Databases
Replies: 0 -
CSS Layout - 3 Column Plus Forum: HTML Forum
Replies: 3 -
Sorting by column on webpage Forum: CGI Perl Forum
Replies: 2 -
right column shifts Forum: CSS Forum
Replies: 3
-
03-27-2003, 06:09 PM #1
extensible left column
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.
-
03-27-2003, 06:34 PM #2
start with an idea I mentioned in another post, let me know how you get on -
http://www.ahfb2000.com/webmaster_he...v&pagenumber=1If one of our members helps you, please click theicon to add to their reputation!
No support via email or private message - use the forums!
Before you ask, have you Searched?
-
03-29-2003, 07:00 PM #3
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>
<body>
<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>
</body>
</html>
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum