SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container Div not wrapping descendent divs

    Absolutely driving me crazy... My div, "stage" is not wrapping all the way around the "main" and "rtbar" divs. I've checked the html code several times and it seems to me that this is correctly coded.

    Just to illustrate the effect, I've given "stage" a green border. When viewed in the browser (I'm using safari) the green border only extends 24 px (for top padding, and bottom padding) when I'm trying to have it extend 10 px below the main div. Any suggestions?

    html code:
    <body>
    <div id="wrapper">
    <div id="header">
    <ul id="topnav">
    <li id="nav_con"><a href="#">contact</a></li>
    <li id="nav_cp"><a href="#">partners</a></li>
    <li id="nav_board"><a href="#">board</a></li>
    <li id="nav_join"><a href="#">join nawbo</a></li>
    <li id="nav_events"><a href="#">events</a></li>
    <li id="nav_hom"><a href="#">home</a></li>
    </ul><!-- topnav -->
    </div><!-- header -->
    <div id="stage">
    <div id="main">
    <h1>Welcome to NAWBO San Antonio</h1>
    <p>Currently, we are building a new website. However, visitors can still access the site for <a href="#">upcoming events</a>, our current listing of <a href="#">board members</a> and <a href="#">corporate partners</a>, and we have our <a href="#">contact information</a> available for any questions or comments. This year is sure to be an exciting year as we enter our 10th year. Our focus is on <em class="italics">"propelling business growth."</em> Be sure to check back with the site as more content becomes available.</p>
    <p><a class="rt_emph" href="#">Interested in Joining NAWBO?</a></p>
    </div><!-- main -->
    <div id="rtbar"></div><!-- rtbar -->
    </div><!-- stage -->
    </div><!-- wrapper -->
    </body>

    css code:
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #333333;
    text-align: center;
    margin: 0px;
    background-image: url(images/color_bkgnd.gif);
    }
    #wrapper {
    text-align: left;
    width: 760px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    }
    #header {
    background-image: url(images/nawbo_hdr.jpg);
    background-repeat: no-repeat;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #E6BB7E;
    height: 175px;
    width: 760px;
    margin: 0px;
    position: relative;
    }
    #topnav {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    float: right;
    width: 760px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    }
    #topnav li {
    margin: 0px;
    padding: 0px;
    float: right;
    }
    #topnav a {
    text-decoration: none;
    display: block;
    color: #663399;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: ff9933;
    float: left;
    width: 75px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
    }
    #topnav a:hover {
    color: #FF9933;
    text-decoration: underline;
    }
    #topnav #nav_con a {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    #stage {
    top: 0px;
    padding-top: 14px;
    border: 1px dotted #33FF99;
    position: relative;
    padding-bottom: 10px;
    }
    #main {
    width: 478px;
    margin-top: 0px;
    margin-left: 0px;
    position: absolute;
    padding: 0px 20px 20px 0px;
    left: 0px;
    top: 14px;
    text-align: justify;
    float: left;
    }
    .rt_emph {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: right;
    padding-right: 20px;
    }
    #rtbar {
    width: 240px;
    position: absolute;
    left: 500px;
    top: 14px;
    padding: 10px;
    background-color: #FF9933;
    margin: 0px;
    float: right;
    }
    #main h1 {
    color: #669966;
    }
    a {
    color: #663399;
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;
    color: ff9933;
    }
    .italics {
    font-style: italic;
    }

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think your main problem is that you're mixing absolute, relative and floats so I've stripped out the unnecessary positioning and have everything floating.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" lang="en">
    <head>
    <title>Menu List</title>
    <style type="text/css">
    
    /* ~~~~~ REDEFINED STYLES ~~~~~ */
    
    * {
    	padding: 0x;
    	margin: 0px;	
    }
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 80&#37;;
    	color: #333333;
    	background-image: url(images/color_bkgnd.gif);
    	width: 760px;
    	margin: 0px auto;
    }
    
    h1 {
    	color: #669966;
    }
    
    /* ~~~~~ LINKS ~~~~~ */
    
    a {
    	color: #663399;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: none;
    	color: ff9933;
    }
    
    /* ~~~~~ COMMON STYLES ~~~~~ */
    
    .italics {
    	font-style: italic;
    }
    
    /* ~~~~~ LAYOUT ~~~~~ */
    
    #wrapper {
    	float: left;
    	width: 760px;
    }
    #header {
    	float: left;
    	background-image: url(images/nawbo_hdr.jpg);
    	background-repeat: no-repeat;
    	border-bottom: 1px dotted #E6BB7E;
    	height: 175px;
    	width: 760px;
    	margin: 0px;
    }
    #topnav {
    	margin-top: 155px;
    	list-style-type: none;
    	float: right;
    	width: 760px;
    }
    #topnav li {
    	margin: 0px;
    	padding: 0px;
    	float: right;
    }
    #topnav a {
    	text-decoration: none;
    	display: block;
    	color: #663399;
    	border-right: 1px #ff9933 solid;
    	float: left;
    	width: 75px;
    	padding: 2px 5px;
    	text-align: center;
    }
    #topnav a:hover {
    	color: #FF9933;
    	text-decoration: underline;
    }
    #topnav #nav_con a {
    	border: none;
    }
    #stage {
    	padding: 14px 0px 10px 0px;
    	border: 1px dotted #33FF99;
    	float: left;
    	width: 740px
    }
    
    #main {
    	width: 478px;
    	padding: 14px 20px 20px 0px;
    	text-align: justify;
    	float: left;
    }
    .rt_emph {
    	display: block;
    	padding: 2px 20px 2px 0px;
    	text-align: right;
    }
    #rtbar {
    	width: 210px;
    	padding: 14px;
    	background-color: #FF9933;
    	float: right;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="header">
    		<ul id="topnav">
    		<li id="nav_con"><a href="#">contact</a></li>
    		<li id="nav_cp"><a href="#">partners</a></li>
    		<li id="nav_board"><a href="#">board</a></li>
    		<li id="nav_join"><a href="#">join nawbo</a></li>
    		<li id="nav_events"><a href="#">events</a></li>
    		<li id="nav_hom"><a href="#">home</a></li>
    		</ul>
    	</div>
    	<div id="stage">
    			<div id="main">
    				<h1>Welcome to NAWBO San Antonio</h1>
    				<p>Currently, we are building a new website. However, visitors can still access the site for <a href="#">upcoming events</a>, our current listing of <a href="#">board members</a> and <a href="#">corporate partners</a>, and we have our <a href="#">contact information</a> available for any questions or comments. This year is sure to be an exciting year as we enter our 10th year. Our focus is on <em class="italics">"propelling business growth."</em> Be sure to check back with the site as more content becomes available.</p>
    				<p><a class="rt_emph" href="#">Interested in Joining NAWBO?</a></p>
    			</div>
    		<div id="rtbar"></div>
    	</div>
    </div>
    </body>
    </html>
    Hope that's what you're after?


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
  •