CSS Nested DIV wrapping problem

Discussion in 'CSS' started by mognog, Mar 6, 2009.

0
  1. #1
    Hi I'm a c# .net developer and not a front end web/graphics designer but I'm dabbling in some CSS at the moment.
    I'm basicaly trying to do a layout that I would probably normaly do as a table.
    It's all working fine except column two in the middle column is wrapping and I don't know why. I've added colours to make it easier to see.

    Any ideas?

    Thanks

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        div.xma-framesize
        {
            background-color: Gray;
            width: 970px;
        }
        div.xma-header
        {
            background-color: Fuchsia;
        }
        div.xma-banner
        {
            background: cyan;
        }
        div.xma-contentbody
        {
            width: 100%;
            background-color: Teal;
        }
        div.xma-col-32
        {
            float: left;
            width: 32%;
            background-color: red;
        }
        div.xma-col-36
        {
            float: left;
            width: 36%;
            background-color: red;
        }
        div.xma-col-50
        {
           float: left;
           width: 50%;
           background-color: Yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="xma-framesize">frame width is set to 790px;
        <div class="xma-header">header goes here</div>
        <div class="xma-banner">banner goes here</div>
        <div class="xma-contentbody">
            <div class="xma-col-32">
                <div class="xma-col-100">left hand side column</div>
            </div>
            <div class="xma-col-36">
                <div class="xma-col-100">middle column column 1</div>
                    <div class="xma-col-100">
                        <div class="xma-col-50">Middle Column 2 Left</div>
                        <div class="xma-col-50">Middle Column 2 Right (keeps wrapping!)</div>
                    </div>
                </div>
            <div class="xma-col-32">
                <div class="xma-col-100">right hand side column</div>
            </div>
        </div>
        <div class="xma-footer">footer</div>
    </div>
    <br />
    </form>
</body>
</html>
    Code (markup):
     
    mognog, Mar 6, 2009 IP
  2. nyxano

    nyxano Peon

    Messages:
    417
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    When I changed div.xma-col-50 to 49%, the wrapping didn't occur.

    My guess is that you have a fixed width of 970px to start but the problem is that 32% and 36% of 970px is not a whole number... there is a decimal.

    For the middle column, 36% of 970 = 349.2 (or 349)

    Now, you are dividing that column in half but 50% of 349 is 174.5 (or 175). Take two 175px halves and add them together, you get 350 which is one pixel larger than 349 and as such, too big for the area so it wraps.

    My suggestion is if you start off with a fixed width (in this case 970), continue with a fixed width throughout the page.
     
    nyxano, Mar 6, 2009 IP
  3. mognog

    mognog Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks nyxano,

    I understand now why it's wrapping and I will change it to fixed widths as per your suggestion.

    Cheers
     
    mognog, Mar 9, 2009 IP