Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    Pixel-perfect fluid widths

    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?

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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...

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    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 {
      
    border1px 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

  • #4
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    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

  • #5
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Can anyone else offer some insight?

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    wrapper div?
    float them left and right to the boundaries of the wrapper,with/without the borders.

  • #8
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    try setting the left and right margins of the top divs individually, and floating the right div to the right.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •