CSS and div positioning

Question

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>

Answer 1

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".

Answer 2

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.