Floated left sidebar with fluid width sibling without abs position?

**Scott Blanchard** · Aug 25, 2011 07:55

I need to create a 2 column layout with a fixed width sidebar floated to the left of a fluid width sibling element ("content"). The tricky part is that the sidebar follows the content in the markup. I know I can absolutely position the sidebar and assign a margin-left to the "content" element to have it snap into place, however...

Is it possible to do it without absolutely positioning the sidebar? I want to avoid that because of potential overlap issues on the footer when the sidebar is taller than the content element.

The markup is:

HTML Code:

<div class="wrapper">
	<div class="main">
		<div class="content">content here</div>
		<div class="sidebar">sidebar here</div>
		<div class="clear">clear div</div>
		<div class="footer">footer content should flow below all previous sibling elements</div>
	</div>
</div>

**ralph.m** · Aug 25, 2011 08:11

What about something like this:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style>
.main, .footer {overflow: hidden; margin-bottom: 20px; }
.sidebar {float: left; width: 180px; background: #f7f7f7; }
.content {margin-left: 200px; overflow: hidden;}
</style>
</head>

<body>
	<div class="main">
		<div class="sidebar">sidebar here sidebar here sidebar here sidebar here sidebar here sidebar here sidebar here sidebar here</div>
		<div class="content">content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here </div>
	</div>

	<div class="footer">footer content should flow below all previous elements</div>

</body>
</html>

**Paul O'B** · Aug 25, 2011 08:49

You changed the source order Ralph

You could do something like this as long as you can target the inner elements in the content section to keep them clear (or add a wraping div around the content instead).

e.g.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
	margin:0 0 1em
}
.main, .footer {
	overflow: hidden;
	margin-bottom: 20px;
}
.sidebar {
	float: left;
	width: 180px;
	background: #fcc;
	margin-right:-190px;
}
.content {
	float:right;
	width:100%;
	background:red;
}
.content p {margin-left:190px}
.footer {
	clear:both;
	background:#fcf;
	padding:10px 0
}
</style>
</head>
<body>
<div class="wrapper">
	<div class="main">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. </p>
		</div>
		<div class="sidebar">
			<p>sidebar here</p>
			<p>sidebar here</p>
			<p>sidebar here</p>
			<p>sidebar here</p>
		</div>
		<div class="footer">footer content should flow below all previous sibling elements</div>
	</div>
</div>
</body>
</html>

User Tag List

Thread: Floated left sidebar with fluid width sibling without abs position?

Thread Tools

Display

Floated left sidebar with fluid width sibling without abs position?

Bookmarks

Bookmarks

Posting Permissions