SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    design website with DIVs

    Dear, I need your help for the next:

    I want keep my website middle of the screen with equal space left and right

    The width of the site is 860px (container) and the height is up to the content

    The container has 5 DIVs as follow:

    container: width:860px; heigth auto
    header: width:860px; heigth 150px
    left:width:140px; heigth auto
    middle:width:560px; heigth auto
    right:width:140px; heigth auto
    footer:width:860px; heigth 20px;

    How can do this with css ?

    Thanks in advance,

  2. #2
    SitePoint Addict joaquin_win's Avatar
    Join Date
    Jul 2005
    Location
    Venezuela
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi faamugol, if you give the container div a css rule with margin:auto it should center everything (assuming that everything is inside that div).

    Sitepoint has a great tutorial on css layouts: http://www.sitepoint.com/article/roc...d-css-layouts/

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my code but I don't get it centered.

    BODY
    {
    FONT-SIZE: 13px;
    BACKGROUND: #B2B2B2 url(back.png) repeat-x;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING: 0px;
    FONT-FAMILY: Verdana;
    }

    #contenair
    {
    MARGIN: 2px auto 0px;
    WIDTH: 860px;
    POSITION: relative;
    BACKGROUND-COLOR: #B2B2B2;
    }

    #header
    {
    HEIGHT: 150px;
    WIDTH: 860px;
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 1px;
    BACKGROUND: #dddddd;
    }

    #menuwelcome
    {
    WIDTH: 860px;
    height:20px;
    BACKGROUND: #FF9934;
    position:absolute;
    }

    #center
    {
    WIDTH: 560px;
    MARGIN-BOTTOM: 5px;
    BACKGROUND: #fffbbb;
    float:left;
    }

    #left
    {
    MARGIN-BOTTOM: 5px;
    WIDTH: 140px;
    HEIGHT: 140px;
    MARGIN-LEFT: 2px;
    BACKGROUND: #ffffff;
    float:left;
    }

    #right
    {
    MARGIN-BOTTOM: 5px;
    HEIGHT: 250px;
    WIDTH: 160px;
    BACKGROUND: #ffffff;
    float:right;
    }

    #pied
    {
    HEIGHT: 20px;
    WIDTH: 860px;
    BACKGROUND: #FF9933;
    clear:both;
    }

    thanks

  4. #4
    SitePoint Member Gears's Avatar
    Join Date
    Dec 2008
    Location
    New Jersey, USA
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #contenair
    {
    MARGIN: 2px auto 0px;
    WIDTH: 860px;
    POSITION: relative;
    BACKGROUND-COLOR: #B2B2B2;
    }

    That should be:
    Code:
    margin: 2px auto 0px auto;

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2px auto 0px is ok - that means 2px top, 0px bottom and auto both sides.

    What browser(s) are you checking this in, and what doctype do you have?

  6. #6
    SitePoint Member Gears's Avatar
    Join Date
    Dec 2008
    Location
    New Jersey, USA
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    2px auto 0px is ok - that means 2px top, 0px bottom and auto both sides.

    What browser(s) are you checking this in, and what doctype do you have?
    Oh really. I thought it was either "2px auto;" or "2px auto 2px auto;" (2 or 4 terms). Thanks for clearing that up.
    Creative Strategies & Branding
    Visit our Virtual Office! - Follow me on Twitter

    Creative Design, Full Color Printing, Cust. Service Consultancy

  7. #7
    SitePoint Addict antirem's Avatar
    Join Date
    Dec 2008
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in css..
    * {margin:0px;padding:0px;}
    #divname {width:1000px;height:auto;}

    change the width to the respective width ;D

    you can also add {float:left;} to make two divs align next to each other.

  8. #8
    SitePoint Zealot bemmott's Avatar
    Join Date
    Mar 2007
    Location
    NY, USA
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would it be picky of me to point out that container is mispelled in his example of his code?
    Here:
    Code:
    #contenair
    {
    MARGIN: 2px auto 0px;
    WIDTH: 860px;
    POSITION: relative;
    BACKGROUND-COLOR: #B2B2B2;
    }
    Bruce ...

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code. If the height is auto, you don't need to set it. The default value is auto.

    This code is based on document.body.clientWidth = 1004px in IE 6. In FF, a little bit left coz FF does not show scrollbar.

    We will launch a series of layout generators based on parellel design.
    ------------------
    <!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>
    <title>3 Column CSS Layout - parellel design</title>
    <style type='text/css'>
    .header{
    position: relative;
    float: left;
    left: 72px;
    width: 860px;
    height: 150px;
    background-color: #6699cc
    }
    .container{
    position: relative;
    float: left;
    left: 72px;
    width: 860px;
    background-color: #cccccc
    }
    .left{
    position: relative;
    float: left;
    left: 0px;
    width: 140px;
    background-color: #ccccff
    }
    .middle{
    position: relative;
    float: left;
    left: 10px;
    width: 560px;
    background-color: #ccccff
    }
    .right{
    position: relative;
    float: right;
    right: 0px;
    width: 140px;
    background-color: #ccccff
    }
    .footer{
    position: relative;
    float: left;
    left: 72px;
    width: 860px;
    height: 20px;
    background-color: #cfcfcf
    }
    .bottom{
    clear: both;
    width: 100&#37;;
    float: left;
    position: relative;
    background-color: #e7e7de
    }
    body {
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 90%
    width: 100%;
    min-width: 1003px;
    }
    </style>
    </head>
    <body>
    <div class="bottom">
    <div class="header">
    header
    </div>
    <div class="container">
    <div class="left">
    left1
    </div>
    <div class="middle">
    left2
    </div>
    <div class="right">
    right
    </div>
    </div>
    <div class="footer">
    footer
    </div>
    </div>
    </body>
    </HTML>

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the .bottom div for? - the name does not match the purpose. The .container div can do what it says and contain the whole site, and auto side margins will centre the site. The .header does not need to be floated, nor a width set. Neither does the .footer, which has its clear property set to appear below the floats.

    I also question the use of the XHTML transitional doctype - why?

    Try:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>3 Column CSS Layout - parellel design</title>
    <style type='text/css'>
    body {
    	border: 0;
    	padding: 0px;
    	margin: 0px;
    	font-size: 90&#37;
    	background-color: #cccccc;
    }
    .container{
    	width: 860px;
    	margin: 0 auto;
    }
    .header{
    	height: 150px;
    	background-color: #6699cc
    }
    .left{
    	float: left;
    	width: 140px;
    	background-color: #ccccff
    }
    .middle{
    	float: left;
    	width: 560px;
    	background-color: #ccccff;
    	margin-left: 10px;
    }
    .right{
    	float: right;
    	width: 140px;
    	background-color: #ccccff
    }
    .footer{
    	height: 20px;
    	background-color: #cfcfcf;
    	clear: both;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    <div class="container">
    	<div class="header"> header </div>
    	<div class="left"> left1 </div>
    	<div class="middle"> left2 </div>
    	<div class="right"> right </div>
    	<div class="footer"> footer </div>
    </div>
    </body>
    </html>

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .bottom - is used to set background when the layout is the part of the page. Here could set it in body tag.

    The main difference is you use margin and I use left. At the beginning I also used the margin to seperate the columns, but it worked not well in FF in the whole range. (I mean I drag the sliders to change the widths of the columns. ). Will come back if I could re-produce the error.

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the late reply. The main reason is my wireless card run out of money.

    This post let me have an comparison between 2 layout techniques - using left and margin.

    Here's 2 links you could see their differences.

    3 column layout using margin. 3 column layout using left.

    The design using left applies both fixed and liquid layouts. But the design using margin only applies to fixed layout. This is the main difference.

    In fixed layout, you could not set side gutters by using margin-left for the left column in IE 6. In IE 6, the right column of the above link should slide down coz I set side gutters at the beginning.

    margin: 0 auto is a great syntax. It lets the browser to center the layout automatically. But if I set the background-color in containner, different browers display differently.

    Why I use header {float:left}?

    In FF, when you add a <H2> tag in the header and the height of header is not set, the <h2> will come out of the header. Using {float:left} could solve the problem. But I have to set width of the header. It's easier to determine width than height.

    So the design using left is a trouble-free solution. And the design using margin is a concise design but may need more care about the problems.

    I removed the .bottom to avoid confusion. The wrapper div should be able to be placed outside.

  13. #13
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by uringgogo View Post
    In fixed layout, you could not set side gutters by using margin-left for the left column in IE 6.
    This is due to IE6's well-documented doubled float margin bug, which can be cured by setting inline display on the float.

    Quote Originally Posted by uringgogo View Post
    But if I set the background-color in containner, different browers display differently.
    Most likely due to not clearing floats - a container will not naturally surround floated content (except in IE which gets it wrong).

    Quote Originally Posted by uringgogo View Post
    In FF, when you add a <H2> tag in the header and the height of header is not set, the <h2> will come out of the header. Using {float:left} could solve the problem. But I have to set width of the header. It's easier to determine width than height.
    Again, most likely due to floating the <h2> and not clearing that float.

    Quote Originally Posted by uringgogo View Post
    So the design using left is a trouble-free solution. And the design using margin is a concise design but may need more care about the problems.
    Using "left" is relatively shifting the display of the element, but the element still occupies its original space - using this as a general positioning scheme can produce lots of problems later on in the design.

    Floats are very useful, but using more and more floats to overcome perceived problems due to not understanding their use can lead to further complications.


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
  •