SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    content background color

    I'm trying to apply a background color to the content block of a page, but it is not working. I've included the CSS and HTML below. Any thoughts why?

    Code CSS:
    body
    {
    	background-color: #ffffd1;
    	font-family: arial, helvetica, sans-serif;
    	font-size: 10pt;
    	color: #576729;
    }
    #wrapper
    {
    	width: 700px;
    	margin: 0 auto;
    	padding: 0;
    	border: none;
    }
    #container1
    {
    	background-color: #bdc79a;
    	width: 640px;
    	margin: 0 auto;
    	padding: 0;
    	border: none;
    }
    #content_left
    {
    	font-weight: bold;
    	width: auto;
    	padding: 5px;
    	float: left;
    }
    .text_center
    {
    	text-align: center;
    }

    Code HTML4Strict:
    <div id="wrapper">
    	<div id="container1">
    		<div id="content_left" class="text_center">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Donec a libero aliquet lorem sodales ornare. Cras sed accumsan neque.
    Vestibulum varius rhoncus turpis, vitae lacinia arcu rutrum ac. Vivamus sed
    massa non nunc dapibus vehicula ut sit amet urna.</p>
    		</div>
    	</div>
    </div>

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by spiderling View Post
    I'm trying to apply a background color to the content block of a page, but it is not working. I've included the CSS and HTML below. Any thoughts why?
    The only content of #containerl is floated. That means it is taken out of the document flow when laying out the elements. So, in terms of layout, #containerl has no content, and empty elements have no height.

    The two easy ways round this are:
    1. Float #containerl
    2. Put overflow:hidden; on #containerl

    Either of these methods will "enclose the float", so that #containerl will expand to go around (enclose) the whole of #content_left, and you'll see the background colour.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stevie D!

    Just starting to learn and trying to use CSS rather than tables in my designs, which is proving to be a little challenging.


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
  •