homepage Welcome to WebmasterWorld Guest from 54.242.126.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Flexible sidebar and content (two flexible columns)
Mathieu Bonnet

5+ Year Member



 
Msg#: 3609356 posted 7:05 pm on Mar 24, 2008 (gmt 0)

Hi,

I guess there are already multiple posts about it, but most posts about two-column designs use at least one fixed width, which this is exactly what I'm trying to avoid, so it's not easy to find.

Ok, so what I'd like to have, is a flexible sidebar, on the left of the page, so that its width is adjusted automatically to the width of its content (for example, a menu). The width of the content might change (new menu item, or new submenu, depending on the page), and I'd like to avoid having to manually specify it.

Then, I'd like to have a content block, on the right of the sidebar, also with a flexible width (with min-width and max-width working properly on browsers which support these -that is, the width must shrink, when the browser window is shrinked).

I don't want part of the content block to be below the sidebar (I mean, with just the sidebar being left-floated).

That is, I'd like to get something like:


/----------------\ . /----------------------------------\
¦ . . . . . . . .¦ . ¦ . . . . . . . . . . . . . . . . .¦
¦ . . . . . . . .¦ . ¦ . . . . . . . . . . . . . . . . .¦
¦ Flexible width ¦ . ¦ . . . . Flexible width . . . . . ¦
¦ . . sidebar . .¦ . ¦ . . . . . . content . . . . . . .¦
¦ . . . . . . . .¦ . ¦ . . . . . . . . . . . . . . . . .¦
¦ .(e.g., <ul>) .¦ . ¦ . . (e.g., multiple long <p>) . .¦
¦ . . . . . . . .¦ . ¦ . . . . . . . . . . . . . . . . .¦
¦ . . . . . . . .¦ . ¦ . . . . . . . . . . . . . . . . .¦
¦ . . . . . . . .¦ . ¦ . . . . . . . . . . . . . . . . .¦
\----------------/ . ¦ . . . . . . . . . . . . . . . . .¦
. . . . . . . . . .. ¦ . . . . . . . . . . . . . . . . .¦
. . . . . . . . . .. ¦ . . . . . . . . . . . . . . . . .¦
. (nothing here) . . ¦ . . . . . . . . . . . . . . . . .¦
. . . . . . . . . . .¦ . . . . . . . . . . . . . . . . .¦
. . . . . . . . . . .¦ . . . . . . . . . . . . . . . . .¦
. . . . . . . . . . .\----------------------------------/

(with some additional header and footer, but there should not be any problem with these).

(the dots are for filling... some spaces are otherwise stripped from the 'pre', which does not seem to work anyway, so I used 'fixed'...)

I don't want to use JavaScript, and it must work in recent versions of, notably, Firefox, Opera and Konqueror. I'm ok with it not being perfect in IE 5-6 (and maybe even 7), as long as it's not too bad (for example, it's ok if part of the content is below the sidebar in IE -like with the sidebar being simply left-floated-, but not if the content is completely pushed down, below the content).

I would also like to avoid hacks and conditional comments. I'm ok with proprietary CSS properties, though, if Firefox, Opera and Konqueror support some, and it degrades well (and if it will be part of CSS3 one day).

The base XHTML/CSS code is copied at the bottom of this post.

To summarize, I set both the sidebar and the content as `float: left;`. The problem is that Firefox, Opera and Konqueror, push the content below the sidebar, because the paragraphs it contains are "too long" for the available space, on the right of the sidebar.

However, IE6 simply uses word-wrapping, so that the paragraphs fit, which is exactly what I'd like to get.

In CSS 2.1, section 9.5 on floats, it is written "If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present".

It is whats happens for Firefox, Opera and Konqueror.

However, AFAIC, for paragraphs, I would think there is "enough horizontal room"... it's just that the paragraphs should be word-wrapped, to fit the available space, instead of only considering the width of the full paragraph... of course, except if I'm missing other rules, it is not clear, and neither IE6 or the others are really right or wrong...

As a workaround, I use something like:

div#Sidebar { float: left; width: 13em; }
div#Content { margin-left: 13em; }

... and it works, but as said above, and this is the entire point of my post, I'd like to get a flexible sidebar, without having to specify its width.

I could also use, with the base code below, a max-width on the content. With proper sizes, it should be alright with a 800*600 resolution, or larger fonts, but the content width does not shrink, when the window is shrinked. The content is first pushed below the sidebar, and only then, shrinks... and I'd like to avoid this too.

Any idea?

Thanks in advance.

The base code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Test</title>

<style type="text/css">

body
{
max-width: 40em;

margin: 1em auto;
}

