View Full Version : Pixel-perfect fluid widths
10-27-2007, 04:58 AM
I am trying to achieve a layout which adjusts to the resolution of the user's screen, but also lines up with other elements on the page.
I want to have two boxes at the top of the page, next to each other (floated left), with some more boxes below them which line up with the edges of the boxes above.
| Box 1 | | BOX 2 |
| BOX 3 |
| BOX 4 |
10-28-2007, 02:31 AM
What do you want the borders on? Every div? the entire page?
Where is the code you are working with?
Trying to help you here...
10-28-2007, 05:17 AM
Sorry, I was in a bit of a hurry when I posted so I forgot some information. I want the borders on every DIV.
border: 1px solid black;
height:50px; /* Ignore this, it's just to expand the DIVS */
width:47.5%; /* 48% widths wrap to the next line, because of the borders */
<div class="head">Right edge edge of this DIV...</div>
<div class="body">...should align with the right edge of this DIV</div>
10-28-2007, 08:17 AM
I could be wrong because I don't usually use fluid width but.
From my calculations you set width to 98% plus your margin is set to 1%.
So add 1% + 98% + 1% = 100% (100% is the max, but now you decided to add a 1 pixel border to it)
Again let me stress that I don't normally code fluid layouts so I am not sure which gets calculated first.
If the browsers subtract the 1 pixel border from the TOTAL resolution first then from that new total it uses 1 % for margins and 98% for width then you should be ok.
However, logically speaking if the browser takes the TOTAL resolution and makes the margins 1% then the width 98% by the time it tries to calculate the borders its out of fingers to use for counting.
AGAIN I don't know for sure but my guess is that if your using percentages then try to use a percentage for borders too. This might correct the problem.
10-28-2007, 08:44 AM
Unfortunately percentage borders don't work.
With no border, 48% widths on the top DIVs and 98% widths on the bottom DIVs, everything lines up perfectly. When 1px borders are added, the total width becomes slightly larger than 100%, so the second header DIV jumps to the next line.
10-29-2007, 10:42 AM
Can anyone else offer some insight?
10-29-2007, 09:30 PM
float them left and right to the boundaries of the wrapper,with/without the borders.
10-30-2007, 05:19 AM
try setting the left and right margins of the top divs individually, and floating the right div to the right.
Powered by vBulletin® Version 4.2.2 Copyright © 2016 vBulletin Solutions, Inc. All rights reserved.