Reputation: 12874
I am trying to create some html using divs instead of my usual tables.
What I want is the #hdrdetail
div to be displayed under the #company
div - the orange div to begin under the green div. I am not sure how I should be using float.
Hope this is enough info to answer.
#maindiv {
background-color: yellow;
height: 100 % ;
width: 700px;
margin: auto;
}
#logoleft {
width: 25 % ;
float: left;
height: 40px;
background-color: red;
}
#company {
width: 50 % ;
float: left;
height: 80px;
background-color: green;
}
#logoright {
width: 25 % ;
float: right;
height: 40px;
background-color: red;
}
#hdrdetail {
float: none;
width: 100 % ;
height: 80px;
background-color: orange;
}
#weekly_lefthdr {
float: left;
width: 50 % ;
height: 60px;
background-color: blue;
}
#weekly_righthdr {
float: right;
width: 50 % ;
height: 60px;
background-color: aliceblue;
}
<div id="maindiv">
<div>
<div id="logoleft"></div>
<div id="company"></div>
<div id="logoright"></div>
</div>
<div id="hdrdetail">
<div id="weekly_lefthdr">
</div>
<div id="weekly_righthdr">
</div>
</div>
</div>
Upvotes: 3
Views: 156
Reputation: 566
Here is the fiddle: http://jsfiddle.net/vcpfygpt/1/. You need to remove float:none
in
#hdrdetail {
clear:both;
width: 100% ;
height: 80px;
background-color: orange;
}
and replace it with clear:both
. The rule clear:both
sets the condition that "no floating elements would be allowed on either the left or the right side".
Upvotes: 1
Reputation: 3886
You don't need to set float: none;
, what you should use instead is clear: both;
ie;
#hdrdetail {
clear:both;
width:100%;
height:80px;
background-color:orange;
}
float: none
will just unset the float of the element, which in your case wasn't set anyway, whilst clear: both
will put the element below any floated elements above it.
Hope this helps.
Upvotes: 4