SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    canada
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Favour needed - a CSS layout

    I don't really know how to make the 'best' CSS div layouts.

    I wonder if someone could tell me how I would make:
    990 wide - centered
    990x98 header
    790 wide content
    200x450 navigation on right
    200x200 extra on bottom right
    990 wide footer

    with divs
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Here is a basic framework for such a lwayout:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    
    .wrap {width: 990px; margin: 0 auto;}
    
    .head {
    	width: 100%; 
    	height: 98px; /* ideally don't set a height, but let the contents set the height */
    	background: #8a8888;
    }
    
    .main {overflow: hidden;}
    
    .content {width: 690px; float: left;}
    
    .side {width: 200px; float: right;}
    
    .navi {
    	min-height: 400px; /* preferably remove this when content is in */
    	background: #323751;
    }
    
    .extra {
    	min-height: 200px; /* preferably remove this when content is in */
    	background: #e7e7e7;
    }
    
    .foot {
    	background: black;
    	min-height: 20px; /* preferably remove this when content is in */
    }
    
    </style>
    	
    </head>
    
    <body>
    
    <div class="wrap">
    	<div class="head">
    	</div>
    	<div class="main">
    		<div class="main">
    		</div>
    		<div class="side">
    			<div class="navi">
    			</div>
    			<div class="extra">
    			</div>
    		</div>
    	</div>
    	<div class="foot">
    	</div>
    </div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    ralph's post shows the code to create the template you suggested perfectly, but I would still advise you to look into how the different CSS attributes work - before you know it you need to change a little detail and you end up destroying the template

    The main attribute in positioning divs horizontally (next to eachother) is the: CSS Float attribute. A good thing to remember (which you can also see in Ralphs excellent code) is that a div should have a width defined (in pixels, percentage etc.) and that it may float a little different depending on the browser of the customer (IE, Mozilla Firefox, Safari etc.).

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Going on four days since you posted this, so I'll say it for the original poster: thanks, Ralph, you rock.


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
  •