CSS - Make Each Floated Div The Same Height?

I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height?

Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box?

jarsandmixes.com/liquid.php





body {
background-color: #FFF7EF;
}

div {
text-align:center;
}

div#wrapper {
background-color: transparent;
border:0px solid black;
margin:0px auto;
text-align:left;
position:relative;
width:100%;
height:100%;
min-height:100%;
}

div#border {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:10px;
}

div#page {
background-color: #DEC6B5;
border:1px dashed black;
position:relative;
clear:both;
float:left;
width:100%;
height:100%;
min-height:100%;
padding-bottom: 10px;
overflow:hidden;
}

div#header {
background-image: url(images/.gif);
background-repeat: no-repeat;
border:1px dashed black;
margin:0px;
padding:0px;
width:100%;
height:80px;
}

div#menu {
clear: both;
background-color: #CA7B93;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

div#left1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
float:left;
margin:5px;
width:20%;
height:auto;
}

div#left2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#content1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
margin:5px auto;
width:54%;
height:auto;
}

div#content2 {
background-color: #DEC6B5;
background-image: url(images/bkg3.gif);
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
width:96%;
height:auto;
}

div#divider {
background-image: url(images/.gif);
background-repeat: no-repeat;
margin:10px auto;
width:439px;
height:60px
}

div#right1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
float:right;
border:1px solid black;
margin:5px;
right:10px;
width:20%;
height:auto;
}

div#right2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#footer {
clear: both;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you.

Code:

#content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}

/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/

/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/

/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/

Code:

<div id="content"><!--CONTENT SECTION START-->
   PHP MENU IS CREATED HERE...
   <div id="locationBox"><!--OPEN BOX-->
      <div class="boxTop"></div>
      <div class="boxContent">
         <div class="locInfoMap">
            MAIN CONTENT GOES HERE...
         </div>
      </div>
   </div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->

In Firefox, I've got a right div that is not repsonding to an auto width in FF.

I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing.

I've included a screen shot of the problem, any help is greatly appreciated.

- K

CSS Code
Code:

#MainContainer
{
	float: 	left;
	width: 	auto; 
}

#Main
{
	margin-right: 0.2em;
}

#MainContent
{
	padding: 0.5em 0.5em 0.5em 0.5em;
}


#SidebarContainer
{
	float: 	right;
	width: 	250px;
	 	
border-top: 1px solid #C0C0C0;
	padding-top: 5px;
	clear: right;

}

#Sidebar
{	
	padding-bottom:	    5px;
	background:     	#ADADAD;
	background-image:   url(../images/SidebarBackground.jpg);
	background-repeat:  no-repeat;
	clear:left;
}

#SidebarContent
{
	margin: 0.2em 0.2em 0.2em 0.2em;
}

Hello,

I've created a wrapper div for my main content and I center it on the page by setting margin left and right to auto. I add some content to it but the height of the wrapper never grows larger than the content. How can I make it so the background color of the wrapper, for example, goes to the bottom of the browser regardless of the amount of content inside of it? Thanks in advance.

The situation is very simple:

Code:

<div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
    <div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
        red box<br>
        red box<br>        
        red box<br>
        red box<br>
        red box<br>        
        red box<br>                
	</div>

    <div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
        green box<br>
        green box<br>
        green box<br>
        green box<br>        
	</div>
</div>  

AS you can see, I have a main div. Inside it, I have 2 divs:
red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows.

What I need is either enter text in the red or green divs and make the main div to auto resize.

(I'm using Mozilla FireFox)

Any Idea?

How do you make a container div aware of the height of floated divs nested inside?

I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically.

In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to.

Here is the link to the site with the problem.

CSS
Code:

 /* CSS DOCUMENT */
html, body {
  padding: 0px 0px 0px 0px;
  font: 10px Verdana, Arial, Halvetica;
  height: 100%;
  text-align: center;
  background: url(../images/bdy_back.jpg) #252525 no-repeat center;

#container {
  width: 938px;
  margin: 0 auto;
  text-align: left;
  height: auto;
  opacity: .90;
  filter: alpha(opacity=90);
  background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
  float: left;
  width: 15%;
  height: auto;
}

#right {
  float: right;
  width: 85%;
  height: 100%;
}


}
 

HTML
Code:

<div id="container">
  <div class="hdr">

	<div id="officer" style="display: none;"></div>
  </div>
  <div id="lcol">
   
  </div>
  <div id="right">
    
  </div>
</div>
<div id="footer">

</div>

I have stripped the whole page down to the bare bones and can not seem to get the center DIV to be the same height as the rest of the page.

Is there a simple fix for this or would I need to redo it completely ?

The left and right content is not always the same so their height is also variable. I have a min-height in the center DIV, and using height 100% does not seem to work either.

Can anyone suggest what I could change to make it the same or suggest how I redo this so it is.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--

