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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Location
    Earth
    Posts
    305
    Thanks
    27
    Thanked 2 Times in 2 Posts

    background color

    I am trying to get my background color to be solid. However this won't work with any of the DOCTYPES out there.

    Does anyone know a work around??


    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">
    
    
    <head>
    <style type="text/css">
    
    
    #wrapperMsg {
    	text-align: left;
    	margin: 0px 0px 0px 50px;
    	padding: 0px;
    	border:0;
    	width: 800px;
      	background: #333333;
    
    }
    
    
    #side-a {
    	float: left;
    	width: 100px;
    
    }
    
    
    #content { 
    	float: left;
    	width: 105px;
    }
    
    #side-b {
    	float: right;
    	width: 500px;
    }
    
    
    </style>
    </head>
    
    <body>
    
    
      <div id='wrapperMsg'>
        <div id='side-a'>Image</div>
        <div id='content'>Name <br> Date </div>
        <div id='side-b'>Title <br> Message</div>
      </div>
    
    </body></html>
    Last edited by harkly; 11-15-2010 at 06:16 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,220
    Thanks
    15
    Thanked 253 Times in 253 Posts
    body {background: #333333;margin: 0 auto}
    will center the page with a dark gray background and no white surround.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's because all the content of #wrapperMsg is floated, hence it has no height and the background colour doesn't show. If you clear the floats at the end of #wrapperMsg by adding overflow:auto to its css, then the div will extend to include the floated content and hence your background will show up.

  • #4
    Regular Coder
    Join Date
    Jun 2010
    Location
    Earth
    Posts
    305
    Thanks
    27
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by SB65 View Post
    It's because all the content of #wrapperMsg is floated, hence it has no height and the background colour doesn't show. If you clear the floats at the end of #wrapperMsg by adding overflow:auto to its css, then the div will extend to include the floated content and hence your background will show up.


    This did it Thanks!

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,220
    Thanks
    15
    Thanked 253 Times in 253 Posts
    SB65's is the one you want for just the div having a background, mine gives it to the whole page.


  •  

    Posting Permissions

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