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

Question

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?

Funktr0n · Accepted Answer · 2012-06-15 19:09:52Z

2

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

edited Jun 15, 2012 at 19:09

Funktr0n

1,8383 gold badges18 silver badges23 bronze badges

answered Jun 15, 2012 at 18:51

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ahmd0 Over a year ago

Well, it's easy for you :) Thanks.

Zoltan Toth Over a year ago

It will become easy for you in no time :) just start and you'll see

Funktr0n Over a year ago

@ahmd0 just so you know here, the "magic" behind this solution is absolute positioning. Keep that in mind when/if you do any follow-up reading. If you remove the float:left; statement from #idLeft, it will still render properly, because it's not being used. Just trying to avoid confusion.

Matt Coughlin Over a year ago

This might not work reliably cross-browser unless #idOuter is given a fixed height. Without that, the browser will be trying to calculate the height of both #idOuter and the columns based on 100% of the height of the other (i.e., 100% of what? 100% of 100%...).

Matt Coughlin Over a year ago

What I'm finding is that, if #idOuter doesn't have a fixed height, it takes on the height of the last column (which is either good or bad depending on which column has taller content). Tested in FF, Chrome, IE9.

|

Funktr0n · Accepted Answer · 2012-06-15 22:27:34Z

0

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]

answered Jun 15, 2012 at 22:27

Funktr0n

1,8383 gold badges18 silver badges23 bronze badges

3 Comments

Funktr0n Over a year ago

credit goes to @Dirk de Man for posting the link. This is only here because he never posted an answer...

ahmd0 Over a year ago

Thanks for posting it. So just from curiousity, if doing this simple layout with CSS poses so many issues why are people bad-mouthing using tables to do this layout?

Funktr0n Over a year ago

I think people bad-mouth an overt reliance on tables, because they're cumbersome and outdated as a platform for full page design. The first time you're handed a disastrous layout consisting of tables embedded within tables embedded within tables, and you're asked to make any improvements/changes/add content, you'll know exactly why people complain. CSS is far better equipped for a layout as a whole. That said, tables still have some good uses, and it would seem your current project is one of them.

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related