CODEWITHSUNDEEP
htmlcsscss-tables
ahmd0
ahmd0

Reputation: 17293

Display two columns with CSS, one with fixed width and another to take the rest of space

I'm just trying to get into the benefits of using CSS vs. tables, but so far I'm not convinced. Something that I could do within a minute with a table seems to be not so easy with CSS (at least for me at this point.) So, this question is not about merits of using CSS vs. tables. I need to know how to do the following with CSS:

Say, I have an encompassing element that needs to be separated in two columns, so to speak:

<div id="idOuter">
 <div id="idLeft"></div>
 <div id="idRight"></div>
<div>

idLeft element must be of a fixed width. For instance, 100px. It will contain a text label with a margin. But the idRight must occupy whatever width is left in the idOuter div. It will contain a text input element with a margin. The idOuter should also reflect the height of both idLeft and idRight and have its own margin.

So how do you do it? I keep messing with floats and inline-blocks and widths but it always comes out messed up when I resize the browser window?

Upvotes: 2

Views: 3811

Answers (2)

Funktr0n
Funktr0n

Reputation: 1842

As far as I've seen (and I've done some looking), the best implementation (not using javascript) uses a combination of floats and margins to achieve the fixed-fluid layout you desire. Even in this implementation however, the containing div still won't reflect the proper height 100% of the time.

Fiddle Demonstration

[source]

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47657

It's relatively easy - http://jsfiddle.net/bWuQB/5/

#idOuter {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#idLeft {
    height: 100%;
    width: 100px;
    background: orange;
    position: absolute;
}

#idRight {
    margin-left: 100px;
    height: 100%;
    background: beige;
}

And you have to forget about using tables for layouts and anything, but tabular data. When you get used to table-less layouts you'll like them. And semantically it's the correct solution.

EDIT: Removed unnecessary float statement and updated Fiddle

Upvotes: 2

Related Questions