2 column fluid layout

Discussion in 'CSS' started by Ruriko, Apr 1, 2009.

0
  1. #1
    Ruriko, Apr 1, 2009 IP
  2. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This can be a basic starting point, but then you have to polish it further to suit your needs :)

    <div id="out">      <!--  Outermost Block -->
  
  <h1 id="header">Header</h1>     <!--  / Header  -->
  
  <ul id="menu">
    <li><a href="#">Menu Link 1</a></li>
    <li><a href="#">Menu Link 2</a></li>
    <li><a href="#">Menu Link 3</a></li>
  </ul>     <!--  / Menu Navigation Ends  -->
  
  <div id="content" style="width:70%; float:left; ">
    Content Goes here. Its 70% width and floated LEFT.
  </div>      <!--  / Content Ends  -->
  
  <div id="sidebar" style="width:28%; float:right;">
    Sidebar.  Its 28% width and floated RIGHT so that we have 2% space in the middle automatically, no need of 'margin' property.
  </div>      <!--  / Sidebar Ends  -->  
  
  <h6 id="footer" style="clear"both;">
    Footer has clear:both for clearing floats on content and sidebars.
  </h6>     <!--  / Footer Ends -->
  
</div>      <!--  / Outermost Block Ends  -->
    HTML:
     
    markupdude, Apr 2, 2009 IP