SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Hero Doug's Avatar
    Join Date
    Nov 2003
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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;
    }
    Attached Images Attached Images

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Jun 18, 2006 at 08:03.

  3. #3
    SitePoint Addict Hero Doug's Avatar
    Join Date
    Nov 2003
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Addict Hero Doug's Avatar
    Join Date
    Nov 2003
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

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