[RESOLVED] floating divs won't fill height
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).
background: url('/images/stories/overige/top.jpg') 0 0 no-repeat;
<!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; ?>" >
<jdoc:include type="modules" name="top" />
<div id="leftcolumn"><jdoc:include type="modules" name="left" /></div>
<div id="rightcolumn"><jdoc:include type="component" /></div>
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.
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..
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)
Solved it by adding a background image to the container. The image includes color for the leftcolumn.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)