3 Column Layout Responsive Design With Flexible Middle Column

**oddz** · Dec 8, 2012 16:16

I need to create a responsive layout based on the requirements shown in the picture. Does anyone have any ideas for this without using JavaScript or server side logic? The primary issue I am having is that using a standard 3 column approach the middle content area would follow the left and right columns in HTML. Therefore, it is almost impossible to have that middle area become the first item within the mobile context. The only thing I can think of is absolute positioning the left and right columns but that does not work when the height of the left and right columns are not constant but flexible based on different content. Any ideas here?

Screen shot 2012-12-08 at 5.21.15 PM.png

I do currently have a solution but it sacrifices the flexible height of the left and right column. The actual content that will be shown in the left column here is an ad. That ad will always be 250x300. The content in the right column will be a list of three items with a picture that are floated next to each other in a single line. For the most part it is safe to say that the content within the far right column will not make that column expand past 300px. Therefore, I can sort of get away with placing the middle area first in the HTML than using absolute positioning to position the left and right column. However, I really rather not use this technique since if the content in the left or right columns ever needs to changed everything will need to be reworked.

**ralph.m** · Dec 8, 2012 16:19

If you want them in the order shown in the image, you could just float them.

**oddz** · Dec 8, 2012 16:22

I messed up the picture, take a look again.

**oddz** · Dec 8, 2012 16:26

I guess what I'm really looking for is a three column technique where the middle content area is both flexible and can come first in the HTML. If that works than the mobile layout is simply relying on the default browser order of the elements. The tricky part though is having the middle content area come first in the HTML.

Flex box would be so great here but I can't rely on that…

**ralph.m** · Dec 8, 2012 16:30

Originally Posted by oddz

I messed up the picture, take a look again.

Heh heh, I wondered about that. OK, what you want is certainly quite possible. Here is a layout the dear ds60 posted a while back:

http://www.cutcodedown.com/for_other.../template.html

It has a few extra things, but what you want is in there.

Here is another, without the responsiveness built in:

http://www.cutcodedown.com/for_other.../template.html

but it would be easy to add it in.

**oddz** · Dec 8, 2012 17:41

Cool stuff!

Took me a little while to break it all apart but for anyone else looking for the bare bone basics of the apporach I will post this here. Need to check in IE on Monday at work though.

Thanks ralph.m I can now sleep a little better at night knowing I don't have to use my absolute positioning method.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>3 Column Responsive Layout</title>
	
<style type="text/css">
html,body {
	padding: 0;
	margin: 0;
}

div p:first-child {
	margin: 0;
}

#container {
	background-color: black;
	
	/* @technique */
	position: relative;
	overflow: hidden;
}

#content {

	/* @technique */
	float: left;
	width: 100%;
}

#main-content {
	background-color: #9B8579;
	padding: 1em;
	
	/* @technique */
	margin: 0 400px 0 300px;
}

#rails {
	background-color: blue;

	/* @technique */
	float: none;
	width: auto;
	margin: 0;
}

#rail-1 {
	/*background-color: #00AEEF;*/
	width: 300px;
	
	/* @technique */
	position: relative;
	float: left;
	left: -100%;
	margin-right: -300px;
}

#rail-2 {
	background-color: #39B54A;
	width: 400px;
	
	/* @technique */
	position: relative;
	float: left;
	margin-left: -400px;
	
}

.apt-ad {
	background-color: red;
	width: 300px;
	height: 250px;
	margin: 0 auto;
}

/* tablet changes */
@media all and (max-width: 800px) {
	#main-content {
		margin-left: 0;
	}
	#rail-1 {
		position: relative;
		float: left;
		margin-left: -400px;
		left: 0;
		width: 400px;
	}
}

/* mobile changes */
@media all and (max-width: 400px) {
	#content,
	#main-content,
	#rails,
	#rail-1,
	#rail-2 {
		float: none;
		position: static;
		margin: 0;
		width: auto;
	}
	
}
</style>
	
</head>
<body>

	<div id="container">
		<div id="content">
			<div id="main-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae metus sem, id scelerisque diam. Sed vel orci neque, ut interdum nunc. Vivamus a blandit elit. Nulla magna arcu, scelerisque et viverra vel, cursus vel dui. Quisque nunc sem, ullamcorper quis pulvinar at, tempor ac turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin bibendum arcu id nibh porta vel adipiscing metus sodales. Nam viverra iaculis justo a mollis. Ut sed mi sapien. Quisque dictum gravida nisl non tempus. In id arcu a erat convallis bibendum. In eu tellus rutrum est tristique ultricies nec in erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
			</div>
		</div>
		<div id="rails">
			<div id="rail-1">
				<div class="apt-ad">Adspot</div>
			</div>
			<div id="rail-2">
				<div class="recent-items">Recent Items</div>
			</div>
		</div>
	</div>

</body>
</html>

**ralph.m** · Dec 8, 2012 17:47

I would say just remove the big margins altogether on small/narrow screens. If I squeeze my browsers down, things don't site on top of each other as they ideally should.

**oddz** · Dec 8, 2012 17:54

You mean increase the media query tolerance for what constitutes a tablet and mobile screen?

* 1000 px for tablet and 600px for mobile seems to work alright for the media query. Though that could really be anything including relative measurements. I can fiddle around with that when I implement this within the actual project I'm working on.

**ralph.m** · Dec 8, 2012 18:00

Not really. I just mean that when you unfloat those columns, remove any big margins, too. When I squeeze down my browser, there is still a big right margin on main_content, which means that content is squeezed into a narrow strip down the left of the page.

**oddz** · Dec 8, 2012 18:13

Well that column must be at least 300px in width. There is an ad that will be placed there that some would consider more important than the main content. Those *some being the ad department of the company which I work. The ad department which is responsible for a large portion of income wouldn't like their ads being compromised in-light of what you are saying.

**ralph.m** · Dec 9, 2012 05:56

I w talking about the middle text column, rather than the ad.

User Tag List

Thread: 3 Column Layout Responsive Design With Flexible Middle Column

Thread Tools

Display

3 Column Layout Responsive Design With Flexible Middle Column

Bookmarks

Bookmarks

Posting Permissions