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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV layout advice

    Hey,

    I'm currently trying to create a new layout for one of my sites. I'm a bit stuck as to how i can create a layout shown below using DIV's. I also wish for the DIV's to have a fixed width.

    I'm familiar with CSS but not too hot on positioning/floating etc. Any adivce on how I could achieve such a layout with DIV's would be greatly appreciated.


  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Try floated layout.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head> 
    <title>CF 115046</title>
    <style type="text/css">
    body {font-family: sans-serif;}
    #wrap {
    	width: 800px;
    	height: 600px;
    	margin: 0 auto;
    }
    #left, #right {
    	width: 400px;
    	float: left;
    }
    .section {
    	background: black;
    	color: white;
    	margin: 5px; 
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="left">
    		 <div class="section">Blah!</div>
    		 <div class="section">Blah!</div>
    </div>
    <div id="right">
    		 <div class="section">Blah!</div>
    </div>
    </div>
    </body>
    </html>
    Note: This is just an example. Find better values for the id's and classes corresponding to the meaning.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help, its exactly what I was after

    Although does anyone know how I can get rid of the white bits (indicated by the red bars) when I use <h1> or <p> tags within the divs?


  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by shimah View Post
    Although does anyone know how I can get rid of the white bits (indicated by the red bars) when I use <h1> or <p> tags within the divs?
    That is due to margin collapsing. Maybe it seems weird that the top and bottom margin of the h1 and p element can 'penetrate' through the parent div, but that is in fact what the CSS specification says should happen when the parent element has no top/bottom padding or border.

    To solve your problem, you could eliminate those margins:
    Code:
    p, h1 {
      margin: 0;
    }

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much. I would never of thought of it being the H1 margins!

    Thanks again.


  •  

    Posting Permissions

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