CSS variable width div columns
Hello experts.
I have a page layout with a header and two columns under it - 'main' on the left and 'sidebar' on the right. the height of the columns are variable. The sidebar contains a mix of elements such as tables and text sectioned by <div> tags. Somehow when the 'main' column is longer. The 'sidebar' stretches to the same length. How can I change this so that sidebar does not stretch to the same length and fits snuggly around the <div> elements it holds. thanks
I have a page layout with a header and two columns under it - 'main' on the left and 'sidebar' on the right. the height of the columns are variable. The sidebar contains a mix of elements such as tables and text sectioned by <div> tags. Somehow when the 'main' column is longer. The 'sidebar' stretches to the same length. How can I change this so that sidebar does not stretch to the same length and fits snuggly around the <div> elements it holds. thanks
.layout #container {
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
width: 960px;
border: 5px solid #FFFFFF;
}
.layout #header {
padding: 0;
text-align: left;
margin: 0;
}
.layout #main {
float: left;
width: 685px;
padding: 0 10px 0 5px;
}
.layout #sidebar {
margin-left: 700px;
padding-left: 10px;
}
ASKER
thanks, tried that but doesn't seem to work. as soon as I add the 'float' it throws things into disarray I forgot to add that there is a footer underneath it all.
Is it possible for you to upload your page somewhere so i can have a visual?
Or paste your html and css.
Or paste your html and css.
ASKER
hello, think i found the problem, i think it was a <br class="clear-float" /> that I have in there. I'll have to check later on and get back to you. thanks for help so far
That's ok. Let me know if you run into anymore trouble.
ASKER
Hello. I had a look at it again and not the br class that I thought was the problem. I've included the code I'm using. thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFFFFF;
margin: 0;
}
.product #container {
background-color: #FFFFFF;
margin: 0 auto; /* Set left and right margins to auto so that #container is centered. */
padding: 0;
width: 960px;
border: 5px solid #FFFFFF;
}
.product #header {
padding: 0;
text-align: left;
margin: 0;
}
.product #title {
padding: 0px;
margin: 0 0 20px 0;
}
.product #content {
float: left;
width: 685px; /* Total width = 700px. */
padding: 0 10px 0 5px;
}
.product #sidebar {
margin-left: 700px; /* Total width = 960-700-10 = 250px. */
}
.product #footer {
clear: both;
height: 200px;
background-color: #999999;
padding: 0 10px 0 5px;
}
p {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 170%;
margin: 5px 0;
padding: 0;
}
.text_grey {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
.bold {
font-weight: bold;
}
.small {
font-size: 12px;
}
.large {
font-size: 18px;
}
.indent {
margin-left: 20px;
}
.margin {
margin: 5px 0;
}
.no_margin {
margin: 0;
}
.padding {
padding: 5px;
}
.horizontal li {
display: inline;
float: left;
width: 150px;
padding: 3px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
margin: 0;
}
.grey_bkg{
background-color: #999999;
margin: 0;
}
.blue_bkg{
background-color: #99CCFF;
margin: 0;
}
.clear_float {
clear: both;
margin: 0;
padding: 0;
}
.thumbnail {
width: 115px;
float: left;
margin: 5px;
background-color: #999999;
}
.width {
width: 100%;
}
</style>
</head>
<body class="product">
<div id="container">
<div class="header grey_bkg">Logo</div>
<div id="content">
<p>Content.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div id="sidebar">
<div>
<p>Here are some pictures:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div>
<div class="thumbnail">
<p>Image 1</p>
</div>
<div class="thumbnail">
<p>Image 2</p>
</div>
<div class="thumbnail">
<p>Image 3</p>
</div>
<div class="thumbnail">
<p>Image 4</p>
</div>
<div class="thumbnail">
<p>Image 5</p>
</div>
<div class="thumbnail">
<p>Image 6</p>
</div>
</div>
<br class="clear_float" />
<div>
<p>Mpre information here!!!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div>
<p>Mpre information here!!!</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</div>
</body>
</html>SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks. that bit worked, i developed it a bit more and have another unexpected problem when I add coloured headers to the some of the divs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFFFFF;
margin: 0;
}
.product #container {
background-color: #FFFFFF;
margin: 0 auto; /* Set left and right margins to auto so that #container is centered. */
padding: 0;
width: 960px;
border: 5px solid #FFFFFF;
}
.product #header {
padding: 0;
text-align: left;
margin: 0;
}
.product #title {
padding: 0px;
margin: 0 0 20px 0;
}
.product #content {
float: left;
width: 685px; /* Total width = 700px. */
padding: 0 10px 0 5px;
}
.product #sidebar {
margin-left: 700px; /* Total width = 960-700-10 = 250px. */
height:auto
}
.product #footer {
clear: both;
height: 200px;
background-color: #999999;
padding: 0 10px 0 5px;
}
p {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 170%;
margin: 5px 0;
padding: 0;
}
.text_grey {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
.padding {
padding: 5px;
}
.grey_bkg{
background-color: #999999;
margin: 0;
}
.thumbnail {
width: 115px;
float: left;
margin: 5px;
background-color: #999999;
}
.header-blue {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 0 0 5px;
height: 40px;
background-color: #3366FF;
}
.header-red {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 0 0 5px;
height: 40px;
background-color: #FF6699;
}
</style>
</head>
<body class="product">
<div id="container">
<div class="header grey_bkg">Logo</div>
<div id="content">
<p>Content.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div id="sidebar">
<p class="header-red">Heading</p>
<p>Here are some pictures:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div>
<div class="thumbnail">
<p>Image 1</p>
</div>
<div class="thumbnail">
<p>Image 2</p>
</div>
<div class="thumbnail">
<p>Image 3</p>
</div>
<div class="thumbnail">
<p>Image 4</p>
</div>
<div class="thumbnail">
<p>Image 5</p>
</div>
<div class="thumbnail">
<p>Image 6</p>
</div>
</div>
<div>
<p class="header-blue">Heading</p>
<p>More information here!!!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div>
<p>Mpre information here!!!</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</div>
</body>
</html>ASKER
Sorry missed an opening div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFFFFF;
margin: 0;
}
.product #container {
background-color: #FFFFFF;
margin: 0 auto; /* Set left and right margins to auto so that #container is centered. */
padding: 0;
width: 960px;
border: 5px solid #FFFFFF;
}
.product #header {
padding: 0;
text-align: left;
margin: 0;
}
.product #title {
padding: 0px;
margin: 0 0 20px 0;
}
.product #content {
float: left;
width: 685px; /* Total width = 700px. */
padding: 0 10px 0 5px;
}
.product #sidebar {
margin-left: 700px; /* Total width = 960-700-10 = 250px. */
height:auto
}
.product #footer {
clear: both;
height: 200px;
background-color: #999999;
padding: 0 10px 0 5px;
}
p {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 170%;
margin: 5px 0;
padding: 0;
}
.text_grey {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
.padding {
padding: 5px;
}
.grey_bkg{
background-color: #999999;
margin: 0;
}
.thumbnail {
width: 115px;
float: left;
margin: 5px;
background-color: #999999;
}
.header-blue {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 0 0 5px;
height: 40px;
background-color: #3366FF;
}
.header-red {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 0 0 5px;
height: 40px;
background-color: #FF6699;
}
</style>
</head>
<body class="product">
<div id="container">
<div class="header grey_bkg">Logo</div>
<div id="content">
<p>Content.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div id="sidebar">
<div>
<p class="header-red">Heading</p>
<p>Here are some pictures:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div>
<div class="thumbnail">
<p>Image 1</p>
</div>
<div class="thumbnail">
<p>Image 2</p>
</div>
<div class="thumbnail">
<p>Image 3</p>
</div>
<div class="thumbnail">
<p>Image 4</p>
</div>
<div class="thumbnail">
<p>Image 5</p>
</div>
<div class="thumbnail">
<p>Image 6</p>
</div>
</div>
<div>
<p class="header-blue">Heading</p>
<p>More information here!!!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
</div>
<div>
<p>Mpre information here!!!</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks again! so is having the 'clear:both' in the header-blue css the same as adding this in the css:
.clear-float {
clear: both;
margin: 0;
padding: 0;
}
then putting it in the html as this:
.clear-float {
clear: both;
margin: 0;
padding: 0;
}
then putting it in the html as this:
<div>
<p class="header-blue">Heading</p>
<p>More information here!!!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<
</div>ASKER
sorry meant this:
<div>
<p class="header-blue">Heading</p>
<p>More information here!!!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget metus in tellus vulputate venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque cursus. </p>
<br class="clear-float" />
</div>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
cool, i understand it all much better now. thanks for all the help!
your welcome
remove what you have and add these to .layout #sidebar:
clear:both;
float:right;
height:auto;
width:auto;
margin-right:whatever you want here;
padding-left:10px;
that should work.
If not let me know, as it will have something to do with your main container which wraps the div's and their contents, and also positioning of the elements.