div#Sidebar
{
float: left;

border: 1px solid black;

background: #FAA;
}

div#Content
{
float: left;

border: 1px solid black;

background: #AFA;
}

</style>

</head>

<body>

<div id="Sidebar">
<ul>
<li>Pellentesque</li>
<li>Eros erat</li>
<li>Ullamcorper quis</li>
<li>Lacinia ut</li>
<li>Sodales in nunc</li>
<li>Integer auctor</li>
<li>Sapien sit amet</li>
</ul>
</div>

<div id="Content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In vehicula, purus a cursus cursus, tortor arcu
venenatis velit, eu porta leo nisi in nunc. Nullam
pellentesque. Aliquam elementum, neque ac mattis
convallis, turpis tellus interdum justo, ac sagittis
sapien nulla sit amet metus. Etiam hendrerit hendrerit
sapien. Vivamus at diam id arcu commodo suscipit.
</p>
<p>
Aenean pharetra gravida turpis. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. In pretium, justo
at feugiat scelerisque, turpis nulla condimentum elit,
nec aliquet nulla leo vitae magna. In accumsan eros et
mi. Pellentesque eros erat, ullamcorper quis, lacinia
ut, sodales in, nunc.
</p>
<p>
Integer auctor, sapien sit amet hendrerit gravida,
nisi magna faucibus felis, vel ornare erat tortor
eu justo. Nam lacinia mauris luctus pede. Duis
pulvinar dignissim lacus. Cras pellentesque eros sed
nulla. Nullam nibh. Maecenas rutrum cursus arcu. Sed
lorem lacus, varius a, dapibus blandit, lobortis ac,
massa. Fusce pharetra vehicula eros. Sed lacinia,
metus et pulvinar varius, justo enim congue nunc, in
dignissim libero odio et libero. Duis accumsan
consequat ipsum.
</p>
<p>
Maecenas tincidunt, sapien vitae luctus commodo,
augue ipsum congue nisi, eu interdum sem dolor vel
tortor. Morbi vulputate, ligula in imperdiet placerat,
pede nulla condimentum nibh, non euismod justo ipsum
ac libero.
</p>
<p>
Vestibulum nonummy gravida mauris. Sed lobortis.
Nullam adipiscing pede ut quam. Aliquam tellus quam,
varius vitae, dignissim imperdiet, dapibus vitae, arcu.
Proin at pede. Donec a nunc eu metus laoreet cursus.
Quisque a elit.
</p>
<p>
Mauris sapien magna, sodales vitae, blandit quis,
tincidunt ut, lorem. Nunc velit. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Suspendisse lectus. Nunc egestas pede
vel diam. Nam fringilla ullamcorper enim. Maecenas ut
ligula. Nullam ornare nibh lobortis dolor dapibus
ultrices. Donec eget diam eget sapien pellentesque
semper. Proin nonummy nonummy sem. Mauris amet ante.
</p>
</div>

</body>

</html>


 

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3609356 posted 10:08 am on Mar 28, 2008 (gmt 0)

Have you got this one answered yet Mathieu?

I would also like to avoid hacks and conditional comments. I'm ok with proprietary CSS properties, though, if Firefox, Opera and Konqueror support some, and it degrades well (and if it will be part of CSS3 one day).

are hasLayout workarounds OK?

if so I *think* it can be done though I would need someone to test its performance in IE8

back in bit with some code if you still need some

-Suzy

Mathieu Bonnet

5+ Year Member



 
Msg#: 3609356 posted 11:42 am on Mar 28, 2008 (gmt 0)

Have you got this one answered yet Mathieu?

Nope.

The only thing I could achieve, is to make the sidebar longer, using {min-height:100%}, with only the sidebar being left-floated. Of course, if the content is longer (and it mostly always is), then part of it will be under the sidebar, and, as part of the sidebar is empty, it is worst than specifying the width of the sidebar manually.

Anyway, this would be the other lead. Instead of trying to avoid the content being pushed down, because the paragraphs are longer than the available space between the sidebar and the right side of the document, we could have only the sidebar, left-floated, and make it as long as the content, so that the content stays, completely, on the right side of the sidebar.

However, as with the first lead, it might indeed not be possible with only CSS (although, again, it does seem, from what I understand of CSS 2.1, that it could be interpreted as the first lead being possible -and that is how IE seems to interpret it, if this is intented-, if the paragraphs are simply word-wrapped, instead of only taking into account, the total length of the paragraph content... but if it cannot be done in Firefox/Opera/Konqueror, I will not use it).

