Question

i have following HTML structure:

<div class="container">
   <div class="sidebar"></div>
   <div class="content"></div>
   <div class="subscript"></div>
</div>

I need following layout:

┌─────────┬───────────────────────┐
│         │                       │
│ sidebar │       content         │
│         │                       │
│         │                       │ 
├─────────┤                       │
│         │                       │
│    w    ├─────────┬─────────────┤
│         │subscript│      w      │
└─────────┴─────────┴─────────────┘

w – is white-space

Container must have fixed width and flexible height (must expand to fit its content)

Sidebar must have fixed width and height and be top-aligned.

Content must be on the right hand side of sidebar and take all free horizontal space. It must be vertical expandable, to fit its text

Subscript must be positioned right below content and be left-aligned with it. Also, it must be expanded horizontally, to fit its text (subscription)

How it can be done, using pure CSS?

Answer 1

Advanced? Hardly. Most simply:

/* Fix page width. As per requirements, but questionable IMO. Why not liquid? */
.container { width: 750px; margin: 0 auto; }

/* Sidebar on left, other elements moved to the right */
.sidebar { float: left; width: 150px; }
.content, .subscript { margin-left: 150px; }

/* Make subscript shrink its width to fit its content */
.subscript { display: inline; }

This is cheating a bit in making the subscript inline in order to make its dimensions ‘shrink-to-fit’ its text. This might or might not be acceptable depending on what .subscript actually is.

There are a few other ways you can do that if you want .subscript to remain a block-display element. For example, float: left without an explicit width on the .subscript. Then you’d need either an explicit clear: left on a new element just before the end of the container, or, if you prefer not to change the markup at all, a self-clearing hack on .container (such as the overflow: hidden hack as mentioned by dhabersack; check the hasLayout fixes for that if you need IE6 support).