[RESOLVED] floating divs won't fill height

**bitstomper** · 12-02-2009 11:07 AM

Seems like a much discussed subject.
I tried everything but cannot seem to make this work:

I want leftcolumn to fill the entire height which is created by the content of rightcolumn. No matter what I try the leftcolumn only fills the background color to the extend of its contents. Also if there is no content there is no background color (as I have not set a height in pixels).

CSS:

html {
height: 100%;
margin-bottom: 1px;
}

body {
font-family: Arial,sans-serif;
line-height: 1.3em;
font-size: 12px;
color: #333;
height: 100%;
}

#top {
background: url('/images/stories/overige/top.jpg') 0 0 no-repeat;
width: 960px;
height: 116px;
}

.floatfix {
clear: both;
}

#containcell {
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 955px;
}

#container {
margin-top: 0px;
width: 955px;
}

#leftcolumn {
margin: 0px;
padding: 0px;
background: #69c;
width: 170px;
height: 100%;
float: left;
}

#rightcolumn {
width: 765px;
float: left;
margin-left: 20px;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<body>

<div id="containcell">
<div id="top">
<jdoc:include type="modules" name="top" />
</div>
<div id="container">
<div id="leftcolumn"><jdoc:include type="modules" name="left" /></div>
<div id="rightcolumn"><jdoc:include type="component" /></div>
<div class="floatfix"></div>
</div>
</div>

</body>
</html>

**slaughters** · 12-02-2009 12:16 PM

Fluid designs a great, but they tend to be fluid to the browser size, not the content size.

leftcolumn is a height of 100% It's container has no height so it is 100% of nothing

You are going to have to set a height for container. Don't use percentages either as container has the same problem. It's container (containcell) has no height either.

It would be nice if height:auto worked, but it does not.

**bitstomper** · 12-02-2009 12:32 PM

Yes that works, but not really.
The result is not what I want as I need to set the height beforehand and so it does not adjust to the height of rightcolumn..

**slaughters** · 12-02-2009 12:38 PM

If you want to have a layout fluid to the content, then I hate to say it, but a simple two row, two column table might work better for you.

Tables tend to be fluid where content is concerned (one of the reasons they are so difficult to work with on rigid page layout specific designs - the content size overrides the layout)

**bitstomper** · 12-02-2009 01:12 PM

Solved it by adding a background image to the container. The image includes color for the leftcolumn.

Thread: [RESOLVED] floating divs won't fill height

Thread Tools

Display

[RESOLVED] floating divs won't fill height

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions