2 replies [Last post]
mooapo
mooapo's picture
Offline
newbie
Saginaw MI
Last seen: 8 years 6 weeks ago
Saginaw MI
Timezone: GMT-4
Joined: 2011-10-02
Posts: 9
Points: 16

I am new to CSS and have many questions, but one that really sticks out is about CSS Floats. I understand it advantages, and it makes sense. But I don't understand how to use it when you have multiple nested Div's to place within a single Div.

I hope I am stating my question right.

Example :

<html>
<body>
  <div id="wrapper">
    <div id="header">
      <div id=""></div>
      <div id=""></div>
      <div id=""></div>   <!-- I want to place all these within my header, some top, some bottom -->
      <div id=""></div>
      <div id=""></div>
      <div id=""></div>
    </div>
  </div>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 36 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Float works best when you set

Float works best when you set widths.
So you could give all the divs a width and float them left.

#header div{
  float:left;
  width:33%;
}

That should give you 2 rows of 3 divs.

mooapo
mooapo's picture
Offline
newbie
Saginaw MI
Last seen: 8 years 6 weeks ago
Saginaw MI
Timezone: GMT-4
Joined: 2011-10-02
Posts: 9
Points: 16

Tony wrote: Float works best

Tony wrote:

Float works best when you set widths.
So you could give all the divs a width and float them left.

#header div{
  float:left;
  width:33%;
}

That should give you 2 rows of 3 divs.

Thank you for your advise, makes sense....