CODEWITHSUNDEEP
htmlcss
b10hazard
b10hazard

Reputation: 7809

float a div containing three divs in a row over a content div

Have three divs in a container that I want to float over a large div. How do I do this? I have this so far...

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

div.HeaderContainer { float:left; }
div.One {  float:left; border: 1px solid; }
div.Two {  float:left;} 
div.Three {  float:left; border: 1px solid; } 
div.Content{ float:none; }

-->
</style>
</head>
<body>

<div class = "HeaderContainer">
    <div class="One">one</div>
    <div class="Two" id="tdAmplicon">two</div>
    <div class="Three">three</div>
</div>
<div class="Content" >content</div>

</body>
</html>

However, this only puts the content div to the left right of the HeaderContainer div. How do I make the content div float below the HeaderContainer div? Thanks.

Upvotes: 0

Views: 149

Answers (2)

Peter
Peter

Reputation: 3008

Alternatively, you could replace the float:left; on div.HeaderContainer by overflow:hidden;:

div.HeaderContainer { overflow: hidden; }

http://jsfiddle.net/ZDE6C/1/

Upvotes: 0

wanovak
wanovak

Reputation: 6127

div.Content { clear: both; }

will put the content div below HeaderContainer

http://jsfiddle.net/ZDE6C/

Upvotes: 1

Related Questions