With only {min-height:100%}, the height of the sidebar is only the height of the window, and not of the complete content. With an additional {position:fixed}, the sidebar is completely taken out of the normal flow, so part of the content will be under it.

if so I *think* it can be done though I would need someone to test its performance in IE8

back in bit with some code if you still need some

Well, if you find another lead, do tell us about it (hasLayout stuff is ok... I already need it for some float bugs, in my current layout, anyway...), but don't spend too much time on it, if your not interested yourself. Most people would just use JavaScript, and it does seem it is not possible with only CSS, at least with CSS 2.1... It might be possible with Firefox (maybe with -moz-box-flex, or some other XUL stuff), but Konqueror and Opera probably do not have any similar proprietary extensions (and while an approximate layout is ok for IE, at least for IE <7, I'd like to avoid my websites to only look good in Gecko browsers...).

Thanks for you reply, anyway :) The title of the topic should have been "Flexible sidebar and content (two flexible columns)", but I forgot to modify the title, and when I noticed, I couldn't modify my post anymore. I guess people thought I was asking for yet another basic two-column layout, with at least one fixed width... :/

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3609356 posted 12:16 pm on Mar 28, 2008 (gmt 0)

Yes it's possible with CSS2.1 thanks to the way overflow works now, which is why IE8 concerns me, what I've got relies on hasLyout for IE7 and below, so that's why I'm concerned about IE8, however I am downloading the IE8_VPC just now so will check.. the thing is IE8 *should* support it properly too being as is CSS2.1 but you know it just might interpret things differently ;)

I will change title of post for you too

the code below came from something else, is basic, and I *think* it can only be in this order. the 3px jog you may not be bothered about it's gone in IE7 anyway, the hasLyout is required for IE6 and below, as overflow: auto; sets hasLayout for IE7 too, you could of course use zoom: 1; to trigger hasLayout if you don't mind using proprietary properties as you said, however the tripswitch should be read absolutely fine by IE8 too as long as the overflow does it's job.. will let you know if I get the test running!

see if this's any use and let us know!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Two flexible columns</title>
<style type="text/css">
body {
font: 100%/1.7 Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #fff;
}

#wrapper {
background: #abc;
border: 1px solid #000;
overflow: auto; /* forces the container to enclose its floated contents */
display: inline-block; /* TRIP hasLayout */
}
#wrapper {display: block;} /* SWITCH back the display */

#sidebar {
float: left;
background: #dad;
padding: 10px;
border: 1px solid #008;
margin: 0 10px 0 0;
}

#content {
overflow: auto; /* clears the float and keeps content inline */
outline: 0; /* fix right click scrollbars Gecko */
padding: 10px;
margin: 0 auto;
background: #FFE;
border: 1px solid #00F;
position: relative;
display: inline-block; /* TRIP hasLayout */
}
#content {display: block; /* SWITCH back the display */ }

/* optional fix for IE<=6's 3-pixel gap bug */
* html #content {
position: relative;
left: -3px;
margin-right: -3px;
}

/* to test internal floats clearance */

.clear {clear: both;}
span {
float: left;
width: 100px; height: 100px;
margin: 7px 10px 10px 0;
background: #dad;
}

/*.wide {width: 1500px;}*/
</style>
</head>

<body>
<h1>contained floats, cleared floats</h1>
<div id="wrapper">

<div id="sidebar">
<p>Lorem ipsum dolor sit amet,<p>
<p> consectetuer adipiscing elit.<br>
Duis tincidunt, sem sed sodales congue,<br>
nisl neque dignissim purus</p>
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>

<div id="content">
<p><span>floated span</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="clear">This paragraph should be cleared from the box above, but should not clear the left column! </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tincidunt, sem sed sodales congue, nisl neque dignissim purus, in tempor erat sapien non sapien. Fusce dignissim accumsan enim. Cras sit amet tellus quis sapien nonummy posuere.</p>
<p class="wide">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tincidunt, sem sed sodales congue, nisl neque dignissim purus, in tempor erat sapien non sapien. Fusce dignissim accumsan enim. Cras sit amet tellus quis sapien nonummy posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

</div>
</body>
</html>


Mathieu Bonnet

5+ Year Member



 
Msg#: 3609356 posted 2:40 pm on Mar 28, 2008 (gmt 0)

Yes it's possible with CSS2.1 thanks to the way overflow works now

Doh! I first started by trying all kind of overflow, text-wrap (well, the corresponding proprietary extensions, for now), etc. stuffs, but when I thought about using "auto", for "overflow", I really thought it wouldn't apply at all to this case... and, well, reading the specs again, I still don't quite understand why it applies here ^_^;

