Pixel-perfect fluid widths

name _F1 · 10-27-2007, 03: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.

Code:

+--------+ +--------+
| Box 1  | | BOX 2  |
+--------+ +--------+
+-------------------+
|    BOX 3          |
+-------------------+
+-------------------+
|    BOX 4          |
+-------------------+

Everything lines up perfectly if I use % margins, until I add borders. If I add a 1px border, everything goes out of line. This is one of the biggest downfalls with CSS, in my opinion. Is there any way to make everything line up while still using borders and fluid widths, short of using Javascript to determine the viewport dimensions?

jlhaslip · 10-28-2007, 01: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...

name _F1 · 10-28-2007, 04: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.

PHP Code:


			
<html>

<head>

<style type="text/css">

div {

  border: 1px solid black;

  margin:1%;

  height:50px; /* Ignore this, it's just to expand the DIVS */

  padding:0;

}

div.head {

  width:47.5%; /* 48% widths wrap to the next line, because of the borders */

  float:left;

}

div.body {

  width:98%;

  clear:both;

}

</style>

</head>

<body>

<div class="head"></div>

<div class="head">Right edge edge of this DIV...</div>

<div class="body">...should align with the right edge of this DIV</div>

<div class="body"></div>

</body>

</html>

trigger_tre · 10-28-2007, 07: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.

-trigger

name _F1 · 10-28-2007, 07: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.

name _F1 · 10-29-2007, 09:42 AM

Can anyone else offer some insight?

jlhaslip · 10-29-2007, 08:30 PM

wrapper div?
float them left and right to the boundaries of the wrapper,with/without the borders.

dcostalis · 10-30-2007, 04:19 AM

try setting the left and right margins of the top divs individually, and floating the right div to the right.