Hey guys. Im utterly lost. I'm new to coding and have pretty much finished my first site! I'm a fast learner I guess, but I cannot figure out one problem. I have a div box and inside that div box I have set up three div classes and used the float:right; command to get them to line up with one another.. as soon as I use the float command it kicks the div class items out of the main div box.. but as soon as i remove the float command it puts them back in the div box.. images and code below.. in the images ignore the text.. i took that out and it still does the same thing.

with the float command set to (float:right


http://img337.imageshack.us/my.php?image=pic1cd8.jpg

with the float command set off

http://img248.imageshack.us/my.php?image=pic2an5.jpg

css

.thumbnail {
float:right;
width: 160px;
border: 2px solid #ddd;
margin: 15px;
padding-top: 10px;
padding-left: 10px;
background-color: #fff;
}

#containerbox2 {
    margin: 10px;
    padding: 5px;
    border: 1px solid #999;
    background-color: #eee;
    }

HTML

<div id="bottom">
        <div id="containerbox2">
        
        <h1>featured <strong><em>samples</em></strong></h1>
          <h2>our best work</h2>
          
    <div id="thumbnail">
            <img src="http://www.webmaster-talk.com/images/blank150.jpg" alt="#" width="150" height="150">
            Kirby Litho
          <em>SelfPromotion Xmas</em>          </div>    
        <div id="thumbnail">
            <img src="http://www.webmaster-talk.com/images/blank150.jpg" alt="#" width="150" height="150">
            Kirby Litho
          <em>Directory2007</em>          </div>
        
        <div id="thumbnail">
            <img src="http://www.webmaster-talk.com/images/blank150.jpg" href="#" alt="#" width="150" height="150">
            Kirby Litho
          <em>HardCover Manual          </em></div>
      </div>             
            </div>

Do we take it that the "problem" is with Internet Exploder?

floating an element takes them out of the normal flow. The floats then have to be cleared to return to the flow.

add a "clearing" element after the floated elements to correct it.

<br style="clear:both;"> for example

Originally Posted by chrishirst

Do we take it that the "problem" is with Internet Exploder?

floating an element takes them out of the normal flow. The floats then have to be cleared to return to the flow.

add a "clearing" element after the floated elements to correct it.

<br style="clear:both;"> for example

its happening in IE and firefox.. also shows up in the dreamweaver design view

omg it worked! im such a noob.. been trying to teach myself so its hard to learn... thanks so much