Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts

    RWD background color disappear

    Can anyone tell me why when I add a float:left to my divs the container/main background colors disappear?

    HTML
    Code:
    <body>
    	<div id="container">
        	<div id="main">
                <div id="left">
                
                </div>
                
                <div id="center">
                
                </div>
                
                <div id="right">
                
                </div>
        	</div>
    	</div>
    </body>
    CSS
    Code:
    * {
    	margin: 0 auto;
    }
    
    body {
    	background-color: #000;
    }
    
    div#container {
    	margin: 0.625em auto;
    	width: 95%;	/* 960px */
    	background-color: rgb(51,51,51);
    }
    
    div#main {
    	width: 93.75%;		/* 900px / 960px */
    	background-color: rgb(59,59,59);
    }
    
    div#left, div#center, div#right {
    	float: left;
    	height: 12.5em;
    	width: 32.22222222222222%;		/* 290px / 900px */
    	margin: 0 1.11111111111111% 0 0; 	/* 10px / 900px */
    	background-color: rgb(0,102,204);
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 630 Times in 629 Posts
    float is a positional command just like position:absolute. It pulls your div out of the natural flow of things. In this case out of the container and main divs, they no longer have a height and so disappear. Try this to see whats happening:

    PHP Code:
    div#left{
        
    height12.5em;
        
    width32.22222222222222%;        /* 290px / 900px */
        
    margin0 1.111111111111110 0;     /* 10px / 900px */
        
    background-colorrgb(0,102,204);
        
    borderpink solid 1px;
    }
    div#center, div#right {
        
    floatleft;
        
    height12.5em;
        
    width32.22222222222222%;        /* 290px / 900px */
        
    margin0 1.111111111111110 0;     /* 10px / 900px */
        
    background-colorrgb(0,102,204);

    Your left div stays in normal position.

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,537
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Google "clearfix". As mentioned, when you float an element, it's parent no longer counts it towards its own height/width. By clearing the content, you can force the height/width back, but clearing can sometimes cause problems. Clearfix is a CSS class you can apply to the parent that uses psudoclasses to generate the content you need without having to worry about having a clear in there all the time and screwing up other material.

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Keleth View Post
    Google "clearfix". As mentioned, when you float an element, it's parent no longer counts it towards its own height/width. By clearing the content, you can force the height/width back, but clearing can sometimes cause problems. Clearfix is a CSS class you can apply to the parent that uses psudoclasses to generate the content you need without having to worry about having a clear in there all the time and screwing up other material.
    Ahh that's right, I forgot.

    It worked when I assigned it to a new div after main. Thanks.
    Last edited by Vytfla; 07-27-2012 at 12:58 AM.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    float is a positional command just like position:absolute. It pulls your div out of the natural flow of things. In this case out of the container and main divs, they no longer have a height and so disappear. Try this to see whats happening:

    PHP Code:
    div#left{
        
    height12.5em;
        
    width32.22222222222222%;        /* 290px / 900px */
        
    margin0 1.111111111111110 0;     /* 10px / 900px */
        
    background-colorrgb(0,102,204);
        
    borderpink solid 1px;
    }
    div#center, div#right {
        
    floatleft;
        
    height12.5em;
        
    width32.22222222222222%;        /* 290px / 900px */
        
    margin0 1.111111111111110 0;     /* 10px / 900px */
        
    background-colorrgb(0,102,204);

    Your left div stays in normal position.
    With this way it seems that since left isn't floated, center and right go to the next line.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by Keleth View Post
    Google "clearfix". As mentioned, when you float an element, it's parent no longer counts it towards its own height/width. By clearing the content, you can force the height/width back, but clearing can sometimes cause problems. Clearfix is a CSS class you can apply to the parent that uses psudoclasses to generate the content you need without having to worry about having a clear in there all the time and screwing up other material.
    A more modern fix would be to simply use overflow: auto on the #main element.

    Quote Originally Posted by Vytfla View Post
    With this way it seems that since left isn't floated, center and right go to the next line.
    If you want flush top alignment for all of these elements, then the floating elements need to appear first in the source code.

    Based on your ID names, presumably, you'll get the layout you want if you float the #left element to the left, the #right element to the right, and make sure those two elements occur before the (non-floating) #center element in the source code. To preserve left and right margins on #center, you will need to add the widths of the #left and #right elements to the left and right margins of #center, respectively.

    If you expect the #left and #right elements to at any time have more content than the #center element, then make sure you apply overflow: auto to #main to prevent the two floating elements from overflowing the bottom of #main.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Vytfla (07-29-2012)

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Quote Originally Posted by Sunfighter
    float is a positional command just like position:absolute. It pulls your div out of the natural flow of things. In this case out of the container and main divs, they no longer have a height and so disappear. Try this to see whats happening:

    PHP Code:
    div#left{
    height: 12.5em;
    width: 32.22222222222222%; /* 290px / 900px */
    margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
    background-color: rgb(0,102,204);
    border: pink solid 1px;
    }
    div#center, div#right {
    float: left;
    height: 12.5em;
    width: 32.22222222222222%; /* 290px / 900px */
    margin: 0 1.11111111111111% 0 0; /* 10px / 900px */
    background-color: rgb(0,102,204);
    Quote Originally Posted by Vytfla View Post
    With this way it seems that since left isn't floated, center and right go to the next line.
    Yes, that's what I said and what the css was trying to show. It was in response to your qustion:
    Quote Originally Posted by Vytfla View Post
    Can anyone tell me why when I add a float:left to my divs the container/main background colors disappear?
    You never asked to keep the three divs inside your #main, so I never told you how. Arbitrator gave you the correct way of doing this.

  • #8
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    A more modern fix would be to simply use overflow: auto on the #main element.

    If you want flush top alignment for all of these elements, then the floating elements need to appear first in the source code.

    Based on your ID names, presumably, you'll get the layout you want if you float the #left element to the left, the #right element to the right, and make sure those two elements occur before the (non-floating) #center element in the source code. To preserve left and right margins on #center, you will need to add the widths of the #left and #right elements to the left and right margins of #center, respectively.

    If you expect the #left and #right elements to at any time have more content than the #center element, then make sure you apply overflow: auto to #main to prevent the two floating elements from overflowing the bottom of #main.
    Awesome, thanks. Overflow worked; gonna try and figure out the second part now


  •  

    Posting Permissions

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