De-mystifying full screen fluid designs with fixed width sidebars.


Layering of content has been available for years. Using CSS non default positioning it is possible to place a layer of content on top of another layer of content. The top left position for a absolute element would be the first parent that has its position set to absolute or relative. So a quick and simple method of creating a fixed sidebar would be to create a parent with a margin or border with its position set to relative and layer the absolute block into the left or right padding or margin space.

One aspect of absolute positioned content is that it does not create scroll bars when it is positioned off of the used area of the screen. An absolute positioned sidebar in a relative positioned parent only works if the parent will always be taller than the sidebar. In many situations that can easily be created. Relative positioned content works a bit differently in that is uses screen space but can be moved out of its screen space causing it to layer or overlay content next to it. Content can spill over the side of a relative positioned element on top of other content as well.

If one must design a page where the sidebar is the longest element than a wrapper can be used with a relative positioned block. Create a parent with padding for the sidebar. Float a wrapper block to the side with a width on 1 pixel, (note this 1 pixel element will become a 1 pixel border next to the padding declared. A relative positioned block can now be dropped into the wrapper with the width of the padding relocated on top of the padding. 

Another alternative to layer content is to adjust the left margin of the content. This method is most common because it does not require the use of a wrapper block.

With CSS3 fluid and fixed with elements become easier to work with. The width of an element can be set to 100%-300px leaving 300 pixels for material that can be placed on the side. Until it is implemented the secret mixing fluid with fixed with is layering of one sort or another.

 

<div style=”width:auto #default for most blocks;padding-left:150px;background:silver”>
<div style=”float:left;width:1px;height:auto”>
<div style=”position:relative;width:145px;left:-150px”>
This sidebar will activate the scrollbar
</div> <!– end sidebar –>
</div> <!– end sidebar wrapper –>
This is textbook layering but adjusted to take horizontal screen space.
<div style=”clear:left”> <!– this pulls down the background of the parent divide to the end of the sidebar divide –></div>
</div>

 

 

 

<div style=”width:auto;padding-left:150px;background:silver”>
<div style=”float:left;margin-left:-150px;width:145px;”>
This sidebar layers on top of the padding of the parent,
but does not use the CSS position property.
</div> <!– end sidebar –>
This is a layering method that does not use the CSS position. While it is rarely used
for layering it is the most common for sidebars.
<div style=”clear:left”> <!– this pulls down the background of the parent divide to the end of the sidebar divide –></div>
</div>

 

 

 

<div style=”width:auto;padding-left:150px;position:relative;”>
<div style=”position:absolute;top:0px;left:0px;width:145px;”>
This sidebar may fail to activate scroll bars, does not pull down parent backgrounds, can also
overlay on top of footers. Because it does not cause the parent element to expand.
</div> <!– end sidebar –>
This is textbook layering using position relative and absolute css, but it is problematic
if used to create sidebars. The secret of fluid designs
with fixed sidebars is a layering method of one form or another.

</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: