Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Fluid Content and Fixed Width Sidebar Without Tables (http://www.go4expert.com/articles/fluid-content-fixed-width-sidebar-tables-t29901/)

shabbir 13Nov2013 15:51

Fluid Content and Fixed Width Sidebar Without Tables
 
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 Code:

<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 Code:

<div class="main">
        <div class="content">
                Content
        </div>
        <div class="sidebar">
                Sidebar Content
        </div>
</div>

And the CSS.
HTML Code:

.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 Code:

.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 Code:

<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 Code:

.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 Code:

.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.


All times are GMT +5.5. The time now is 20:48.