Forum Moderators: not2easy
I have just finished a new design which I am extremely proud of, however, I have a problem. The page basically has a header and below that 3 columns. The left is the nav, the center is the content and the right is image with an section title. The problem is, the two columns on the side do not set their height to the content of the page (i.e. They do not have a fluid length). This is a snippet of the code I am using
HTML
<div class="header">
Header Text
</div>
<div class="navigation">
Na Text
</div>
<div class="subjectbar">
Right Column Image
</div>
<div class="mainbody">
Main Body
</div>
CSS
BODY{
padding: 0px;
margin: 0px;
}
.Header{
...
padding: 15px;
height: 55px;
...
}
.Navigation{
float: left;
width: 160px;
height: 100%;
...
padding: 10px;
margin-right: 10px;
}
.SubjectBar{
float: right;
width: 80px;
height: 100%;
...
}
.MainBody{
padding: 20px;
....
}
Many Thanks In Advanced
ATOB
Chris
<edit>I meant height not width</edit>
[edited by: chris_f at 5:30 pm (utc) on July 4, 2003]
The problem is, the two columns on the side do not set their width to the content of the page (i.e. They do not have a fluid length).
Well you are giving them a fixed pixel width so there is no way for the width to change. You would have to use relative units like % in order for them to be fluid.
edit: Or are you referring to height rather than width?
I've fixed it. If anyone else has this problem, then, put the page in another div with height and length of 100%.
ATOB
Chris
Still, you will not be able to "force" the div to extend below "the fold". 100% does not refer to the length of the page, it refers to the maximum height of the visible viewport.
