Floating Div's Side by Side, can't get the background container to push down

**Hero Doug** · Jun 18, 2006 00:05

I'm trying to only use CSS for this layout, and this is my first real attempt at doing it.

Surprisngly, the layout is flawless in IE, but not in Opera or Firefox, and I'm using Opera for testing.

What I'm trying to do is have two div's positioned side by side. The problem is that if I float them (Which is the only way I know of doing it) they just sit there, overlapping the footer, as as shown here

Now, if I clear the footer, they don't overlap it anymore, but the main container with the white background isn't pushed down either, as hown here.

How would I adjust my code so that the main container containing the white background will be pushed down as well?

HTML

Code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <title>My Site</title>
        <link href='style.css' rel='stylesheet' type='text/css' media='all' />
    </head>
    <body>
    
    <div id='container'>
    
        <div id='intro'>
            <div id='header'>
                &nbsp;
            </div>
            <div id='main-nav'>
                <ul>
                    <li id='selected'><a href='#'>Home</a></li>
                    <li><a href='#'>Blogs</a></li>
                    <li><a href='#'>Forums</a></li>
                    <li><a href='#'>Groups</a></li>
                    <li><a href='#'>News</a></li>
                    <li><a href='#'>Videos</a></li>
                    <li><a href='#'>Music</a></li>
                    <li><a href='#'>Photos</a></li>
                    <li><a href='#'>&nbsp;Sites</a></li>
                </ul>
            </div>
        </div>

        <div id='container-main'>
            <div id='main'>

                <div id='blogs'>
                    <div class='title'>
                        Hot Blogs
                    </div>
                    <div class='body-all'>
                        This is the total body for blogs
                    </div>
                </div>

                <div id='forums'>
                    <div class='title'>
                        Hot Forums
                    </div>
                    <div class='body-all'>
                        This is the total body for forums
                    </div>
                </div>

            </div>
        </div>

        <div id='footer'>
            <div id='copyright'>
                Copyright &copy; 2006 Douglas Brunner. All right reserved.
            </div>
        </div>
        
    </div>
    </body>
</html>

CSS

Code:

html {
    margin: 0px;
    padding: 0px;
}

body {
    margin: 0px;
    padding: 0px;
    font-size: .8em !important;
    color: #333333;
    background: #e7e7e7;;
    font: small verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

#container {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: left;
}

#intro {
    height: 99px;
    background: url("images/header/bg.jpg");
}

#header {
    height: 70px;
    width: 778px;
    margin: auto auto;
    background: url("images/header/logo.png") no-repeat;
    _background: url("images/header/logo.gif") no-repeat;
}

/*
*
*   Main Navigation
*
*/
#main-nav {
    width: 776px;
    margin: auto auto;
    font-size: 12px;
}

#main-nav ul {
    padding: 0px;
    margin: 0px;
    height: 29px;
    list-style: none;
    border-left: 1px #333333 solid;
}

#main-nav ul li {
    margin: 0px;
    height: 29px;
    float: left;
    line-height: 29px;
    text-align: center;
    border-right: 1px #333333 solid;
}

#main-nav ul li a {
    display: block;
    padding-left: 23px;
    padding-right: 23px;
    color: #000000;
    text-decoration: none;
}

#main-nav ul li a:hover {
    background: url("images/header/nav-hover.jpg");
    color: #000000;
}

#main-nav ul li a:visited {
    color: #800080;
    text-decoration: none;
}


#main-nav ul li#selected {
    background: url("images/header/nav-selected.jpg");
}

#main-nav ul li#selected:hover {
    background: url("images/header/nav-hover.jpg");
}

/*
*
*   Main Body
*
*/

#container-main {
    background: url("images/bg.jpg");
}

#main {
    padding: 7px;
    width: 759px;
    _width: 760px;
    margin: auto auto;
    background: #ffffff;
    border-left: 1px #333333 solid;
    border-right: 1px #333333 solid;
    clear: both;
}

.title {
    padding-left: 5px;
    height: 22px;
    font-size: .85em;
    line-height: 22px;
    background: url("images/title.png");
    border-left: 1px #333333 solid;
    border-right: 1px #333333 solid;
}

.body-all {
    border-bottom: 1px #333333 solid;
    border-left: 1px #333333 solid;
    border-right: 1px #333333 solid;
}

/*
*
*   Footer
*
*/

#footer {
    height: 30px;
    background: url("images/footer.jpg");
    font-size: 12px;
    clear: both; /* Cleared Footer */
}

#copyright {
    width: 773px;
    _width: 774px;
    margin: auto auto;
    padding-left: 5px;
    font-size: .8em;
    line-height: 30px;
}





