SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered wrapper disappears with floats inside

    I have a wrapper with a set width and centered on the page. There's a nav bar floated to the left and contents to the right. When I had the body background all white everything was fine. When I changed the body color so only the wrapper was white, I saw that the wrapper was actually just a tiny sliver above the floats. If I float the wrapper it shows the background as white, but I want it centered.

    I don't know if I'm having a problem because the header and footer are outside of the wrapper (or if it's ok practice to do it that way). Or should there be a container holding the nav and content inside the wrapper that's floated?

    The way you see it here http://peacefuldriver.net/waterlogix/ the wrapper is floated so the white background shows up. But if I remove the float the two floated columns move outside of the wrapper.

    Thanks. I hope this is clear.

    Code:
    #wrapper {
    	background: #FFFFFF;
    	width: 740px;
    	margin: 0 auto;
    	text-align: left;
    	float: left;
    }
    #content {
    	width: 560px;
    	background-color: #FFFFFF;
    	padding: 1em 0 1em 0;
    	float: right;
    }
    #mainNav {
    	float: left;
    	width: 150px;
    }
    #mainNav  ul  {
    	margin-top: 1em;
    	width: 150px;
    
    
    }
    #mainNav ul li {
    	background-color: #99CC99;
    	background-repeat: no-repeat;
    	list-style-type: none;
    	border-bottom: 1px solid white;
    	line-height: 1em;
    }
    #mainNav li a {
    	color: white;
    	text-decoration: none;
    	display: block;
    	background-color: #99CC99;
    	padding: 10px;
    	font-weight: bold;
    	background-image: url(images/green-bubbles.jpg);
    
    
    
    }
    #mainNav a:hover {
    	background-color: #3679C0;
    	background-image: url(images/blue-bubbles.jpg);
    }
    HTML Code:
    <div id="wrapper">
    
    <div id="content">
    
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed   arcu sit amet justo tristique vestibulum. Etiam vitae lorem. Lorem ipsum dolor   sit amet, consectetuer adipiscing elit. In tempus porttitor ipsum. In sodales   nulla in quam. Donec vestibulum est et quam molestie tincidunt. Morbi interdum,   elit in molestie congue, augue sapien venenatis nulla, at pharetra lacus nunc in   purus. Aenean at mi a urna fringilla pulvinar. Sed consequat. Maecenas varius,   ipsum eget dapibus fermentum, felis ligula sodales arcu, et congue sapien ligula   a massa. Nunc tempor. Aenean nulla tortor, pellentesque at, congue at, semper   ac, nisl. Morbi placerat. Duis in justo sit amet nunc elementum tristique.   Aliquam leo purus, volutpat condimentum, vehicula at, facilisis eu, neque. Nam   eu lorem. Curabitur est arcu, vestibulum id, sagittis in, tempus et, nulla. Nam   id orci. </p>
        <p>Pellentesque consequat augue id elit. Aenean consectetuer. Proin dictum. Nam   ac augue. Phasellus ultricies. Mauris lorem lorem, viverra in, fermentum sed,   convallis sit amet, leo. Aliquam pretium est et risus. Nam risus elit, vulputate   cursus, euismod ac, commodo in, est. </p>
    
    </div><!--content-->
    
    <div id="mainNav">
      <ul>
      <li><a href="index.htm">Home</a></li>
      <li><a href="about.htm">About Waterlogix</a></li>
      <li><a href="flushometer-valve-instructions.htm">Flushometer Valve Instructions</a></li>
      <li><a href="contact-waterlogix.htm">Contact Waterlogix</a></li>
      
      </ul>
    </div><!--mainNav-->
    
    </div><!--wrapper-->

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The floats need to be "cleared" - the action you are seeing is the normal float behaviour. See Paul's CSS FAQ sticky post at the top of this forum for float clearing techniques.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I found the solution in the CSS FAQ thread.


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
  •