PDA

View Full Version : Sidebars


LawWebServices
11-15-2010, 06:47 PM
This is possibly an easy question but I am very new to dreamweaver and web design.
I created a site with a header, 2 sidebars with content in between, and a footer. Is there any way to stick the sidebars to the footer so that whent he content expands, the side bars will expand as well.


The site I am referring to is Injury Alliance (http://www.injuryalliance.com).


Brad

Ricky55
11-15-2010, 08:23 PM
Yes just make the height of the side bar(s) 100% and as long as they are in a containing element they will stretch to fit.

See ruff example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

div#container {
width: 600px;
height: auto;
background: silver;
position: relative;
}

div#sideBar {
width: 200px;
height: 100%;
background: red;
position: absolute;
left: 0;
top: 0;
}

</style>


</head>

<body>

<div id="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div id="sideBar">
I am a side bar
</div>
</div>
</body>
</html>

LawWebServices
11-15-2010, 08:31 PM
Okay, I tried changing the height to 100% and it just extended the sidebar until the content in the sidebar ended, not to the end of the main content. Any further suggestions?

Ricky55
11-15-2010, 09:48 PM
Works for me mate. Your file is a mess to be honest. Get your styles in an external style sheet for starters.

You also don't need to specify styles for IE5.

If you make your .thrColFixHdr #container longer say for example 2000px then make .thrColFixHdr #sidebar2 height 100% then it does stretch to fill the space.

When ever you specify 100% either as a width or a height the element will always stretch to fit its container. If there is no container then it will fit the page. Trust me this is a fact.