3 column, fixed width, centered... using positioning?

Discussion in 'HTML & Website Design' started by jordanthegreat, May 23, 2008.

0
  1. #1
    Hey guys.

    Is it possible to make a 3 column fixed width centred layout using positioning? If so, how do I do it?

    Currently I use floats for this kind of layout but this means I cannot order the code in any way I want like positioning allows.

    Thanks for your help,
    jordanthegreat
     
    jordanthegreat, May 23, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Why would you not be able to order the source using floats?

    cheers,

    agry
     
    kk5st, May 23, 2008 IP
  3. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #3
    well if i do:
    
#left {
float: left;
width: 200px;
}

#center {
float: left;
width: 400px;
}

#right {
float: left;
width: 300px;
}
    Code (markup):
    wouldn't i have to order my div's left then center then right? otherwise it won't show the way I want?

    unless you know another method. please share it if you do.
     
    jordanthegreat, May 23, 2008 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    There's no rule that says you can't group things a bit differently. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <title></title>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/
#wrapper {
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
    }

#sub-wrap {
    float: left;
    width: 600px;
    }

#content {
    background-color: #fee;
    float: right;
    padding: 0 5px;
    width: 390px;
    }

.sidebar {
    background-color: #efe;
    overflow: hidden;
    padding: 0 5px;
    }

  /*]]>*/
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="sub-wrap">
      <div id="content">
        <h1>main content</h1>
      </div>

      <div class="sidebar">
        <h2>left sidebar</h2>
      </div>
    </div><!-- end sub-wrap -->

    <div class="sidebar">
      <h2>right sidebar</h2>
    </div>
  </div><!-- end wrapper -->
</body>
</html>
    Code (markup):
    If you don't understand the use of overflow and zoom, ask.

    cheers,

    gary
     
    kk5st, May 23, 2008 IP
  5. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Haha. Ok that is a smarter approach. Thanks for that. But yea why do you use overflow:hidden?

    shouldn't you want your content to stretch the div or does this assume that main content will always be longer? I dunno, i rarely play with overflow.
     
    jordanthegreat, May 23, 2008 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    {overflow:hidden;} creates a new block formatting context. Its purpose here is to cause the container to lie beside the float. Since there is no height set, it's still 'auto' and expands as required. Being its own context, it won't wrap under the float should it be longer. That's its use in the sidebars. In the wrapper and sub wrap, it ensures that the float elements are contained.

    The width and zoom properties trigger hasLayout in IE, which is MSFT's buggy version of the block formatting context. See http://www.satzansatz.de/cssd/onhavinglayout.html

    cheers,

    gary
     
    kk5st, May 23, 2008 IP