/*
*
*   Homepage Specific
*
*/

div#blogs {
    position:relative;
    width: 300px;
    float: left;
}

div#forums {
    width: 300px;
    float: right;
}

**all4nerds** · Jun 18, 2006 01:21

Hello

Your floats are not cleared in nav and content box
to many heights set
to many width's set
Slight case of Divitus

not sure how you need this, i don't have the bgr images

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <title>My Site</title>
	<style type="text/css">
	
	head+/**/body .fc:after{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}
	
	/* mac hide \*/
	* html .fc{height:1%;}
	*+html .fc{display:inline-block;}
	/* end hide */
	
	*{margin: 0px;padding: 0px;}

	body{
	font-size: .8em !important;
	color: #333333;
	background: #e7e7e7;
	font-family: "small verdana", geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	}

	#container {
	width:778px;
	margin: 0 auto;
	text-align:left;
	}

	#intro{background:url("images/header/bg.jpg");}

	#header{
	height:70px;
	background: url("images/header/logo.png") no-repeat;
	}

	#main-nav{
	list-style:none;
	border-left:1px #333333 solid;
	border-right:1px #333333 solid;
	}
	#main-nav li{float:left;}
	
	#main-nav li a{border-right:1px #333333 solid;
	width:85px;
	font-size:12px;
	text-align:center;
	display:block;
	line-height:29px;
	color: #000000;
	text-decoration: none;
	}
	#main-nav .x a{border-right:none;}

	#main-nav ul li a:hover {background: url("images/header/nav-hover.jpg");}

	#main-nav ul li a:visited {color: #800080;}

	#main-nav ul li#selected {background: url("images/header/nav-selected.jpg");}

	#main-nav ul li#selected:hover {background: url("images/header/nav-hover.jpg");}
	
	#container-main{background: url("images/bg.jpg");}

	#main{
	padding:7px 7px 7px 7px;
	background: #ffffff;
	border-left: 1px #333333 solid;
	border-right: 1px #333333 solid;
	}

	#blogs h3,#forums h3{
	padding-left: 5px;
	height: 22px;
	font-size: .85em;
	line-height: 22px;
	background: url("images/title.png");
	font-weight:100;
	}
	
	#blogs h4,#forums h4{
	padding-left: 5px;
	font-weight:100;
	}

	#blogs,#forums{
	width: 300px;
	border: 1px #333333 solid;
	border-top:none;
	}
	#blogs{float: left;}
	#forums{float: right;}

	#footer {
	height:30px;
	background: url("images/footer.jpg");
	}

	#footer p{
	padding-left:5px;
	font-size:.8em;
	line-height:30px;
	}
	</style>
</head>
<body>

<div id='container'>

<div id='intro'>

<h1 id='header'></h1>

<ul id='main-nav' class="fc">
<li id='selected'><a href='##'>Home</a></li>
<li><a href='##'>Blogs</a></li>
<li><a href='##'>Forums</a></li>
<li><a href='##'>Groups</a></li>
<li><a href='##'>News</a></li>
<li><a href='##'>Videos</a></li>
<li><a href='##'>Music</a></li>
<li><a href='##'>Photos</a></li>
<li class="x"><a href='##'>&nbsp;Sites</a></li>
</ul>

</div>

<div id='container-main'>
<div id='main' class="fc">

<div id='blogs'>
<h3>Hot Blogs</h3>
<h4>
This is the total body for 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
blogs
</h4>
</div>

<div id='forums'>
<h3>Hot Forums</h3>
<h4>
This is the total body for 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
forums
</h4>
</div>
<!--  -->
</div>
</div>

<div id='footer'><p>Copyright &copy; 2006 Douglas Brunner. All right reserved.</p></div>

</div>

</body>
</html>

**Hero Doug** · Jun 18, 2006 08:12

Thanks allfornerds, you got it working perfectly. You even fixed a one pixel misalignment I was having trouble with. Hopefully I'll be able to figure out what you did a little better.

And, the "too many widths" problem was because I was trying to make it look like an ancient script, not like a box.

