Auto height

HTML & CSS
1

I am trying to make some divs to expand dynamically as content gets added, basically I have a div that contains 3 divs, the main div has a background color and has no height set to it as content height varies however I want the background color to expand to the height of the content and I haven`t been able to do so unless I set a height for the main div.

Bellow is my CSS


.cCHeader { // this is the main container
    background-color: #52E1EC;//this is the background color that I wish to expand dynamically
    border-top: 3px solid;
}
.cCLogo {//this is the first sub-container
    background-image: url("calmecac.png");
    background-position: left top;
    background-repeat: no-repeat;
    height: 150px;// as of now is set but this height will vary
    margin-top: 0;
}
.cCHeaderC {//this is the second sub-container
    height: 150px;// as of now is set but this height will vary
}
.cCUserDetails {//this is the third sub-container
    background-color: #F78129;
    height: 150px;// as of now is set but this height will vary
    margin: 0;
    position: relative;
    right: -35px;
}

And this is the HTML markup


<div class="container_24 cCHeader" >
			<div class="grid_9 alpha cCLogo" >
			</div>
			<div class="grid_10 cCHeaderC" >
			</div>
			<div class="grid_5 omega cCUserDetails" >
				<h1 class="cCHello" >Hi Tlacaélel Ramón Luis!</h1>
				<div >
					<a href="http://calmecac.coatlcalli.com/user/profile.php?id=2">
						<img class="cCUserImage" width="55" height="55" title="Picture of Tlacaélel Ramón Luis Flores Cabrera" alt="Picture of Tlacaélel Ramón Luis Flores Cabrera" src="http://calmecac.coatlcalli.com/pluginfile.php/13/user/icon/f1">
					</a>
				</div>					
				<p class="cCUserMenuPL">
					<a href="http://calmecac.coatlcalli.com/user/profile.php?id=2">My profile</a>
					|
					<a href="http://calmecac.coatlcalli.com/login/logout.php?sesskey=HFweVHncxd">Logout</a>
				</p>			
				<div class="cCLanguageSelector">
					<form id="single_select_f4e40f7fc3d398" action="http://calmecac.coatlcalli.com/theme/index.php" method="get">
						<div>
							<label for="single_select4e40f7fc3d3de">
								<span class="accesshide ">Language</span>
							</label>
							<select id="single_select4e40f7fc3d3de" class="select menulang" name="lang">
								<option value="en" selected="selected">English (en)</option>
								<option value="es">Español - Internacional (es)</option>
								<option value="es_mx">Español - Mexico (es_mx)</option>
							</select>
						</div>
					</form>
				</div>
			</div>
		</div>

Any help is apreciated

2

Hi,

There is not enough information there to go on as an element will automatically expand to encompass its content unless your content is floated or absolutely positioned.

I’m guessing that you haven’t cleared your floats so you could try this.


[COLOR=#6666ff].cCHeader[/COLOR] [COLOR=#66cc66]{
overflow:hidden;
zoom:1.0;
}[/COLOR]