2 Column Layout - The Web Squeeze

Cascading Style Sheets (CSS)

Cascading Style Sheets makes your website go from bland to SWEET! Learn CSS or teach CSS in this forum. Learn CSS Shorthand, how to use floats correctly, and how to style 2 and 3 column websites.

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

2 Column Layout where 2nd col moves below 1st col when viewport small

#1 djeyewater

Rapid Squeezer

Group: Members
Posts: 336
Joined: 18-February 08

Posted 14 December 2009 - 07:09 AM

I have a layout where I would like a fixed width column on the left, and a fluid width column on the right. The right column has a minimum width, and what I would like is that when the viewport is small so as to make the right column's min-width rule come into effect, the right column will move to wrap underneath the left column.

e.g. layout with large viewport:

Untitled_1.png (3.3K)
Number of downloads: 2

layout with small viewport:

Untitled_2.png (2.28K)
Number of downloads: 3

Is this possible without javascript?

Example page: http://www.iliveinabin.com/2col/
Example HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="en" version="XHTML+RDFa 1.0">
<head profile="http://www.w3.org/1999/xhtml/vocab">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
   <title>m</title>
	<link rel="stylesheet" type="text/css" href="[url="view-source:http://www.iliveinabin.com/2col/css-not-min.css"]./css-not-min.css[/url]"/>
</head>
<body>
   	<div id="subCats">Subcategories:
		<ul>
			  <li><a href="[url="view-source:http://www.photosite.com/photos/events-9-1.xhtml"]http://www.photosite.com/photos/events-9-1.xhtml[/url]">Events</a></li>
			  <li><a href="[url="view-source:http://www.photosite.com/photos/other-keywords-11-1.xhtml"]http://www.photosite.com/photos/other-keywords-11-1.xhtml[/url]">Other Keywords</a></li>
			  <li><a href="[url="view-source:http://www.photosite.com/photos/places-18-1.xhtml"]http://www.photosite.com/photos/places-18-1.xhtml[/url]">Places</a></li>
		</ul>
	</div>
	<div id="thumbsContainerWrapper">
		<div id="thumbsContainer">
			<ul><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li><li><a href="[url="view-source:http://www.iliveinabin.com/2col/#"]#[/url]"> </a></li></ul>
		</div>
		<p>Blah</p>
	</div>
</body>
</html>

Example CSS:

/*###########	General	###########*/
html, body{
	margin: 0;
	border: 0;
	padding: 0;
}

html{
	height: 100%;
	background: #1c1c1c;
}

body{
	color: #FFF;
	padding: 0 60px;
	min-width: 400px;
	max-width: 1100px;
	margin: 0 auto;
	height: 100%;
}

/*###########	Photos page	###########*/


#subCats{
	float: left;
	width: 250px;
	border: 1px solid #f00;
}

#thumbsContainerWrapper{
	position: relative;
	float: left;
	border: 1px solid #0F0;
}
#thumbsContainer{
	float: left;
	display:block;
	margin: auto;
	min-width: 368px;
	padding: 2px;
}
#thumbsContainer ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#thumbsContainer ul li{
	padding: 0;
	float: left;
}
#thumbsContainer a{
	display: table-cell;
	width: 180px;
	height: 180px;
	background: #999;
	border: 1px solid #FFF;
}

Thanks

Dave

#2 MikeHopley

Professional Squeeze

Group: Mentor
Posts: 1,382
Joined: 15-February 08
Gender:Male
Location:UK

Posted 14 December 2009 - 08:22 AM

It's possible to do this with floats. However, I recommend taking a step back and questioning whether it's actually a good idea.

Having a layout rearrange itself is disorienting for users. If I narrow my browser window and a horizontal scrollbar appears, then that's okay -- at least I understand where the sidebar is. However, if the sidebar jumps to the bottom of the page without warning, I don't understand what's happened; it's not good from a usability perspective.

It's also not good from a development perspective. By allowing the layout to rearrange itself, you must constantly keep these two different layouts in mind when you make design changes. This limits your design possibilities, and it also makes simple design changes more complicated. Trust me, I've been there before.

My advice would be to use a simple fixed-width layout that fits well in a 1024*768 screen.

#3 djeyewater

Rapid Squeezer

Group: Members
Posts: 336
Joined: 18-February 08

Posted 14 December 2009 - 10:41 AM

MikeHopley, on Dec 14 2009, 01:22 PM, said:

My advice would be to use a simple fixed-width layout that fits well in a 1024*768 screen.

Thanks for the advice, I'm not wanting to move the menu (left column) below the images (right column), but rather the other way round - so the right column wraps underneath the left column when the viewport is small.

