CSS Layout Not Fluid

**kbjradmin** · 06-05-2009 09:16 PM

ok, so i made this layout in css, and from what i can tell, it should be fluid, but its not. i don't understand why the whole page won't expand with the main content. here is the code:

index.php

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?php include('config.php'); ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    
    <!--Data Tags-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="en" />
        <title><?php echo $pageTitle; ?></title>
        
    <!--File Includes-->
    
        <!--CSS Files-->
            <link rel="stylesheet" type="text/css" href="style.css" />
            <link rel="stylesheet" type="text/css" href="background.css" />
            
        <!--Script Files-->
            <script type="text/javascript" src="scripts/onPageLoad.js"></script>
        
        <!--Other Files-->
            <link rel="shortcut icon" href="media/favicon.ico" />
    
</head>

<body>

    <div id="wrapper-background">
    
    
        <!--Top-->
            <div id="wb-top">
                <div class="wb-left"></div>
                <div class="wb-right"></div>
                <div class="wb-center">
                    <div id="header">
                        <h1>Header</h1>
                    </div>
                </div>
            </div>
        
        <!--Middle-->
            <div id="wb-middle">
                <div class="wb-left"></div>
                <div class="wb-right"></div>
                <div class="wb-center">
    
                    <div id="wrapper-content">
        
                        
                        
                        <div id="navagation">
                        </div>
                        
                        <div id="main">
                        
                            <div class="left">
                                <p style="text-align:center;">Main Left</p>
                            </div>
                            
                            <div class="right">
                                <p style="text-align:center;">Main Right</p>
                            </div>
                                                    
                            <div class="center">
                                <p style="text-align:center;">Main Center</p>
                            </div>
                            
                            <div class="clear"></div>
                        
                        </div>
                        

                    
                    </div>
    
                </div>
            </div>
        
        <!--Bottom-->
            <div id="wb-bottom">
                <div class="wb-left"></div>
                <div class="wb-right"></div>
                <div class="wb-center">
                    <div id="footer">
                        <?php echo $footerCode; ?>
                    </div>
                </div>
            </div>
        
    </div>

</body>

</html>

style.css

Code:

@charset "utf-8";

*{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: Comic Sans MS, Comic Sans MS5, cursive;
    font-weight: 100;
}

a{
    color: #3f9ce9;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

.clear{
    clear: both;
}

body{
    background-image: url('media/background.png');
    background-position: left top;
    background-attachment: scroll;
    background-repeat: repeat-x;
    background-color: #ffffff;
}

#wrapper-background{
    width: 95%;
    margin: 2em auto 2em auto;
    position: relative;
    min-height: 250px;
}





#header{
    font-size: 20px;
}

#main .left{
    float: left;
    width: 15%;
}

#main .right{
    float: right;
    width: 15%;
}

#footer{
    margin-top: 20px;
}

#footer .left{
    float: left;
}

#footer .right{
    float: right;
}

background.css

Code:

@charset "utf-8";



/*
Top Row
*/

#wb-top .wb-left{
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('media/top-left.png');
    width: 50px;
    height: 50px;
}

#wb-top .wb-right{
    position: absolute;
    top: 0px;
    right: 0px;
    background: url('media/top-right.png');
    width: 50px;
    height: 50px;
}

#wb-top .wb-center{
    position: absolute;
    top: 0px;
    left: 50px;
    right: 50px;
    background: url('media/top.png');
    height: 50px;
}



/*
Middle Row
*/

#wb-middle .wb-left{
    position: absolute;
    top: 50px;
    left: 0px;
    bottom: 50px;
    background: url('media/left.png');
    width: 50px;
}

#wb-middle .wb-right{
    position: absolute;
    top: 50px;
    right: 0px;
    bottom: 50px;
    background: url('media/right.png');
    width: 50px;
}

#wb-middle .wb-center{
    position: absolute;
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 50px;
    background-color: #ffffff;
}



/*
Bottom Row
*/

#wb-bottom .wb-left{
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: url('media/bottom-left.png');
    width: 50px;
    height: 50px;
}

#wb-bottom .wb-right{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: url('media/bottom-right.png');
    width: 50px;
    height: 50px;
}

#wb-bottom .wb-center{
    position: absolute;
    bottom: 0px;
    left: 50px;
    right: 50px;
    background: url('media/bottom.png');
    height: 50px;
}

please help!

**leafypiggy** · 06-05-2009 10:16 PM

Can you link us to your site? Might help to have a copy to look at.

**kbjradmin** · 06-06-2009 03:04 PM

here's a link to the page.
http://www.kbjrweb.com/template1/

**misson** · 06-06-2009 05:07 PM

Originally Posted by kbjradmin

ok, so i made this layout in css, and from what i can tell, it should be fluid, but its not. i don't understand why the whole page won't expand with the main content.

It would also be useful if you were more descriptive. What, precisely, is the behavior you want? What is the behavior you get? What browsers are you testing?

The only issue I see is on Safari 3.2, where the #wrapper-background and #wb-bottom elements aren't containing the "Valid XHTML and CSS" notice. This is because you're using absolute positioning, which takes elements out of the normal flow. Use floating (or inline elements) rather than absolute positioning to place elements horizontally.

The page looked fine under Firefox 3. I didn't test any version of IE.

**kbjradmin** · 06-06-2009 05:10 PM

it looks fine because i gave the content div a min-height. if that is removed, or if more content is added, i want the container to expand with the content.

**misson** · 06-06-2009 09:30 PM

Then the issue is still absolute positioning. It's useful for things like corner images, but not so much for content.

**kbjradmin** · 06-06-2009 09:47 PM

ok, i've changed it so that it uses margins for the content div, but now it's giving me a different problem. it won't stay inside the center area, it keeps expanding beyond its given area.

**VPmase** · 06-07-2009 05:04 AM

Add
max-height:##px/%;
to your CSS

http://www.w3schools.com/Css/pr_dim_max-height.asp

**xav0989** · 06-07-2009 07:40 AM

I've added through my firebug
padding: 50px 0;
to wb-middle.wb-center
It is not the best solution, but with absolute positioning, it helps.

I'd say, go with float, and do a clear: both; after each part.

**kbjradmin** · 06-07-2009 02:28 PM

@xav0989, i tried adding padding, but it still has a problem. the center div is overhanging the top and bottom divs, creating this odd white outline.

Thread: CSS Layout Not Fluid

LinkBack

Thread Tools

Display

CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Re: CSS Layout Not Fluid

Similar Threads

Problem with two column CSS layout and tables

{TUTORIAL} Page design / layout / template (NO slicing!)

{req} Layout + Members Login Area

(req) Layout

Should i use this layout?

Posting Permissions