↓ Skip to main content

Control-less layout

·193 words

I am quite turned off of the whole CSS Zen table-less design ethic. It is most unpractical. The most basic layout primitives have a less than straight forward translation to CSS.

Task: I have a series of

elements which I want to put side by side hard, no wrapping.

The obvious solution to this using

display: inline;

or

display: inline-block;

fails to work completely. The divs are not placed side by side.

Getting the divs to sit side by side is best accomplished by using

float: left;

though that seems to be a less than ideal use of the float attribute and floats are prone to incompatibilities of their own.

This still does not fix the fact that the floating divs wrap at the screen edge and I wanted them to sit side by side hard. The beautifully hackish solution to this is to wrap all the divs with a parent div set at

width: 10000px;

That makes enough room for the divs to sit in and not wrapping though it is horrible.

Separating style and content… yeah right. If there are better solutions to this, I would be glad to hear them.

Alper Cugun
Author
Alper Cugun

Related

Applications on the Web

·170 words
Emil gives Joel’s list of stuff you couldn’t do so far in web applications and this list is rapidly decreasing. We will probably get very decently usable web applications by the end of this year. Expect to see the arena explode.

Firebug!

·65 words
Revision 0.4 of Firebug was just released and this revision also sports an impressive number of added features mostly focused on JavaScript debugging right within the Firebug console.