Considering their normal behaviour, I would have thought they would indeed display the content on the right of the sidebar, but that they would display horizontal scrollbars...

So what happens really? By using "auto", they force the content to be on the right of the sidebar, because they know it will always fit (if it does not, they would display scrollbars), but then, they notice the content does fit, if simply word-wrapped? (the fact it works in apparently all browsers -including Firefox, Konqueror and Opera-, is really awesome).

Well, that's indeed exactly what I wanted.

Thank you very much. This is really awesome, for flexible layouts.

... And now that I search for flexible+layout+"overflow: auto", in a search engine, I even find that I neglected some websites I checked, which had a note about it... (a shame it was not the main feature of their article... :/ -and of most articles about two-column layouts, in fact :/).

And it even permits clearing stuff in the content, without it being pushed down below the sidebar, as you also demonstrated it... This is just awesome ^_^

Here is a simplified sample (with the IE workarounds removed, notably -in this sample, IE is now the one who puts part of the content below the sidebar, and I might reintegrate the workarounds (it's needed in IE7, you said? -I'm still not testing in IE7, as my designs are simple, and not yet published ^_^;), but for now, it's quite ok).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Two flexible columns</title>

<style type="text/css">

body
{
max-width: 45em;

margin: auto;
padding: 1em;
}

div#Main_container
{
background: #CFF;
}

div#Sidebar
{
float: left;

background: #FCF;
}

div#Content
{
overflow: auto;

background: #FFC;
}

</style>

</head>

<body>

<h1>Two flexible columns</h1>

<div id="Main_container">

<div id="Sidebar">
<h2>Main menu</h2>
<ul>
<li>Pellentesque</li>
<li>Eros erat</li>
<li>Ullamcorper quis</li>
<li>Lacinia ut</li>
<li>Sodales in nunc</li>
<li>Integer auctor</li>
<li>Sapien sit amet</li>
</ul>
</div>

<div id="Content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In vehicula, purus a cursus cursus, tortor arcu venenatis
velit, eu porta leo nisi in nunc. Nullam pellentesque.
Aliquam elementum, neque ac mattis convallis, turpis
tellus interdum justo, ac sagittis sapien nulla sit amet
metus. Etiam hendrerit hendrerit sapien. Vivamus at diam
id arcu commodo suscipit.
</p>
<p>
Aenean pharetra gravida turpis. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. In pretium, justo
at feugiat scelerisque, turpis nulla condimentum elit,
nec aliquet nulla leo vitae magna. In accumsan eros et
mi. Pellentesque eros erat, ullamcorper quis, lacinia
ut, sodales in, nunc.
</p>
<p>
Integer auctor, sapien sit amet hendrerit gravida, nisi
magna faucibus felis, vel ornare erat tortor eu justo.
Nam lacinia mauris luctus pede. Duis pulvinar dignissim
lacus. Cras pellentesque eros sed nulla. Nullam nibh.
Maecenas rutrum cursus arcu. Sed lorem lacus, varius a,
dapibus blandit, lobortis ac, massa. Fusce pharetra
vehicula eros. Sed lacinia, metus et pulvinar varius,
justo enim congue nunc, in dignissim libero odio et
libero. Duis accumsan consequat ipsum.
</p>
</div>

</div>

</body>

</html>

[edited by: Mathieu_Bonnet at 2:43 pm (utc) on Mar. 28, 2008]

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3609356 posted 5:09 pm on Mar 28, 2008 (gmt 0)

Good News, it bears up in IE8 too.. good! means the overflow property is probably working properly!

and I might reintegrate the workarounds (it's needed in IE7, you said?

The hasLayout workarounds (the tripswitch) are needed for IE6/5.5.

IE7 also needs hasLayout but the overflow:auto is setting hasLayout=true for it (that was a new behaviour of overflow in IE7) so if you don't support below 7 you woin't need the inline-block/block switch.. though that does no harm as all browsers read the display: block as it comes later in the cascade.

hasLayout is triggering IE's buggy float:model causing the text not to wrap. overflow: auto; (you could use hidden too)is doing it for complaint browsers inc. IE8 it seems ;)

I really thought it wouldn't apply at all to this case... and, well, reading the specs again, I still don't quite understand why it applies here ^_^;

I didn't quite know myself yet only having recently discovered this behaviour but.. on reading again I think it's here: 9.5 Floats [w3.org]

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

anyway glad it works, wonder just how much could be done with though.. can't think how faux columns would work with it unless the content column is always longer

-Suzy

Mathieu Bonnet

5+ Year Member



 
Msg#: 3609356 posted 5:47 pm on Mar 28, 2008 (gmt 0)

I didn't quite know myself yet only having recently discovered this behaviour but.. on reading again I think it's here: 9.5 Floats

Yup, this is it, thanks.

However, it does seem pretty similar to the "If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present" (also in 9.5), which applied to my first lead (having both the sidebar and the content, left-floated)... It would seem implementers should have word-wrapped the paragraphs, in this case too, instead of pushing them down.

Well, the behaviour is common to Gecko, Presto and KHTML, so I won't insist.

Thanks again for {overflow:auto;}, bye :)

Xapti

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3609356 posted 9:49 pm on Mar 28, 2008 (gmt 0)

I dont' really understand your what you mean by both being flexible widths...
I think you just want the side div to shrink to it's smallest width, and just use the remaining space for the main div? because it kinda seems like you wanted main div to have a shrink to fit width too or something, which doesn't make sense.

I'm also not seeing how adding the formatting context with overflow:auto helps this to work... I suppose because it doesn't seem to be working on Firefox 1.5.

If it's just a menu and not very dynamic content, you could just size the side div with ems to the largest element - that's what I do for my "flexible width" designs (and when you do that, the main div does not need to be floated). I've only read, and never heard otherwise, that floated elements must have widths specified... while it may work in most browsers to omit width, it is really proper to be relying on the fact that it will shrink-fit?

Mathieu Bonnet

5+ Year Member



 
Msg#: 3609356 posted 7:48 am on Mar 29, 2008 (gmt 0)

I dont' really understand your what you mean by both being flexible widths...
I think you just want the side div to shrink to it's smallest width, and just use the remaining space for the main div? because it kinda seems like you wanted main div to have a shrink to fit width too or something, which doesn't make sense.

Sorry I wasn't clear enough. I indeed wanted the sidebar to shrink to its fittest width, while the main content would take as much space as possible (well, without being pushed, in part or totally, under the sidebar, and with a max-width on the body or main container).

I'm also not seeing how adding the formatting context with overflow:auto helps this to work... I suppose because it doesn't seem to be working on Firefox 1.5.

Thanks for the info. However, you should really be upgrading to Firefox 2. Firefox 1.5 is being deprecated, and will not be supported anymore, soon.

While I do think a bit, about IE 5-6, other browsers should be far more easy to update (although I do understand it might not always be possible, and a large part of the users do not now anything about updating), and I only take into account, the recent versions.

Anyway, I just couldn't handle it ^_^; I already wasted far too much time in my life, on compatibility problems, as most webmasters... (and I'm only 22, without a job, for now ^_^; -although I'm sure working on it :)). This would be hell. *Stops thinking about it*.

while it may work in most browsers to omit width, it is really proper to be relying on the fact that it will shrink-fit?

10.3.5 Floating, non-replaced elements: "If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width". :)

