Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Multi-Column CSS Layout

    Hi everyone

    I have a 3-column CSS layout with a header and a footer. Now I need a block which sits over the top of the first 2 columns — that are left and the middle columns — but does not cross over the right column, which is the 3rd column.

    Similarly, I also need a block which stays under the first two columns but does not run over the last column. Below is my code of 3 columns including header and footer.

    Since I am not well versed in CSS, I need your help to achieve the desired layout. Thanx in advance

    Code:
    #header {
        background-color: #00bff3;
        float: left;
        height: 100px;
        width: 980px;
        margin-bottom: 20px;
    	padding-left: 20px;
    }
    
    
    #content {
        float: left;
        background: #fff;
        width: 320px;
        margin-left: 17px;
        margin-bottom: 20px;
    }
    
    #leftcolumn {
        width: 320px;
        float: left;
        margin-bottom: 20px;
    }
    
    #rightcolumn {
        width: 320px;
        float: left;
        margin-bottom: 20px;
    }
    
    #footer { 
        margin-left: 15px;
        height: 100px;
        width: 980px;
        background: #eeeeee;
        clear: both;
    }

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Portland, OR
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Free CSS Tutorials and Resources

    Hey Maxal,

    You may want to check out a site like CSSReset.com or something. If you aren't really a CSS guy, then they can probably help out with some easy to follow video tutorials. It's all FREE! It's been really helpful for me.

    Good luck!

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's what I came up for you. Hopefully this helps:

    Code:
    <!doctype html>
    <html>
    <head>
    
    <style type="text/css">
    #header {
      border: black 5px solid;
      background-color: #00bff3;
      float: left;
      height: 100px;
      width: 980px;
      margin-bottom: 20px;
      clear: both;
    }
    
    
    #leftcolumn {
      border: blue 5px solid;
      width: 640px;
      float: left;
      margin-bottom: 20px;
      height: 600px;
    }
    
    #rightcolumn {
      border: blue 5px solid;
      width: 320px;
      height: 600px;
      float: left;
      margin-bottom: 20px;
    }
    
    #footer {
      float: left; 
      border: black 5px solid;
      height: 100px;
      width: 980px;
      background: #eeeeee;
      clear: both;
    }
    
    #spancolumntop {
      float: left;
      border: black 5px solid;
      height: 200px;
      width: 630px;
      clear: both;
    }
    
    #lefthalfcolumn {
      float: left;
      border: black 5px solid;
      height: 200px;
      width: 310px;
    }
    
    #righthalfcolumn {
      float: left;
      border: black 5px solid;
      height: 200px;
      width: 310px;
    }
    
    #spancolumnbottom {
      float: left;
      border: black 5px solid;
      height: 170px;
      width: 630px;
      clear: both;
    }
    
    </style>
    
    </head>
    <body>
      <div id="header">
        <p>header</p>
      </div>
      <div id="leftcolumn">
        <div id="spancolumntop">
          <p>spancolumntop</p>
        </div>
        <div id="lefthalfcolumn">
          <p>lefthalfcolumn</p>
        </div>
        <div id="righthalfcolumn">
          <p>righthalfcolumn</p>
        </div>
        <div id="spancolumnbottom">
          <p>spancolumnbottom</p>
        </div>
      </div>
      <div id="rightcolumn">
        <p>rightcolumn</p>
      </div>
      <div id="footer">
        <p>footer</p>
      </div>
    </body>
    </html>

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow........^ this works like a charm
    Thanks a lot toddmanning


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •