CSS and div layout
I am trying to create some html using divs instead of regular tables.
I want the div to #hdrdetail
appear below the #company
div - an orange div starting below the green div. I'm not sure how to use float.
Hope this is enough 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>
source to share
You don't need to install float: none;
, you should use clear: both;
ie instead ;
#hdrdetail {
clear:both;
width:100%;
height:80px;
background-color:orange;
}
float: none
will simply override the float of an element that in your case was not set anyway, but clear: both
will place the element under any floated elements above it.
Hope it helps.
source to share
Here is a fiddle: http://jsfiddle.net/vcpfygpt/1/ . You need to delete 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 floats will be allowed on either the left or right side."
source to share