If it's just a menu and not very dynamic content, you could just size the side div with ems to the largest element - that's what I do for my "flexible width" designs (and when you do that, the main div does not need to be floated).

From my first post:

As a workaround, I use something like:

div#Sidebar { float: left; width: 13em; }
div#Content { margin-left: 13em; }

... and it works, but as said above, and this is the entire point of my post, I'd like to get a flexible sidebar, without having to specify its width.

(Sorry, I tend to be quite precise, my posts can generally be quite long, and I understand some people do not read everything :p).

The problem with this, is that the width of my menus were changing (multiple websites with different menus, applying bold to the name of the current page, and showing submenus, on the pages of a section).

It meant I had to manually adjust the width on mostly every pages.

Another problem is that, with em's, you depend on the font actual size, relative to its em square. For proportional fonts, notably, depending on the font, most glyphs could be much smaller, or much larger than their em square (and bold fonts can also be quite larger than the normal fonts), meaning that the actual width of a piece of text can vary a lot (meaning the x em extra width you added, could very well not be enough, in some cases -and if you add too much extra space, there will generally be too much empty space, and is it will waste space, and not look good).

The solution would be to use a single font, available on all systems, with the same metrics, or only fonts with a similar em square... but there is not many such fonts, if at all, and it can always be overridden (notably, for accessibility, which means for people who might need the layout to be as easy to understand as possible, so having broken-down menu entries is not really good...), and, AFAIC, I prefer simply using "sans-serif", so users can easily choose the font they'd like to use (although I sure am quite aware most people do not even know they can modify the default font, and that the default font can be quite bad -I guess I might change that, sometimes).

Really, this {overflow:auto;} thing is the only proper solution. It is a flexible layout dream (well, there are still a few other problems, but that's ok, for now).

[edited by: Mathieu_Bonnet at 7:54 am (utc) on Mar. 29, 2008]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved