Two div containers

**pjb007** · 11-02-2007, 11:30 AM

I am sure I have done this before but can't remember how.

Basically I have two div containers, one is 80% wide the other 20%.

The wider conteiner containes lots of content and narrow one does not.

I want the background of the narrow one to continue beyond the last line of text.

Any suggestions?

It works in IE but typically not FireFox

**ArsonistX** · 11-02-2007, 11:47 AM

You mean the height of the narrow container?
I don't really understand..

**pjb007** · 11-02-2007, 12:39 PM

There are two containers one contains lots of content the other does not.

The background colour appears down to the last line of text in that container which means that there is white space below the one container, I want this to continue down to the same level as the neighbouring container.

**joder** · 11-02-2007, 01:05 PM

Are you wrapping them in another div?

Example:

HTML Code:

<div id="wrapper">
    <div id="leftdiv">
    </div>
    <div id="rightdiv">
    </div>
<div>

**pjb007** · 11-02-2007, 02:10 PM

I have tried with and without a wrapper.

**joder** · 11-02-2007, 03:05 PM

If you don't have a link or code, it's hard to help.

**LadynRed** · 11-02-2007, 03:47 PM

You might want to read this stickie:
http://www.webmaster-talk.com/css-fo...l-browser.html

You could also try the Faux Columns method:
http://www.alistapart.com/articles/fauxcolumns/

**Foundationflash** · 11-02-2007, 04:41 PM

It does sound an awful lot like you want that faux column method as above.

**pjb007** · 03:28 PM

Here is an example of the problem.

I have used two different colours for this example (in my site they will be the same colour)

How can I get the background colour of the navigation area to continue down and stop in the same place as the background area of the main content.

A basic example is shown below normally i use an external style sheet.

Code:

<html>
<head>

<style type="text/css">
#nav {background-color: green; float: left;}
#content {background-color: yellow; float: left;}
</style>

</head>
<body>

<div id="nav">
Line 1 <br />Line 2<br />Line 3<br /> Line 4<br />
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 

ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 

mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 

ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 

mollit anim id est laborum.</p>

</div>

</body>
</html>

Hope this helps explain things a little better.

**maxxximus** · 11-03-2007, 04:42 PM

Yes faux columns probably best.

However a simple fix that would work well here is to wrap the two divs and apply overflow:hidden to the wrapper.

#wrapper{background-color: green; overflow:hidden; width:100%}