1 reply [Last post]
junglist_matty
junglist_matty's picture
Offline
newbie
Cambridge
Last seen: 2 years 35 weeks ago
Cambridge
Joined: 2011-11-18
Posts: 2
Points: 3

I am having some issues designing a liquid layout. I have spent hours now messing around reading tutorials and forums regarding layout design and so on.

However, I'm not afraid to admit defeat and ask for some help when I've exhausted all options, so here I am Wink and hopefully someone with the know how can give me some pointers.

So I've decided to go for a 3 column centered liquid layout, probably not the easiest for a first timer, but I like a challenge!

here is my code so far...

[layout.css]

/* CSS layout:
 
|==[body]==========================================================================================================================|
|                                                                                                                                  |
|  |==[header_container]========================================================================================================|  |
|  |                                                                                                                            |  |
|  |  |--[header_left]----|  |--[header_center]------------------------------------------------------|  |--[header_right]--- |  |  |
|  |  |                   |  |                                                                       |  |                    |  |  |                                 |  |  |
|  |  |-------------------|  |-----------------------------------------------------------------------|  |--------------------|  |  |
|  |                                                                                                                            |  |
|  |  |--[nav_bar]-----------------------------------------------------------------------------------------------------------|  |  |
|  |  |                                                                                                                      |  |  |
|  |  |----------------------------------------------------------------------------------------------------------------------|  |  |
|  |                                                                                                                            |  |
|  |============================================================================================================================|  |
|                                                                                                                                  |
|  |==[main_container]==========================================================================================================|  |
|  |                                                                                                                            |  |
|  |  |--[left_backdrop]--|  |==[content_container]==================================================|  |--[right_backdrop]--|  |  |
|  |  |                   |  |                                                                       |  |                    |  |  |
|  |  |                   |  |  |--[content_left]--|  |--[content_center]--|  |--[content_right]--|  |  |                    |  |  |
|  |  |                   |  |  |                  |  |                    |  |                   |  |  |                    |  |  |
|  |  |                   |  |  |------------------|  |--------------------|  |-------------------|  |  |                    |  |  |
|  |  |                   |  |                                                                       |  |                    |  |  |
|  |  |-------------------|  |=======================================================================|  |--------------------|  |  |
|  |                                                                                                                            |  |
|  |============================================================================================================================|  |
|                                                                                                                                  |
|==================================================================================================================================|
 
*/
 
/* Remove padding and borders as don't want whitespace around the edges of the page */
html, body {
    margin:0px;
    border:0px;
    padding:0px;
    width:100%;
    height:100%;
}
 
/*
classes to go inside [header_container]
*/
#header_container {
    background:yellow;
    width:auto;
    max-width:100%;
    min-width:800px;
    height:150px;
    padding:0px;
    border:none;
    display:inline;
    margin:0 auto;
}
 
#header_left {
    background:black;
    float:left;
    width:20%;
    height:100px;
}
 
#header_center {
    background:green;
    float:left;
    width:60%;
    height:100px;
    text-align:center;
}
 
#header_right {
    background:black;
    float:left;
    width:20%;
    height:100px;
}
 
#nav_bar {
    background:blue;
    float:left;
    width:100%;
    height:50px;
    text-align:center;
    clear:both;
}
 
/*
classes to go inside [main_container]
*/
#main_container {
    width:auto;
    max-width:100%;
    min-width:800px;
    height:100%;
    display:inline;
    border:none;
    margin:0 auto;
}
 
#left_backdrop {
    background:black;
    float:left;
    width:20%;
    height:100%;
}
 
#content_container {
    background:yellow;
    float:left;
    width:60%;
    height:100%;
    padding:0px;
    border:0px;
    margin:0 auto;
    display:inline;
    border:none;
}
 
#right_backdrop {
    background:black;
    float:left;
    width:20%;
    height:100%;
}
 
/*
classes to go inside [content_container]
*/
#content_left {
    background:green;
    float:left;
    width:5%;
    height:100%;
}
 
#content_center {
    background:white;
    float:left;
    width:90%;
    height:100%;
    text-align:center;
}
 
#content_right {
    background:green;
    float:left;
    width:5%;
    height:100%;
}

[page.html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Liquid CSS</title>
        <style type="text/css" media="screen, projection">
            <!--
            @import url(layout.css);
            -->
        </style>
    </head>
    <body>
        <div id="header_container">
            <div id="header_left"></div>
            <div id="header_center"></div>
            <div id="header_right"></div>
            <div id="nav_bar"></div>
        </div>
        <div id="main_container">
            <div id="left_backdrop"></div>
            <div id="content_container">
                <div id="content_left">L</div>
                <div id="content_center">C</div>
                <div id="content_right">R</div>
            </div>
            <div id="right_backdrop"></div>
        </div>
    </body>
</html>

So the problem is viewing the website and changing the size of the browser. I see the right side of certain div elements seem to have some empty space on the right hand side (a couple of pixels).

Also when viewing in IE, when resizing, there are certain browser widths where the page just falls totally out of position and becomes a complete mess!

I've tried setting borders, margins, changing the display: parameter, everything I can think of based on my very limited knowledge of CSS.
Any pointers would be very much appreciated Smile

Thanks.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 hours 36 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5076
Points: 2654

Hi junglist_matty, Browser

Hi junglist_matty,
Browser calculate % widths into a pixel value and sometimes can have rounding issues.
For example if you have an actual width of 101px, 50% may be rounded to 51 or 50 pixels both of which aren't correct.
I don't know or care which way the browsers round.
If it uses 51, the combined width 102 would exceed the available area so a column would drop.
If it uses 50, then you would have extra pixels.
It was common practice to leave a few % out just to allow them.
You also need to be sure that no margin is effecting any of the elements.
Another good practice when dealing with floats is to only set margin or padding on elements that don't have a width.