It was an easy enough fix:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <title>My Site</title>
        <style type="text/css">
        
        head+/**/body .fc:after{
        content:".";
        display:block;
        height:0px;
        clear:both;
        visibility:hidden;
        }
        
        /* mac hide \*/
        * html .fc{height:1%;}
        *+html .fc{display:inline-block;}
        /* end hide */
        
        *{margin: 0px;padding: 0px;}
        
        body{
            font-size: .8em !important;
            color: #333333;
            background: #e7e7e7;
            font-family: "small verdana", geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
        }
        
        #container {
            width: 100%;
            margin:auto;
            text-align:left;
        }

        #container-intro {
            background: url("images/header/bg.jpg");
        }
        
        #intro {
            margin: auto auto;
            width: 778px;
            background: url('images/header/bg.jpg');
        }
        
        #header {
            height:70px;
            background: url("images/header/logo.png") no-repeat;
            _background: url("images/header/logo.gif") no-repeat;
        }
        
        #main-nav {
            list-style:none;
            border-left:1px #333333 solid;
            border-right:1px #333333 solid;
        }
        #main-nav li {
            float:left;
        }
        
        #main-nav li a {
            border-right:1px #333333 solid;
            width:85px;
            font-size:12px;
            text-align:center;
            display:block;
            line-height:29px;
            color: #000000;
            text-decoration: none;
        }
        
        #main-nav .x a {
            border-right:none;
        }
        
        #main-nav ul li a:hover {
            background: url("images/header/nav-hover.jpg");
        }
        
        #main-nav ul li a:visited {
            color: #800080;
        }
        
        #main-nav ul li#selected {
            background: url("images/header/nav-selected.jpg");
        }
        
        #main-nav ul li#selected:hover {
            background: url("images/header/nav-hover.jpg");
        }
        
        #container-main {
            background: url("images/bg.jpg");
        }
        
        #main {
            margin: auto auto;
            width: 762px;
            padding:7px 7px 7px 7px;
            background: #ffffff;
            border-left: 1px #333333 solid;
            border-right: 1px #333333 solid;
        }
        
        #blogs h3, #forums h3 {
            padding-left: 5px;
            height: 22px;
            font-size: .85em;
            line-height: 22px;
            background: url("images/title.png");
            font-weight:100;
        }
        
        #blogs h4, #forums h4 {
            padding-left: 5px;
            font-weight:100;
        }
        
        #blogs, #forums{
            width: 300px;
            border: 1px #333333 solid;
            border-top:none;
        }
        
        #blogs {
            float: left;
        }
        
        #forums {
            float: right;
        }
        
        #footer {
            height:30px;
            background: url("images/footer.jpg");
        }
        
        #footer p {
            margin: 0px auto 0px auto;
            width: 778px;
            padding-left:5px;
            font-size:.8em;
            line-height:30px;
        }
        </style>
    </head>
<body>

<div id='container'>
    
    <div id='container-intro'>
        <div id='intro'>
            <h1 id='header'></h1>
            <ul id='main-nav' class="fc">
                <li id='selected'><a href='##'>Home</a></li>
                <li><a href='##'>Blogs</a></li>
                <li><a href='##'>Forums</a></li>
                <li><a href='##'>Groups</a></li>
                <li><a href='##'>News</a></li>
                <li><a href='##'>Videos</a></li>
                <li><a href='##'>Music</a></li>
                <li><a href='##'>Photos</a></li>
                <li class="x"><a href='##'>&nbsp;Sites</a></li>
            </ul>
        </div>
    </div>
    
    <div id='container-main'>
        <div id='main' class="fc">
        
            <div id='blogs'>
                <h3>Hot Blogs</h3>
                <h4>
                    This is the total body for 
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    blogs
                </h4>
                </div>
                
                <div id='forums'>
                <h3>Hot Forums</h3>
                <h4>
                    This is the total body for 
                    <br /><br /><br /><br />
                    forums
                </h4>
            </div>
            <!--  -->
        
        </div>
    </div>
    
    <div id='footer'>
        <p>Copyright &copy; 2006 Douglas Brunner. All right reserved.</p>
    </div>

</div>

</body>
</html>

Thanks again.

**all4nerds** · Jun 18, 2006 08:39

Hello

footer
778 + 5 padding = 783px

footer
778 + 2x 1px border = 780 px

if you wrap all in a container 778px you need no width's only padding or margins

#footer {
margin: 0px auto 0px auto;
width:780px;
height:30px;
background: url("images/footer.jpg");
}

#footer p {
background:#ccccff;
padding-left:5px;
font-size:.8em;
line-height:30px;
}

PS your links don't work

**Hero Doug** · Jun 19, 2006 01:19

The links were images I uploaded to the forum, guess you couldn't see them since they were pending approval. I think they've been approved now. Anyways, I see what you mean by saying if everything's wrapped in a container I don't need width, but I want the header and footer to span the entire page, and only the middle section is a fixed width and centered.

User Tag List

Thread: Floating Div's Side by Side, can't get the background container to push down

Thread Tools

Display

Floating Div's Side by Side, can't get the background container to push down

Bookmarks

Bookmarks

Posting Permissions