Because the left column (menu) is only quite small, I think that if a user resizes their viewport from a large size to a small size, it should be quite easy for them to see that the right column (images) is moving underneath the left column (menu). If a user starts with a small viewport (which seems more likely), then they get a better user experience as they don't have to scroll right to view the images, and there won't be a large amount of wasted space underneath the left column for them.

I should also mention that the left column isn't the main menu for the site, and the right column isn't the main content, rather these 2 columns contain the content on one page of the site, for more information on what I'm trying to achieve see this thread

If you could advise me on how to do this using floats, I'd greatly appreciate it. You can see that at the moment both columns are floated, but the right column will always appear underneath the left column since it will always expand to fit its content.

Thanks

Dave

#4 MikeHopley

Professional Squeeze

Group: Mentor
Posts: 1,382
Joined: 15-February 08
Gender:Male
Location:UK

Posted 14 December 2009 - 11:50 AM

Okay, I see what you mean. It's quite a difficult problem.

You're trying to make the larger float expand to fill the available width. You're also trying to make it drop below the smaller float, when it goes below a minimum width. Is that right?

I think this is impossible without nasty scripting. By not setting a width on the larger float, you're effectively asking it to expand until it fills 100% of the container. It dutifully does this, and therefore leaves no room for the smaller float.

What you want to say is, "fill 100% of what's left in the container, after floating." But I don't think you can do that in CSS.

Let me suggest a pragmatic solution, which might look quite good: why not put your "subcategories" box inside one of the floated boxes? Just let it float with the rest of them, and you no longer have a problem.

#5 djeyewater

Rapid Squeezer

Group: Members
Posts: 336
Joined: 18-February 08

Posted 14 December 2009 - 05:42 PM

MikeHopley, on Dec 14 2009, 04:50 PM, said:

Okay, I see what you mean. It's quite a difficult problem.

You're trying to make the larger float expand to fill the available width. You're also trying to make it drop below the smaller float, when it goes below a minimum width. Is that right?

Yes, that's exactly it!

MikeHopley, on Dec 14 2009, 04:50 PM, said:

I think this is impossible without nasty scripting. By not setting a width on the larger float, you're effectively asking it to expand until it fills 100% of the container. It dutifully does this, and therefore leaves no room for the smaller float.

What you want to say is, "fill 100% of what's left in the container, after floating." But I don't think you can do that in CSS.

Thanks for the suggestion, the problem with doing that is that the left column is now no longer a column. I tried floating the #thumbsContainer ul and setting the height of the first #thumbsContainer ul li (which would now contain the left menu column) to 100%, but this didn't work - the first list item still wrapped its content (the left column), making it so the left column doesn't appear as an actual column, but rather just the first item:
http://www.iliveinab...nuInFirstLi.jpg

Actually, I think the images wrapping under the menu might be okay in this instance, but I'd still like to know how to make the left column appear as a column (if it's possible without js). Any ideas?

I don't think using javascript to move the images column depending on the viewport width would require any 'nasty' js (unless you consider all js 'nasty'), and with that 2 column display format doesn't require any js at all to get the images ending on a row (as only 2-4 columns of images can fit), whereas if the images wrap under the menu, so forming up to 5 columns of images, js is required to get the images to end on a row.

(If you're not sure what I'm on about, you can take a look at http://www.davidkenn.../photos/1.xhtml in FF or Chrome and trying changing the viewport size - the current page uses the 2-5 column layout, and js is used to hide the last image when the viewport dictates that less than 5 images are shown, making it so that the images always end on a row).

Cheers

Dave

#6 overthemike

Rapid Squeezer

Group: Members
Posts: 341
Joined: 14-February 08
Gender:Male
Location:Las Vegas, NV

Posted 14 December 2009 - 10:53 PM

I don't believe this can be done without javascript and like Mike said in his first post, it's bad for usability. I really don't recommend doing something like this regardless which column goes above or below, but if you really want to do this you could do it with jQuery like so:

$(document).ready(function(){
	$(window).resize(function(){
		if($(window).width() <= 400){
			$("#left-column").css("clear","both");
		}else{
			$("#left-column").css("clear", "none");
		}
	});
});

where 400 would be the size of the window when you want the columns to rearrange. In this instance, you will have to make sure that the left columns appears before the right in the markup.

A Life? Cool! Where can I download one of those?
http://www.overthemike.com

#7 MikeHopley

Professional Squeeze

Group: Mentor
Posts: 1,382
Joined: 15-February 08
Gender:Male
Location:UK

Posted 15 December 2009 - 04:05 AM

djeyewater, on Dec 14 2009, 10:42 PM, said:

Thanks for the suggestion, the problem with doing that is that the left column is now no longer a column. http://www.iliveinab...nuInFirstLi.jpg

Actually, I think the images wrapping under the menu might be okay in this instance, but I'd still like to know how to make the left column appear as a column (if it's possible without js). Any ideas?

