Using percentage widths

K

K A Nuttall

Hi folks

My last few sites have been fixed-width. Now, I'm playing around with
fluid layouts, using percentage widths and margin/padding in ems. It
was all going well, until I hit upon a few snags with unwanted
wrapping.

I don't have specific URLs to show you, at the moment. I was hoping
someone could give me general advice, or point me at specific
resources.

My main problem is making stuff fit to 100%. A site I was playing
around with today had two layout structures: a five-part horizontal
list menu (20% each), and three floated-div columns (25%, 50%, 25%).

In certain browser widths, the sum of the component widths exceeded the
total available, and the last component appeared below. I'm fairly
certain that widths were set correctly (no margins, borders nor
padding), I think the problem was caused by browsers 'rounding-up'
widths to the nearest pixel.

My workaround was to sum up to less than 100%, by some small
percentage. If the small amount of compensation was too large, it had
the unwelcome assymetrical effect of leaving a gap at the right-hand
side. As this is a 'hacky' and ungraceful solution, I thought I'd come
here and find out what I really should be doing.
 
B

Ben C

Hi folks

My last few sites have been fixed-width. Now, I'm playing around with
fluid layouts, using percentage widths and margin/padding in ems. It
was all going well, until I hit upon a few snags with unwanted
wrapping.

I don't have specific URLs to show you, at the moment. I was hoping
someone could give me general advice, or point me at specific
resources.

My main problem is making stuff fit to 100%. A site I was playing
around with today had two layout structures: a five-part horizontal
list menu (20% each), and three floated-div columns (25%, 50%, 25%).

In certain browser widths, the sum of the component widths exceeded the
total available, and the last component appeared below. I'm fairly
certain that widths were set correctly (no margins, borders nor
padding), I think the problem was caused by browsers 'rounding-up'
widths to the nearest pixel.

My workaround was to sum up to less than 100%, by some small
percentage. If the small amount of compensation was too large, it had
the unwelcome assymetrical effect of leaving a gap at the right-hand
side. As this is a 'hacky' and ungraceful solution, I thought I'd come
here and find out what I really should be doing.

Well, I don't design a lot of websites, but it seems to me that
absolute positioning is better for this than floats.

This way they'll always run right to the edge and never jump down:

<style type="text/css">
div
{
position: absolute;
height: 600px;
}
#one
{
left: 0;
right: 66%;
background-color: red;
}
#two
{
left: 33%;
right: 33%;
background-color: green;
}
#three
{
left: 66%;
right: 0;
background-color: blue;
}
</style>

...

<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
 
B

Bergamot

K said:
My main problem is making stuff fit to 100%.

In certain browser widths, the sum of the component widths exceeded the
total available, and the last component appeared below. I'm fairly
certain that widths were set correctly

"Fairly certain" may be your problem. Why don't you post a URL?
 
L

-Lost

Beauregard T. Shagnasty said:
Works in IE for me if I change the #col3 to: float: right;

In IE6, floating it right caused it to be on the next line, aligned right.

Instead I put clear: right; on col3 and it worked. At least, I thought it did. Then I
noticed the horizontal scrollbar, yet no noticeable gap causing it.

I am no HTML guru, just pointing out what I noticed.

-Lost
 
B

Bergamot

K said:

Put the first 2 columns in another container and float that left,
width:75%. Float the 3rd column right. IE should stop behaving badly, at
least for the most pare.

If you do this, I suggest floating column 1 left, and not floating
column 2 at all, but just set its margin-left to the width of column 1.
 
D

dorayme

Ben C said:
Well, I don't design a lot of websites, but it seems to me that
absolute positioning is better for this than floats.

This way they'll always run right to the edge and never jump down:

<style type="text/css">
div
{
position: absolute;
height: 600px;
}
#one
{
left: 0;
right: 66%;
background-color: red;
}
#two
{
left: 33%;
right: 33%;
background-color: green;
}
#three
{
left: 66%;
right: 0;
background-color: blue;
}
</style>

Why the two dimensions, left and right? Would not left be good
enough, at least for #one and #two? Or am I not thinking this
through, I don't use absolute positioning myself (but I am
thinking of it! I like the idea of the content being first in the
source code).
 
D

dorayme

"Beauregard T. Shagnasty said:
Works in IE for me if I change the #col3 to: float: right;

I recall having to do exactly this once for a third col, worked
like a charm then. (I think!)
 
D

dorayme

