Understanding Floating Divs

[Nick Miceli]

Despite having taken a course on web design, I appear to have very little practical knowledge of how to use CSS to get what I want. I think my problem is one of understand exactly what the functionality of each of these tags is, but no matter how many tutorials or other posts I read I can't seem to find out what I'm doing wrong.

Very simply: If this were to be a table, I would have two rows and three columns. In the first row would be an image, a video, and a different image. In the second row there is text, nothing, and text. The text corresponds to each of the images, so they should be lined up with the images above them. I also wanted everything centered on the page (and that's where things went wrong)

My best attempt at getting three images next to each other and centered caused the text to not go below the images. I don't know if I'm using the float style wrong or if I'm just not centering things the right way or WHAT, but if anyone can give me a pointer I'd really appreciate it. I hope I described my problem adequately.

Relevant HTML:

<div id="body">
        <div id = "student-wrapper" class="wrapper"> 
            <div id = "student-image">
                <a href="#">
                    <img alt="Students Login" src="site images/students.png" width="300" height="190" />
                </a>
            </div>
        </div>
        <div id = "video-wrapper" class="wrapper">
            <iframe width="560" height="349" src="http://www.youtube.com/embed/cjaeYkTyUHk" frameborder="0" allowfullscreen></iframe>
        </div>
        <div id = "professional-wrapper" class="wrapper">
            <div id = "professional-image">
                <a href="#">
                    <img alt="Professionals Login" src="site images/professionals.png" width="200" height="400" />
                </a>
             </div> <!-- END image div-->
        </div> <!-- END professional-wrapper div-->
        <div id="buffer"> </div>
    </div> <!-- END body div -->
 
 
    <div id = "goto-texts">
       <div id = "student-text">
              <a href="#"> 
                   <p class="goto"> Start Here! </p> 
            </a>
       </div>
       <div id = "professional-text">
              <a href="#">
                  <p class="goto"> Start Here! </p>
            </a>
       </div>
   </div>
</body>

And the CSS:

div#body{margin: 25px auto 25px auto; width:1200px;}
div#student-wrapper{margin-right:30px;}
div#professional-wrapper{margin-left:30px;}
 
p.goto{font-size:x-large; font-weight:bold}
div.wrapper{float:left}

-Nick

[Dormilich]

first of all, I wouldn’t use the table approach (you still have 2 rows and 3 columns). the text belongs to the according image, thus image and text should have a common container.

the only question remaining is, where should the text sit vertically. either directly beneath the image (that’s the easy option) or all on the same line.
for the latter you will have to take the image out of the normal flow, which can be done by float: or position: absolute.

Example.

<div>
    <img src="…" alt="image 1" width="20" height="30">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div>
    <iframe></iframe>
    &nbsp;
<!-- you need content inside the <div>, otherwise it would collapse -->
</div>
<div>
    <img src="…" alt="image 2" width="40" height="20">
    <p>Morituri te salutant.</p>
</div>

/* somewhat generic selectors for testing */
div {
    float: left;
    width: 7em;
}
img, iframe {
    position: absolute;
}
p {
    margin-top: 3em;
}