Why do my icons line up top-to-bottom instead of flowing left-to-right in a DIV layout?

Question

I have these 3 icons enclosed in separate DIVs all of which are enclosed within a single DIV:

<div id="icons">

  <div id="divtxt" class="divicon">
    <img src="/icons/text.png" id="icontxt" class="icon"/>
  </div>

  <div id="divpdf" class="divicon">
    <img src="/icons/pdf.png" id="icondoc" class="icon"/>
  </div>

  <div id="divrtf" class="divicon">
    <img src="/icons/rtf.png" id="iconrtf" class="icon"/>
  </div>
</div>

I set some simple styles but can't figure out why these images are lining up top-to-bottom instead of left-to-right:

  div#icons
  {
    width:200px;
    height: 100px;
  }

  div.divicon
  {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0 0 0 0;
  }

Any suggestions would be appreciated.

Answer 1

You need a

float: left;

in your div#icons.

Answer 2

div is a block level element. So the default behavior is to layout one below the other, unless you float them like Robert suggested.

Answer 3

And now for something a bit more comprehensive:

You look like you just want a row of icons. Using your HTML, you would need to float the divs containing the icons in order for them to be next to each other. The reason why you need to float is because a div is a block level element (as opposed to inline) which means that nothing can exist in the horizontal space next to it.

You can achieve this effect by adding a float: left; rule to div.divicon

Floating does two things: it takes the block element out of the page flow allowing other elements to exist next to it (or flow around it) and it reduces the width of the box to fit the content. As far as the parent is concerned, a floated element has no height. To illustrate this, just try giving #icons a background color or border. You will notice that it won't show up - or show up as a 1px line.

In order for the parent to recognise the height of the floated element you need to tell the parent that overflow should be hidden with this rule:

#icons { overflow:hidden; }

This also works in IE however not always, so sometimes you might need to set a height or width or do a zoom:1 which tends to fix a lot of IE bugs (look up "hasLayout bug" if you want more info).

Now for a different solution:

You look like you just want a row of icons. Unless theres a reason for the images to be surrounded in a div (and in your example there is none) I would suggest to you to do something like this:

<div id="icons">
    <img src="/icons/text.png" id="icontxt" />
    <img src="/icons/pdf.png" id="icondoc" />
    <img src="/icons/rtf.png" id="iconrtf" />
</div>

#icons { /* rules for our container go here */ margin:0; padding:0; /* etc... */ }
#icons img { /* rules for your icons */ border:none; margin:0 2px; /* etc... */ }

I have removed the redundant divs and the redundant class attribute on the images. Since images are inline elements you wont need to screw around with floats and you wont have any extra divs that may cause divitis a degenerative HTML disease that affects many websites and spreads through bad advice. Remember, only use what you need - don't use it just because its there.

Hope this helps,

Darko