Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It's FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> 2 Column Layout

This is a discussion on 2 Column Layout, within the CSS section. This forum and the thread "2 Column Layout" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> 2 Column Layout, where 2nd col moves below 1st col when viewport small
djeyewater
post Dec 14 2009, 07:09 AM
Post #1


Rapid Squeezer
****

Posts: 308
Joined: 18-February 08
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:
Attached File  Untitled_1.png ( 3.3K ) Number of downloads: 2


layout with small viewport:
Attached File  Untitled_2.png ( 2.28K ) Number of downloads: 3


Is this possible without javascript?

Example page: http://www.iliveinabin.com/2col/
Example HTML:
CODE
<!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:
CODE
/*###########    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
Go to the top of the page
 
+Quote Post
MikeHopley
post Dec 14 2009, 08:22 AM
Post #2


Professional Squeeze
Group Icon

Posts: 1,268
Joined: 15-February 08
From: UK
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. wink.gif

My advice would be to use a simple fixed-width layout that fits well in a 1024*768 screen.
Go to the top of the page
 
+Quote Post
djeyewater
post Dec 14 2009, 10:41 AM
Post #3


Rapid Squeezer
****

Posts: 308
Joined: 18-February 08
QUOTE (MikeHopley @ Dec 14 2009, 01:22 PM) *
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. wink.gif

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
Go to the top of the page
 
+Quote Post
MikeHopley
post Dec 14 2009, 11:50 AM
Post #4


Professional Squeeze
Group Icon

Posts: 1,268
Joined: 15-February 08
From: UK
Okay, I see what you mean. It's quite a difficult problem. sad.gif

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. sad.gif

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.
Go to the top of the page
 
+Quote Post
djeyewater
post Dec 14 2009, 05:42 PM
Post #5


Rapid Squeezer
****

Posts: 308
Joined: 18-February 08
QUOTE (MikeHopley @ Dec 14 2009, 04:50 PM) *
Okay, I see what you mean. It's quite a difficult problem. sad.gif

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!

QUOTE (MikeHopley @ Dec 14 2009, 04:50 PM) *
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. sad.gif

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.


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.iliveinabin.com/2col/MenuInFirstLi.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.davidkennardphotography.com/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
Go to the top of the page
 
+Quote Post
overthemike
post Dec 14 2009, 10:53 PM
Post #6


Rapid Squeezer
Group Icon

Posts: 333
Joined: 14-February 08
From: Las Vegas, NV
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:

CODE
$(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
Go to the top of the page
 
+Quote Post
MikeHopley
post Dec 15 2009, 04:05 AM
Post #7


Professional Squeeze
Group Icon

Posts: 1,268
Joined: 15-February 08
From: UK
QUOTE (djeyewater @ Dec 14 2009, 10:42 PM) *
Thanks for the suggestion, the problem with doing that is that the left column is now no longer a column. http://www.iliveinabin.com/2col/MenuInFirstLi.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.
Go to the top of the page
 
+Quote Post
djeyewater
post Dec 15 2009, 04:45 AM
Post #8


Rapid Squeezer
****

Posts: 308
Joined: 18-February 08
QUOTE (MikeHopley @ Dec 15 2009, 09:05 AM) *
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.


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.

QUOTE (MikeHopley @ Dec 15 2009, 09:05 AM) *
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.


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
Go to the top of the page
 
+Quote Post
MikeHopley
post Dec 15 2009, 06:03 AM
Post #9


Professional Squeeze
Group Icon

Posts: 1,268
Joined: 15-February 08
From: UK
QUOTE (djeyewater @ Dec 15 2009, 09:45 AM) *
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).


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. smile.gif

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).
Go to the top of the page
 
+Quote Post
djeyewater
post Dec 15 2009, 02:33 PM
Post #10


Rapid Squeezer
****

Posts: 308
Joined: 18-February 08
QUOTE (MikeHopley @ Dec 15 2009, 11:03 AM) *
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. smile.gif

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


Good point, thanks for the advice!

Dave
Go to the top of the page
 
+Quote Post
Ryan
post Jan 17 2010, 06:25 PM
Post #11


Rapid Squeezer
****

Posts: 334
Joined: 14-February 08
From: Las Vegas
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.

CODE
$(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: Jan 17 2010, 06:26 PM


--------------------
Las Vegas Web Design | CSS Sticky Footer | Custom Checkboxes & Radio Buttons
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   0 karinne 1,280 14th February 2008 - 10:08 AM
Last post by: karinne
No New Posts   7 rewake 3,144 15th February 2008 - 05:06 PM
Last post by: Linda
No New Posts   3 mcdanielnc89 1,305 23rd February 2008 - 08:14 AM
Last post by: Marc
No New Posts   10 mcdanielnc89 1,482 24th February 2008 - 01:26 PM
Last post by: Ross
No new 17 Popje 1,568 12th March 2008 - 01:26 PM
Last post by: velo