Fluid Content and Fixed Width Sidebar Without Tables

Discussion in 'Web Design, HTML And CSS' started by shabbir, Nov 13, 2013.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    With tables you can always have a td that takes up all the space left over from a fixed width TD. So for example a right sidebar fixed with table design would be something like this.

    HTML:
    <table width="100%">
    	<tr>
    		<td>Content</td>
    		<td width="200">Sidebar</td>
    	</tr>
    </table>
    Now if we want to move to a table-less design, we have few options. You can check out the working sample of all the options here.

    Option 1: Fixed Width Content



    Make the content as fixed width. The div based code looks something like this
    HTML:
    <div class="main">
    	<div class="content">
    		Content 
    	</div>
    	<div class="sidebar">
    		Sidebar Content
    	</div>
    </div>
    
    And the CSS.
    HTML:
    .content
    { 
      width: 800px;
      float:left;
    }
    
    .sidebar
    {
      float: left;
      width: 220px;
    }
    

    Option 2: Fluid Width Content and Sidebar



    You can always opt for dynamic size content and sidebar and specify width in % terms which makes the above CSS code to change as follows.

    HTML:
    .content
    { 
      width: 80%;
      float:left;
    }
    
    .sidebar
    {
      float: left;
      width: 20%;
    }
    
    Still you don't get the same output as the table based design which is fixed width sidebar and fluid content.

    Option 3: Fluid Content and Fixed Width Sidebar



    In this scenario the html is slightly different in layout. The structure of the HTML should look like
    HTML:
    <div class="main">
    	<div class="content">
    		Content 
    	</div>
    </div>
    <div class="sidebar">
    	Sidebar Content
    </div>
    
    The sidebar becomes sibling to the main div and not to the content DIV. CSS is as follows.
    HTML:
    .main {
      float: right;
      margin-left: -220px;
      width: 100%;
    }
    
    .content {
      margin-left: 220px;
    }
    
    .sidebar {
      float: left;
      width: 220px;
    }
    
    If you want your sidebar on the right side then it should be
    HTML:
    .main {
      float: left;
      margin-right: -220px;
      width: 100%;
    }
    
    .content {
      margin-right: 220px;
    }
    
    .sidebar {
      float: right;
      width: 220px;
    }
    
    i.e. All the left changes to right and vice versa.

    How it actually Works



    Main DIV takes 100% of the width and with negative margin, there is a void created after the main DIV (Check out Guide to Negative Margins at Smashing Magazine) where the sidebar fits into. The content div is applied the same value of positive margin just to make sure there is no overlap of content and sidebar.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice