Resize a Website Neatly

March 2, 2009 11:58 AM

How do I make a website behave nicely when a browser window is resized so that the website elements don't cascade onto each other?

I work for a non-profit that cannot afford to hire someone to build a website that represents the organization. I'm probably the only computer literate person in the organization, but that doesn't mean much. I know a little bit of this, and a little bit of that, but I'm definitely a noob at building websites. Regardless, I (stupidly?) volunteered to try my best and build at least something.

So, I took a look at some online tutorials on HTML/CSS, played around with a few templates, and threw together a website. On the whole, it's pretty decent except for one problem: when you resize the browser window on the screen, all of the different elements of the website start collapsing onto each other which makes for a really ugly display of our content. How do I make it so that a window resize just starts cutting into the website or at least resizes the components neatly? For example, when you resize the browser window while you're surfing Wikipedia, the text and buttons don't jumble up. They're merely resized up to a point and then only a small segment of the website is displayed.

I don't even know what the relevant terminology is, and Google has therefore failed me. Are there any search terms I can use to find a guide, or do you know of any specific HTML/CSS code?

By the way, I'm using Dreamweaver to edit the website.

I appreciate any help that you can provide!

posted by mahoganyslide to computers & internet (10 comments total)

It's possible to specify a minimum width for an outer div. By doing this you'll prevent the (presumably floated) elements of the layout from being squashed in together. Post a link to the site for more specific advice...
posted by le morte de bea arthur at 12:10 PM on March 2

Example
posted by le morte de bea arthur at 12:11 PM on March 2

And another
posted by le morte de bea arthur at 12:12 PM on March 2

Oh, some browsers *clears throat* have issues respecting min-width. The solution, should you care about these browsers, is to create a .gif which is transparent, one pixel tall, and minimum width wide. Embed somewhere handy.

It's an ugly hack, but that's what happens when browsers ignore standards. Something over 18% of the population is still on Internet Explorer 6 as of this writing, therefore, you will want to take this into consideration.
posted by adipocere at 12:36 PM on March 2 [1 favorite]

Yeah, this is one of those problems that can make a grown man cry. The solution provided by adipocere is probably the most pragmatic one, even if it's a cludge. Other than that, try to structure your website to be less jumble-prone: For example, float a fixed-witdh div to one side for your navigation elements, and put everything else in another div that can be cleanly resized.
posted by ghost of a past number at 12:42 PM on March 2

So besides the min-width method generally you only want a single column to be a variable width. You'll notice with wikipedia the right and left columns are fixed width and the center will collapse to a point where its not very usable. Min-width isn't supported on IE which makes it a non-starter for most.

Check out CSS 3-column layouts for a traditional layout methods.

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

But the other "trick" is to pick a minimum width and design with that in mind, if people scrunch their browsers much smaller than 700px wide then so be it, they're going to have a hard time.
posted by bitdamaged at 12:43 PM on March 2

You might also learn something from googling "liquid layout."
posted by rhizome at 12:47 PM on March 2

All good advice -- and I'll point out that modern browsers (IE7, FF3, Opera) zoom the page, rather than just enlarging text. It makes things much, much easier (but yeah, you still have to jump through hoops for older browsers).

CTRL+scoll wheel
posted by coolguymichael at 12:52 PM on March 2

Final thing to take into account is that (unless it's changed significantly since I last used it) Dreamweaver occasionally screws up your CSS. Best bet is to find a CSS layout template that works, then link it externally so that Dreamweaver won't touch it.

I usually call my main style CSS, and in the first line of this file put

@import url('path/to/layout.css');

That will pull an external layout file into your main CSS file without including the layout rules in with the main styling. It also makes it easier to make changes to the look and feel of the site without making any inadvertent changes to the layout.

Avoid floating elements if you can. They are great in theory but in practice they kind of suck. You might find it helpful to throw in some <div> elements with a style set to clear: both; after any floats, to help keep floated objects or text from overlapping if they get pushed together. Some people will say that this is bad because those "empty" <div> elements serve no purpose and are thus not good semantic design. I say if you want good semantic design Dreamweaver is an awful way to do it, and as much as I like the idea of coding standards, we're stuck with what we have.
posted by caution live frogs at 2:17 PM on March 2

At your skill level, commitment level, and the organisation's funding level, you should not be trying to build this from scratch.

You should be trying to find a free/open-source template and building the site based on that. CSS layout has a rather painful learning curve. You haven't got time to go through that apprenticeship.

Find yourself a layout that

• your organisation is entitled to use for free
• says it's been tested on a bunch of browsers including the worst versions of IE
• actually does work on all those browsers (test it yourself)
• looks broadly the way you want your site to look
• has flexibility

Then use Dreamweaver's templating feature to create a website based on that template. Come back here and ask us about any matters arising.

Once you've done that, you can take a breather, pat yourself on the back, and then dive back into CSS layout. Give yourself six months to get to grips with all the complexities, hacks, kludges, workarounds, tricks etc.

Then you can build the next version of your site from scratch.
posted by AmbroseChapel at 3:07 PM on March 2