body { border: 0em solid #000; background-color: #ddd; }

.bodyContainer { background-color: blue; height: 100%; width: 71.875em; margin: 0em auto; padding: 0em 0em 0em 0em;		border: 0em solid #000; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.menu {	background: #3F65CC; margin: 0em; text-align: center; font-size: 1.1em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.313em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.clearfloat {			clear: both; }

.leftSidePanel { background-color: blue;	float: left;	width: 8.835em; min-height: 43.75em; padding: 0.313em 0.625em 0em 0.625em; }

.mainContent { background-color: lightblue;	margin: 0em auto; text-align: center; border-left: 0.5em solid #ddd; border-top: 0.3em solid #ddd; border-right: 0.5em solid #ddd; float: left; width: 49.4em; min-height: 43.438em; height: 100%; padding: 0.625em 0.625em 0.625em 0.625em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.formWrapper{ margin: 0em auto; min-height: 43.375em; border: 0em dashed #E5E5E5; padding: 0em; text-align: left; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }

.rightSidePanel	{ background-color: blue;	float: right;	width: 8.835em; min-height: 43.75em; padding: 0.313em 0.713em 0em 0.313em; }

.footer { background-color: #ddd; margin: 0 auto; text-align: center; padding: 1em 0em 0em 0em; border: 0em solid #fff; font-size: 0.875em; }

--></style>

</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">


	<!-- menu start -->
	<div class="menu">

		<div class="clearfloat"></div>

	</div>
<div class="clearfloat"></div>
	<!-- menu end -->

<div class="leftSidePanel">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

		<!-- mainContent start -->
		<div class="mainContent">

		<div class="formWrapper">

		<br><br><br>

		</div>

		</div>
		<!-- mainContent end -->

	<div class="rightSidePanel">

	</div>

	<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>








</div>
<!-- body container end -->

</body>
</html>

I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it.


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFF00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  width: 100%;
}
table {
  border: 0px solid #000000;
  border-collapse: collapse;
  border-spacing: 0px;
}

#columnleft {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: left;
}
#columnright {
  margin: 0px;
  padding: 0px;
  width: 10%;
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #0000FF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: absolute; */
  float: right;
}
#footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
#clearfooter {
  clear: both;
}
#header {
  margin: 0px;
  padding: 0px;
  width: 100%; 
  height: 65px;
  background-color: #FFCC00;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position:relative; */
}
#main {
  margin: 0px;
  padding: 0px;
  width: 79.8%;  /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
  height: 100%;  /* Required by IE to inherit from wrapper (IE Hack) above */
  background-color: #FFFFFF;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
  float: left;
}
#wrapper {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  /* min-height: 80%; */  /* Might not be needed, it's an IE Hack... */
  background-color: #FF0000;
  border-top: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-right: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-left: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  border-bottom: 0px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
  /* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>

<body>
<div id="header">Header Text</div>
 <div id="wrapper">
  <div id="columnleft">Left Text</div>
  <div id="main">Center Content</div>
  <div id="columnright">Right Text</div>
 </div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html> 

Thanks,
FletchSOD

I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works.

Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ?


Thanks in advanced.

can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it?

is this possible, cheers

heres my css:
left column, is #leftNav and the right column is #contentMain

PHP Code:
#content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }
    
    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 632px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    } 

Hi, I'm having a familiar problem:
with this page

The the content on a contained and floated div is over running it's containing div.

I have had this problem before and using something like: Code:

#innerwrap:after {
	content:".";
	display:block;
	clear:both;
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Has worked before, but this time it's not.

I'm having to specify a unique class and heitht for the #main box or use <br/>. It would be nice not to have to do this.

Can anybody advise me what to look into please.

Thanks
James

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

Hello,

I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one.

My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content.

I placed:
Code:

<br style="clear: both;">

after the content <div> which usually does the trick but it's not working for some reason...

And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus.

This happens in IE only.

Any ideas?

Page html/css:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	background-color: #f9dcb3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#cRightPaneBot	{
	background-color: #D9E0EA;
	border: 1px solid #9DA7B5;
	margin: 23px 0px 0px 0px;
	padding: 15px 10px 15px 15px;
	/*
    width: 673px;
	height: 238px;
	*/	
}

.cLeftPane	{
    margin: 0px 20px 0px 0px;
	border: 1px solid #9DA7B5;
    overflow: hidden;
	float: left;
    background-color: #F5F7FB;
	height: 223px;
    /*
    */
}

h1  {
    font-size: 1.5em;
    /*
	display: inline;
	*/
}

.breakAfter {
    margin: 0px 0px 10px 0px;
}

</style>
</head>

<body>
<div id="cRightPaneBot">
	<h1 class="breakAfter">My Title</h1>
	<div class="cLeftPane" style="width: 200px;">
		hello
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna. 
	</div><br style="clear: both;">
</div>
</body>
</html>

Aaaah!
another problem...

now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div.

when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value).

what now?
thanks

sure i read an article on this somewhere but cant remember where, the problem is this

Code:

<div class="floated and cleared right">
stuff
</div>

<div class="fixed width" >
<img class="floated left">
lots of text
<div>

related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif)

if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div

help!