|
|
Posted by Ben C on 12/21/06 15:12
On 2006-12-21, K A Nuttall <keith@yammer.coedotyoukay.invalid> wrote:
> 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>
Navigation:
[Reply to this message]
|