Hmmm, that's odd.

How about just grabbing the whole subcats <div>, and stuffing it inside the first <li> of your thumbsContainer <ul>? I wouldn't recommend making any more floats than you actually need.

Quote

I don't think using javascript to move the images column depending on the viewport width would require any 'nasty' js (unless you consider all js 'nasty')

The reason I say "nasty" is that I would expect this JS to be frequently evaluating the size of the browser window (as you would want this to work when the user changed the size of his window). Constant-evaluation JS tends to cause slowdown -- sometimes it can bring a browser to its knees.

#8 djeyewater

Rapid Squeezer

Group: Members
Posts: 336
Joined: 18-February 08

Posted 15 December 2009 - 04:45 AM

MikeHopley, on Dec 15 2009, 09:05 AM, said:

That's what I did in that screenshot. But now I think about it, it's obvious that with the subcats div inside the first <li> of the thumbsContainer <ul>, you wouldn't want it to appear as a column with 100% height anyway - if it did then the other <li>s of the thumbsContainer would never be able to wrap underneath it, which was the whole point of moving the subcats div inside the first <li> of the thumbsContainer <ul> in the first place.

MikeHopley, on Dec 15 2009, 09:05 AM, said:

I don't know how javascript works internally, but it's just a case of adding an event listener to the window for the resize event, so I don't think it should cause any slowdown except maybe during the actual resize process (and I've never noticed any slowdown during resize when resize event listeners are attached to the window).

Dave

#9 MikeHopley

Professional Squeeze

Group: Mentor
Posts: 1,382
Joined: 15-February 08
Gender:Male
Location:UK

Posted 15 December 2009 - 06:03 AM

djeyewater, on Dec 15 2009, 09:45 AM, said:

I've known similar JS layout hacks to cripple a browser. However, that doesn't necessarily mean that this one would. If you fancy giving it a go, by all means try.

One note of caution: you are a web designer, and probably have much faster hardware than many of your visitors. If you do implement this layout hack, it would be wise to test it against older CPUs and slower browsers (Chrome, for example, is lightning-fast at javascript compared to IE).

#10 djeyewater

Rapid Squeezer

Group: Members
Posts: 336
Joined: 18-February 08

Posted 15 December 2009 - 02:33 PM

MikeHopley, on Dec 15 2009, 11:03 AM, said:

I've known similar JS layout hacks to cripple a browser. However, that doesn't necessarily mean that this one would. If you fancy giving it a go, by all means try.

Good point, thanks for the advice!

Dave

#11 Ryan

Rapid Squeezer

Group: Members
Posts: 340
Joined: 14-February 08
Gender:Male
Location:Las Vegas

Posted 17 January 2010 - 06:25 PM

The previous posters are correct, this can't be done in CSS, and a simple JavaScript function is the best way to achieve the desired functionality. Loading jQuery just to do this is a bit excessive in my opinion, but it works. You'll also need to specify widths in that function.

$(document).ready(function(){
	$(window).resize(function(){
		if($(window).width() <= 400){
			$("#left-column").css("width","100%");
			$("#right-column").css("width","100%");
		}else{
			$("#left-column").css("width","50%");
			$("#right-column").css("width","50%");
		}
	});
});

This post has been edited by Ryan: 17 January 2010 - 06:26 PM

Las Vegas Web Design | CSS Sticky Footer | Custom Checkboxes & Radio Buttons

Share this topic:

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Page 1 of 1

Trackbacks
Trackback URL	Trackback Date	Total Hits
No trackbacks were found

Page 1 of 1

Similar Topics
Topic	Started By	Stats	Last Post Info
Directaz Llc - Small Business Web Design	Jasontor	0 Replies 2,046 Views	1202967249 By: Jasontor
Resources For Learning How To Use Css For Layout Still using tables are you? Well ... get on the CSS band-wagon!	karinne	0 Replies 1,403 Views	1203001727 By: karinne
Site Layout It's an oldie, but I'd love some feedback!	rewake	7 Replies 3,237 Views	1203113178 By: Linda
Minor Error Problem Not Diapling The Layout Right...	mcdanielnc89	3 Replies 1,374 Views	1203772493 By: Marc
Layout	mcdanielnc89	10 Replies 1,548 Views	1203877583 By: Ross