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 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    59
    Thanks
    2
    Thanked 1 Time in 1 Post

    Question how would i do this?

    i want to make a page that looks like this
    i know how to go about making the divs but how exactly do i get the space in between the divs while there within a container?

    an example of page that i found similar to my image is this website

    Drop Dead Clothing

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    There would be many ways to do it. You could absolute positioning or float, etc.

    Here's one example:
    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=utf-8" />
    <title>Untitled Document</title>
    </head>
    <style type="text/css">
    body {
    	background:#000;
    }
    #container {
    	width:800px;
    	margin:0 auto;
    }
    #header {
    	width:800px;
    	height:100px;
    	background:#FFF;
    }
    #sidenav {
    	width:200px;
    	float:left;
    	height:500px;
    	background:#FFF;
    	margin-top:20px;
    }
    #maincontent {
    	float:right;
    	height:500px;
    	width:500px;
    	background:#FFF;
    	margin-top:20px;
    }
    </style>
    <body>
    <div id="container">
      <div id="header">
        <p>Header</p>
      </div>
      <div id="sidenav">
        <p>sidenav</p>
      </div>
      <div id="maincontent">
        <p>main content</p>
      </div>
    </div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For a design like that, I'd probably cheap out and use tables... but I'm lazy like that :P. I'd go with something along the lines of:

    Code:
    <br><br><table align="center" border="0" width="80%">
    <tr>
    <td align="center" colspan="3">header image or text or whatever, across the top</td></tr>
    <td colspan="3" height="30"></td></tr>
    <tr>
    <td align="center" width="10%">Sidebar.<br>
    Extend<br>
    downwards<br>
    however<br>
    you want</td>
    <td width="3%"></td>
    <td align="center" width="87%">Main page thing</td></tr></table>
    Again, there's probably about a million ways better to do this, but this is the first one that came to mind for me. And of course, the widths can be made a solid, unchanging number for everything there, or adjusted as needed. Course, it all depends on what you're using it for, too.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    never use tables lol crazy bugger
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like I said... lazy and cheaping out :P

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Quote Originally Posted by Kabuthunk View Post
    Like I said... lazy and cheaping out :P
    Never use tables for layout. See "Why tables for layout is stupid?" and some good CSS based layouts at http://www.bonrouge.com/2c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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