SitePoint Sponsor

User Tag List

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

    Wikipedia style layout challenge

    I'm trying to emulate the wikipedia.org layout using css. The problem is that with a fluid width layout, I can't get the fixed width sidebar to float to the left of the content area. I'd like the sidebar to be fixed at 200px and the content to be fluid width. I know I can do it by absolutely positioning the sidebar, but I'd prefer not to use abs pos.

    Any help much appreciated. I can't alter the core markup, only the css...

    Core structure is:

    HTML Code:
    <body>
    	<div class="wrapper">
    
    		<div class="header">header area here. Logo, main menu and search widget will go here</div>
    
    		<a id="jump"></a>
    		
    		<div class="main">
    
    			<div class="content">
    				<div class="entry"><p>This is the main content</p></div>
    			</div>
    
    			<div class="sidebar">This is the sidebar. Need this fixed width and floated to the left of the main content area</div>
    			
    			<div class="clear">&nbsp;</div>
    
    			<p style="margin-left:15px;"><a href="#jump" class="jumpLink">&uarr; Back to Top</a></p>
    		
    		</div>
    
    		<div class="footer">This is the footer area</div>
    
    	</div>
    </body>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Here is one basic way to do it:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>2 col left fixed</title>
    	
    <style media="all">
    .main {overflow: hidden;}
    .sidebar {float: left; width: 200px;}
    .content {margin-left: 220px;}
    </style>
    	
    </head>
    <body>
    	<div class="wrapper">
    
    		<div class="header">header area here. Logo, main menu and search widget will go here</div>
    
    		<p><a id="jump"></a></p>
    		
    		<div class="main">
    		
    		<div class="sidebar"><p>This is the sidebar. Need this fixed width and floated to the left of the main content area</p></div>
    
    		<div class="content">
    			<div class="entry"><p>This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content This is the main content </p></div>
    		</div>
    
    		<p style="margin-left:15px;"><a href="#jump" class="jumpLink">&uarr; Back to Top</a></p>
    		</div>
    		<div class="footer">This is the footer area</div>
    
    	</div>
    </body>
    
    </html>

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but you reversed the order of the markup!

    The content div must come before the sidebar

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Then position the sidebar absolutely, and give the wrapper position: relative.

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I worked it out without absolute positioning (except for IE7, which had to be abs positioned)...

    Code:
    .header {position:relative;min-height:200px;background:url(logo.png) no-repeat;}
    .siteTitle,.tagline {width:200px;text-align:center;padding-top:120px}
    .tagline {padding-top:10px}
    .main {float:left;margin-left:200px;padding-left:40px;border:1px solid #aad4ff;border-width:1px 0 1px 1px;margin-top:-123px;}
    *+html .main {width:75%;}
    .sidebar {width:199px;margin-left:-240px;margin-top:150px}
    *+html .sidebar {position:absolute;top:80px}
    .content {float:right;margin-left:-200px;width:100%;padding:0 20px}
    .clear,.footer{clear:both;}
    .jumpLink {margin-left:-40px;}
    .footer {margin-left:200px;}


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
  •