Question

Hi i’m trying to make a simple 2 col layout(it’s a table conversion actually) and have a problem.
HTML:

<div class="obj_container" style="margin-top: 120px;">
        <div class="obj_title">
        Title:
        </div>
        <div id="obj">
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        </div>
</div>

CSS:

.obj_container {
    width: 900px;
    height: auto;
    clear: both;
    float: left;
}

.obj_title {
    width: 60px;
    height: auto;
    float: left;
}

.obj {
    width: 820px;
    height: auto;
    padding: 10px;
    float: left;
}

The problem is that when the text inside is more than 1 line it will go under the even if i specified both divs’ widths; a solution may be to specify both divs’ heights but that wouldn’t adapt dynamically to the content.
Thanks

Answer 1

You’re using <div id="obj">, but then .obj.

Change to using <div class="obj">.

As an aside, you’re trying to contain the floats in .obj_container, so clear: both isn’t what you need. Replace it with overflow: hidden, or use a clearfix.