Question

What I’m trying to achieve is three divs in a row with different, specific widths and equal heights. Two of them actually have content, and the middle one just contains a vertical spacer image. These three divs are contained in a “slide” div, along with other slides. The slides are all in one container div and controlled with JavaScript, hiding all but one slide at a time. Note that the slides are not the problem, but rather the layout of their contents. Currently, I can only make the three divs inside the second slide stack on top of each other, and yet it works perfectly fine with four divs in the first slide. Here’s what I’ve tried so far and hasn’t worked:

• float:left; on each div
• float:left; on first two and then float:right on last
• display:inline; on each div
• display:inline-table;
• lowering widths so they’re not exact
• removing all margins
• clear:left; after third div
• clear:both; after third div
• using class instead of id (which actually has changed things)
• various combinations of the above

I’m using Eclipse for code and Safari on Mac OS X to test; everything is up to date. Any help is greatly appreciated as I have been trying to get this to work for two and a half days now. Here is my code, if you need any more of it to find the problem, please let me know.

HTML:

     <div id="container">
         <div class="slide1">

            <div id="news-content">
                <div id="news-img">
                    <img src="album_example.png" />
                </div>
                <div id="news-img-description">
                    <h2 align="left">Lorem Ipsum</h2>
                    <p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat dictum pharetra. Cras porta.</p>
                </div>
                <div id="news-vr">
                    <img src="light_vr.png" />
                </div>
                <div id="news-feed">

                </div>
            </div>


        </div>


        <div class="slide2">
            <div id="music-content">
                <div id="music_albums">
                    <ul style="list-style-type: none;">
                        <li><img src="album_test.png" /></li>
                        <li><img src="album_test.png" /></li>
                        <li><img src="album_test.png" /></li>
                    </ul>
                </div>
                <div id="music_vr">
                    <img src="light_vr.png" />
                </div>
                <div id="music_remixes">
                </div>
            </div>
        </div>
        <div class="slide3">
        <h2>This is slide 3.</h2></div>
        <div class="slide4">
        <h2>This is slide 4.</h2></div>
    </div>

*album_example.png is 300×300 and album_test.png is 100×100

CSS:

@CHARSET "UTF-8";

h2 {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 150%;
}

p {
    color: #AAAAAA;
    font-family: Arial, Helvetica, sans-serif;
}

#container {
    width: 900px;
    height: 500px;
}

.slide1, .slide2, .slide3, .slide4 {
    width: 900px;
    height: 500px;
}

#news-content {
    width: 900px;
    height: 500px;
    margin: 0;
    max-height: 500px;
}

#news-img {
    float: left;
    width: 300px;
    padding: 100px 0 0;
    max-height: 300px;
}

#news-img-description {
    float: left;
    width: 295px;
    padding: 160px 15px 0 15px;
    max-height: 340px;
}

#news-vr {
    float: left;
    width: 1px;
    padding: 0 2px;
    max-height: 500px;
}

#news-feed {
    float: right;
    width: 300px;
    max-height: 500px;
}

#music-content {
    width: 900;
    height: 500;
    margin: 0;
    max-height: 500px;
}

#music-albums {
    float: left;
    width: 447px;
    padding: 15px 0 0 0;
    max-height: 485px;
}

#music-vr {
    float: left;
    width: 1px;
    padding: 0 2px;
    display: inline-block;
    max-height: 500px;
}

#music-remixes {
    float: left;
    width: 448px;
    padding: 15px 0 0 0;
    display: inline-block;
    max-height: 485px;
}

#music-albums, #music-remixes ul
{
    margin: 0;
    padding: 0;
}

#music-albums, #music-remixes ul li
{
    margin: 0 0 1em;
    padding: 0;
    list-style-type: none;
}

Answer 1

Ok. So answering your question properly this time:

You’ve got mixed-up underscores and dashes. Many IDs in your html use underscores where the corresponding CSS uses dashes, for example music_vr in the html and music-vr in your css.

That should at least get things to start making sense.

I did a bit of clean-up on jsfiddle that shows that your float rules do in fact work, when you select the right element!

Tools like Firebug and the Element Inspector in Firefox or Chrome/Safari really help with stuff like this — you’d see right away that your rules weren’t even applying to the elements and then it would be a quick process of elimination to figure out that some typos were causing that.