SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: CSSP 100% width

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    0 Post(s)
    0 Thread(s)

    CSSP 100% width

    There is a top box which is 100% wide. Below it are two boxes. Together plus the space between them is 100%, so the right side of the right bottom box should align with the right side of the top box, but it doesn't quite. It's often off by a pixel or two depending on the size of the browser window. In IE, the problems are even worse, I guess because of its greater than 100% bug.

    If I float the right bottom box right, then its right side aligns with the right side of the top box, but why does that matter?

    Thanks very much for any suggestions on improving the robustness of this type of thing.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    .box {
    background: #ddd;
    border: 1px solid gray;
    padding: .5em;
    #topbox {
    clear: both;
    margin-bottom: 1%;
    padding-top: 1%;

    #leftbox {
    float: left;
    margin: 0;
    width: 50%;
    #rightbox {
    float: left;
    margin: 0 0 0 1%;
    width: 49%;

    <div id="topbox">
    <div class="box">
    top box

    <div id="leftbox">
    <div class="box">
    left box

    <div id="rightbox">
    <div class="box">
    right box


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)
    If I float the right bottom box right, then its right side aligns with the right side of the top box, but why does that matter?
    That's because the rounding difference is displayed in the space in the middle therefore it doesn't notice. The element is floated right which means keep the right edge as far to the right as possible.

    This is my guess:

    I assume that the smallest unit a browers can display is 1 pixel therefore the top box is reduced by 1 pixel as the window is made smaller but the 2 boxes below it can't be made half a pixel smaller each they are obviously rounded down by a pixel each. Sometimes it works out exact sometimes it doesn't.

    Floating one right and one left solves the problem as the diffenece is then in the space in the middle between the boxes.

    Ie's rounding algorithm obviously isn't as good as mozillas and will quite often round up 2 elements to make them greater than 100%. When this happens the float will drop to the next line and then pop back as the window is resized. This is a known bug and the solution is to avoid this situation and leave some leeway in your measurements.

    Hope this helps.



Posting Permissions

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