Solved

CSS variable width div columns

Posted on 2009-04-07
16
906 Views
Last Modified: 2012-05-06
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
.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;
}

Open in new window

0
Comment
Question by:allanch08
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 8
16 Comments
 
LVL 1

Expert Comment

by:l_mcnamara
ID: 24085697
Hi,

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

Author Comment

by:allanch08
ID: 24085988
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.
0
 
LVL 1

Expert Comment

by:l_mcnamara
ID: 24086164
Is it possible for you to upload your page somewhere so i can have a visual?

Or paste your html and css.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:allanch08
ID: 24086250
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
0
 
LVL 1

Expert Comment

by:l_mcnamara
ID: 24086405
That's ok.  Let me know if you run into anymore trouble.
0
 

Author Comment

by:allanch08
ID: 24092663
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>

Open in new window

0
 
LVL 1

Assisted Solution

by:l_mcnamara
l_mcnamara earned 300 total points
ID: 24093242
Fixed mate.

Simply deleted: <br class="clear_float" /> as this wasn't doing anything useful.

Copy the code below and your layout will work fine.  Tested on FF2+, IE6+7, Safari, Opera.



<!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;
}
.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;	
}
 
.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>
        <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>
 
 
 
		<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>

Open in new window

0
 

Author Comment

by:allanch08
ID: 24094555
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>

Open in new window

0
 

Author Comment

by:allanch08
ID: 24094564
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>

Open in new window

0
 
LVL 1

Accepted Solution

by:
l_mcnamara earned 300 total points
ID: 24094700
All fixed again.  You need to watch how you specify certain css parameters, maybe read up on what each one does a bit more.  Anyway, here's your layout all fixed.

<!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;
	clear:none
}
.product #sidebar {
	width:250px; /* Total width = 960-700-10 = 250px. */
	height:auto;
	float:right;	
}
.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;
	clear:both
}
.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>
        <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>
        <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 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 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>
 	<div id="footer">
		<p>Footer</p>
	</div>
</div>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:allanch08
ID: 24094753
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:
<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>

Open in new window

0
 

Author Comment

by:allanch08
ID: 24094757
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>

Open in new window

0
 
LVL 1

Assisted Solution

by:l_mcnamara
l_mcnamara earned 300 total points
ID: 24094798
Yes and no.  On the header-blue your clearing all floats around it whereas if you put the clear:both on a br tag then its going to clear only around that tag.  It may work in some browsers buy may not in others. The way i have done it, is the correct style. You should have to use br to clear floats.  Plus it adds to more code on your page.

Cheers.
0
 
LVL 1

Assisted Solution

by:l_mcnamara
l_mcnamara earned 300 total points
ID: 24094804
Sorry i meant to say you should NOT have to use br to clear floats.
0
 

Author Comment

by:allanch08
ID: 24095091
cool, i understand it all much better now. thanks for all the help!
0
 
LVL 1

Expert Comment

by:l_mcnamara
ID: 24095308
your welcome
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Fix a css menu for width 15 40
CSS Flex space-between 2 30
Incorrect css styling in footer 3 24
Can't Find The Code 15 17
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question