SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout trouble...

    hello i've got a css layout but would like to insert a wrapper/ container to be able to have a border and a background to my site
    here is the code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #pageHeader {
      position: absolute;
      top: 0;
      left: 100px;
      width: 78%;
      /*padding:0 100px;*/
      background:#F00;
    }
    
    #pageContent {
      float: left;
      width: 55.5%;
      background:#c0c0c0;
      padding:10px;
    }
    
    #pageColumnLeft {
      float: right;
      width: 20%;
      padding-left: 6px;
      background:#c0c0c0;
    }
    
    #pageBlockLeft {
      float: left;
      width: 78%;
      margin: 75px 0 10px 0;
      padding:0 100px;
      /*background:#FF0000;*/
    }
    
    #pageColumnRight {
      float: right;
      width: 20%;
      margin: 0px 5px 10px 0;
      background:#c0c0c0;
    }
    
    #pageFooter {
      clear: both;
      text-align: center;
      padding: 5px;
      width:78%;
      margin:100px;
      background:#F00;
    }
    </style>
    
    </head>
    
    <body>
    
    <div id="pageBlockLeft"> page block left
     
      <div id="pageContent"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
      
      <div id="pageColumnLeft"> left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column </div>
    			
      <div id="pageColumnRight"> right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  </div>
    
    </div>
    
    <div id="pageHeader">  header </div>
    
    <div id="pageFooter"> footer </div>
    
    </body>
    </html>
    hope someone would help please!
    Many thanks.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Mixing those px and &#37; units will never work..

    Here's my attempt at it : (only tested in FF2 ) The only problem I can see is that because the main content area is floated right it's shrink-wrapped and aligned right. Note: The 3 column template stickied at the top of the forum is much much better.. - I'm not huge on content first layouts, actually this is my first one.
    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	width: 80%;
    	margin: 0 auto;
    	background: #CC0;
    }
    #header {
      background: #CF0;
    }
    #innerwrapper { float: left; margin-right: 200px; background: #FF9900}
    #middle {
    float: right;
    margin-left: 200px;
    }
    #left {
      float: left;
      margin-right: -200px;
      width: 200px;
      background: #FFCC00;
    }
    #right {
      float: right;
      width: 200px;
    margin-left: -200px;
      background: #FF6600;
    }
    #footer {
      clear: both;
      text-align: center;
      padding: 5px;
      background:#CF0;
    }
    
    
    
    
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <p>header</p>
      </div>
      <div id="innerwrapper">
        <div id="middle">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque scelerisque. Nam in augue vitae magna fringilla congue. In hac habitasse platea dictumst. Nunc vestibulum. Maecenas sodales commodo neque. Pellentesque condimentum viverra odio. Nulla facilisi. Nullam bibendum ante sit amet ligula. Duis vel velit. Etiam velit. Maecenas ut lacus. Integer lacus. Mauris aliquam, dolor in interdum accumsan, tellus odio tempus leo, ac blandit enim quam at lorem. Mauris egestas turpis sit amet elit. Ut commodo erat ac sem.
    
    Proin nec eros a lectus pulvinar consequat. Mauris dapibus dui sit amet nulla. Phasellus eu enim sit amet risus eleifend aliquet. Etiam tincidunt. Vivamus sit amet enim. Aenean nulla mauris, luctus quis, ullamcorper in, blandit vitae, sapien. Proin tempus lectus nec lorem. Curabitur vel leo. Vivamus aliquet. Morbi id quam. Aenean vulputate lobortis orci. Aliquam justo. Praesent sed ante. Nulla laoreet nunc at urna. Integer dignissim dignissim magna. Duis ut nisl. Suspendisse eget odio ornare massa scelerisque viverra. Aenean dapibus ipsum. Donec dapibus, magna nec iaculis dictum, lorem orci viverra nunc, et molestie diam eros ut risus. Suspendisse varius, justo in laoreet varius, nisl ligula vulputate dolor, et dictum quam neque ac urna.
    
    Etiam accumsan porttitor dolor. Sed commodo ante porttitor nisl. Phasellus sagittis, purus et blandit sagittis, lorem eros fermentum sem, nec faucibus mauris mi et urna. Donec commodo cursus leo. Integer pellentesque augue quis mi. Mauris imperdiet, nunc ultrices egestas mollis, ligula nibh auctor erat, at tempor quam justo in nibh. Vestibulum erat erat, ornare id, porttitor nec, dapibus ornare, leo. Nunc eleifend. Ut adipiscing mollis est. Morbi bibendum pellentesque lectus.
    
    Proin ultricies enim. Integer in tortor. Mauris nec turpis. Vestibulum est. Sed accumsan nisl eget elit. Curabitur diam felis, sagittis sed, auctor ac, euismod vitae, tellus. Curabitur dapibus, tellus eu hendrerit tempus, purus velit tempor eros, accumsan vestibulum ligula sapien et libero. Vivamus pretium libero sit amet felis. Aenean libero lectus, vestibulum et, pulvinar ac, molestie ultrices, diam. Nulla a diam id risus commodo porta. Phasellus nonummy tincidunt sem. Proin luctus. Ut quis nulla in nibh malesuada accumsan. In justo arcu, iaculis id, lacinia sit amet, elementum in, dui. Sed lacinia malesuada pede.
    
    Proin mauris. Integer condimentum mattis diam. Duis mauris mi, pretium lacinia, dapibus nec, sagittis nec, arcu. Integer sed ipsum eget libero vehicula viverra. Quisque vitae est. Pellentesque eros libero, aliquam vitae, egestas nec, iaculis at, diam. Suspendisse volutpat faucibus ipsum. Nunc mollis. Ut tincidunt, lectus sed interdum euismod, justo purus rhoncus nibh, eget tempus velit tellus ac justo. Suspendisse est purus, vehicula a, blandit non, luctus quis, nisl. Donec scelerisque ullamcorper diam. Donec aliquet auctor leo. Sed molestie. Vivamus ligula mauris, laoreet nec, nonummy ut, pulvinar vitae, odio. Duis quis mi. Donec id lectus.
    </p>
        </div>
        <div id="left"> left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column left column	</div>
      </div>
      <div id="right"> right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column  right column </div>
      <div id="footer"> footer </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Mark, i want to keep the shape of the layout as it is i just want to insert a wrapper into it, allowing me to create a site border.
    many thanks again.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    You can't just simply add a wrapper to your design.

    The key with those sort of designs is to start with a wrapper and make it a certain width, then all the divisions inside the wrapper can be the full width of the wrapper.
    Trust me you are wanting to look at another layout because that one has many flaws,

    At a screen res of 900 < the columns break
    The mix of pixels and percentages causes the layout to be unpredictable - you can add inner divs to your columns and put your padding on that so it doesn't effect the width of the column itself (avoid the box model problems)
    Because you are using absolute positioning you can't simply add a wrapper to the design.

    I would suggest having a look through the many 3 column layout ideas on pmob.co.uk and seeing if you can apply those ideas to make your design.


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
  •