SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid content area and fixed width sidebar with cleared footer

    I'm creating a stylesheet for my layout below to emulate the layout of Wikipedia.com, with the sidebar floated to the left of the content.

    However, unless I fix the width of the content area, or absolutely position the sidebar (and assign a margin-left wide enough to clear the sidebar width), I can't seem to find a solution in css alone. The latter option has positioning issues with clearing the footer when the sidebar height exceeds the content height.

    Any ideas on how I could create the 2 column effect with this layout (and still clear the footer element)? I can't change the markup or order of layout elements, I have to do it all with css.


    HTML Code:
    <div class="wrapper">
    	<div class="header">Header are goes here with site title and tagline.</div>
    	<div class="main">
    		<div class="content">
    			<h1 class="posttitle">Home</h1>
    			<div class="entry">
    				<p>Welcome to our website. This is the home page content.</p> 
    			</div>
    		</div>
    		<div class="sidebar">Sidebar content will go here. This element should be floated to the left of the content div and width set to 180px</div>	
    		<div class="clear">&nbsp;</div>
    	</div>
    </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,270
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could do it like this:

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .main {
        width:100%;
        overflow:hidden;
        clear:both;
    }
    .content {
        float:right;
        width:100%;
        margin-left:-180px;
    }
    .content h1, .content .entry {
        margin-left:180px;
        zoom:1.0;
        overflow:hidden;
    }
    .sidebar {
        float:left;
        width:180px;
        background:red;
        height:400px;/* just for testing */
    }
    .clear {
        clear:both;
        background:green;
        width:100%;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="header">Header are goes here with site title and tagline.</div>
        <div class="main">
            <div class="content">
                <h1 class="posttitle">Home</h1>
                <div class="entry">
                    <p>Welcome to our website. This is the home page content.</p>
                </div>
            </div>
            <div class="sidebar">Sidebar content will go here. This element should be floated to the left of the content div and width set to 180px</div>
            <div class="clear">test cleared element</div>
        </div>
    </div>
    </body>
    </html>
    The content is floated right at 100% width with a negative margin on the left side that allows the following floated sidebar to rise up into the vacuum caused by the negative margin. Then the inner content is kept clear of the vacuum by a positive margin.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Saaa-Weeeeet!

    I'd never have guessed about the negative left margin. That's a nice one :-)

    Thanks Paul!


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
  •