Bergamot said:
Put the first 2 columns in another container and float that left,
width:75%. Float the 3rd column right. IE should stop behaving badly, at
least for the most pare.

If you do this, I suggest floating column 1 left, and not floating
column 2 at all, but just set its margin-left to the width of column 1.

You do need to specially provide for IE 6: with floats, this
browser adds 3 pixels between the floated rectangles
 
B

Ben C

Why the two dimensions, left and right? Would not left be good
enough, at least for #one and #two?

Not unless you also set width. If you set two out of the three (left,
width and right) the browser solves for the other one.

Another quite useful thing about using left and right rather than width
is they're measured to the outside of the marginpaddingborders. So in
this example, if you just add to the div selector at the top:

border: 10px solid black;
margin: 2em;

All the divs get the border and margin and still spread evenly across
the page. This is hard to do with percentage-width floats, because you
can't say "33% - 10px" (and even if you could it would be annoying to
have to), so you have to guess, or nest divs with the borders and
margins inside the three undecorated 33%-wide floats.
 
L

-Lost

Ben C said:
Not unless you also set width. If you set two out of the three (left,
width and right) the browser solves for the other one.

Another quite useful thing about using left and right rather than width
is they're measured to the outside of the marginpaddingborders. So in
this example, if you just add to the div selector at the top:

border: 10px solid black;
margin: 2em;

All the divs get the border and margin and still spread evenly across
the page. This is hard to do with percentage-width floats, because you
can't say "33% - 10px" (and even if you could it would be annoying to
have to), so you have to guess, or nest divs with the borders and
margins inside the three undecorated 33%-wide floats.

Say what? In what browser does that work? Your code (all of it) would create three
*floating* DIVs. That is to say they do not reach from one side to the other.

In Internet Explorer 6 they are barely 30px wide. All positioned elements should have a
width specified if I remember correctly.

-Lost
 
J

Jim Moe

K said:
Okay. I pared down the page to the relevant code, and posted it here:
www.yammer.co.uk/untitled.html
IE usually messes up when widths add up to 100%. I have had cases where
99.9% was a solution. Sometimes when slowly narrowing the viewport, IE
will wrap and unwrap blocks several times. Creative math.
You mentioned setting margin/padding in ems. To further reduce the
wrapping problem, set the horizontal margin/padding with percentages as
well. For an 800px wide viewport and 16px text, 2% corresponds to 1em.
Then your only problem will be borders.
 
D

dorayme

Why the two dimensions, left and right? Would not left be good
enough, at least for #one and #two?

Not unless you also set width. If you set two out of the three (left,
width and right) the browser solves for the other one.

Another quite useful thing about using left and right rather than width
is they're measured to the outside of the marginpaddingborders. So in
this example, if you just add to the div selector at the top:

border: 10px solid black;
margin: 2em;

All the divs get the border and margin and still spread evenly across
the page. This is hard to do with percentage-width floats, because you
can't say "33% - 10px" (and even if you could it would be annoying to
have to), so you have to guess, or nest divs with the borders and
margins inside the three undecorated 33%-wide floats.[/QUOTE]

Good, armed with this, I might have a go at making my next three
column website with absolute just so I have one in my stable.
 
B

Ben C

Say what? In what browser does that work? Your code (all of it)
would create three *floating* DIVs. That is to say they do not reach
from one side to the other.

Which code? The example HTML, or what you reconstruct from my
abbreviated description of the alternative using floats?
In Internet Explorer 6 they are barely 30px wide. All positioned
elements should have a width specified if I remember correctly.

Not necessarily, in many circumstances where leave the width as auto you
get the "shrink-to-fit" width (which you also get for floats with auto
width). Sometimes this is just what you want.

In any case, as demonstrated, you can set left and right but not width.

You may be right that some or all of this doesn't works in IE6, I don't
know, I haven't tried it.
 
J

Jonathan N. Little

K said:
I tried that, it didn't work here.


Now there's a surprise.

I've now added the horizontal menu to the page:
www.yammer.co.uk/untitled.html

There must be an easier way to fix this bug than mucking about with
width deltas.

IE problem is a round off error. Pisser,but you can compromise by
tweaking the LI to:

..hzmenu li {
width: 19.95%;
}

It is a PITA though, take it up with MS, they don't seem compelled to
really support CSS spec even for version 7. Maybe they need to leave
somethings to sell us on upgrading version 8 (Only available with the
Windows after Vista!)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top