Elastic Layout - Problems

[TehYoyo]

Hey all. So I diagrammed everything for my site. Widths, locations, etc.

The thing is, when I was planning it, I based it off the fact that 16px = 1 em usually. So then I just said to myself, "I want the navbar to be 80 px high...so that's 5em." It ended up just pretty much being a fixed width layout - just in em. I'm wondering if that's a bad idea? I literally made a fixed-width layout then switched to em.

Am I doing this wrong?

Thanks.
~TehYoyo

[Paul O'B]

It depends what you want to achieve

By substituting pixels for ems you have in fact made another fixed width site except that it will expand and contract depending on users settings which is a good thing. However it does not address the issue of screen width and what the site looks like on smaller or larger devices than the one you designed it for.

You should really be designing with min-width and max-width in mind so that the page can grow and contract depending on screen size. Of course that means being careful with how the elements are laid out so that they can ebb and flow with the screen size nicely.

You could set a max-width of say 61em and use margin:auto so that it centers on screen.

e.g.

#outer{
	min-width:760px;
	max-width:61em;
	width:80%;
	margin:auto;
}

Fluid/elastic sites present some design challenges but as long as you don't try to constrain everything into little boxes then you should be ok.

[TehYoyo]

Right now my width is 60 em. I was planning on having max-width maybe 85%? And min-width probably 760px?

Should I set my width in % and then define min in px and max in em?

~TehYoyo

[Paul O'B]

Right now my width is 60 em. I was planning on having max-width maybe 85%? And min-width probably 760px?

Should I set my width in % and then define min in px and max in em?

~TehYoyo

In this case width and max-width values are interchangeable in that you can either say width :60em and max-width:85% or max-width:60em and width 85%. The result will be the same and the width will be whatever is the smallest.

I usually set the min-width in pixels but ems would be ok also. It just means that the actual pixel width would depend on the font-size if you use ems so the minimum size of the layout will be smaller or larger as a result. Usually the min-width of a page is determined by the largest element in that section and it usually turns out to be an image or something similar which is sized in pixels so you would need to match it with a pixel size rather than ems.

[TehYoyo]

OK. I get what you're saying. My main concern is that I pretty much made a fixed-width layout then converted it to ems. Is that a bad thing? Will it break?

~TehYoyo

[RyanReese]

OK. I get what you're saying. My main concern is that I pretty much made a fixed-width layout then converted it to ems. Is that a bad thing? Will it break?

~TehYoyo

If done correctly, of course not . Take a stab at converting and we will be here should you get tripped up by something .

[TehYoyo]

OK. Thanks a lot. I'll continue as I am doing!

Forward, thy valiant self!

~TehYoyo