Basic Positioning / browser resize

@chinaski30Jan 07.2006

Hello – I jumped into CSS as a designer and love it…BUT…What are the rules to make sure…when the user resizes the browser, the content follows? Do you know what I mean? So it all crushes up and follows a browser resize. I know a “container” is the key. But sometime when I’m working…certain objects will group and crush, and others will remain unmoved. I have scoured the internet and forums with no solid answers. It seems everyone knows how to do this but me.

Any explanation is greatly appreciated.
Thank You

to post a comment

CSS

@ciscoguy24Jan 07.2006 — #I would also like to know as right now I have built three websites for one site to accomdate the three popular screen sizes. This is stupid I know but it does seem like its hard to write a fluid layout using css. Please help!!

adam

@chinaski30authorJan 07.2006 — #Addendum: I want a background image with text on top. How do I make them centered and stick together? I will pray you win the megalottery if you can explain/demonstrate this to me. Thanks again...Chinaski.

@ray326Jan 07.2006 — #Give us a link to an example of what you have so far. Centering some minimal amount of content over a centered background image is pretty simple.

@LJKJan 08.2006 — #Hi -

If you're using no bkgnd. images in the layout,

it's fine to have a 'container' div that's set to a

% of the body, two divs within

it each floated in the same direction - set in % that

total the container's width - then clear the float.

[Though IE sometimes has trouble w/ addition ;-)]

If you have bkgnd. images in main areas, then it's

not such a good idea - or more tricky since you have

to use images that extend w/ more to them if resized.

In that case, a fixed width div and the same as above

works pretty well...

Good luck,

El

@WebJoelJan 09.2006 — #I would have to go to my textEditor to actually write it and test it first (But I have seen it done before, so I know that it will work), but here's the general idea:

Make your content DIV have left and right margins set to "auto" (margin-left:auto and margin-right:auto), and the content DIV be a percentage of the entire screen width (like say, 70 or 80%). That way, the left and right margins will always force-to-center the DIV content container after the content takes up it's allotted 70 or 80% (the margins will each be equal amounts of whatever is left over).

You'd want the content DIV to be a numerical percent value, so that it will expand to accomodate wider screen resolutions. 80% of an 600x800 resolution is not as wide as 80% of a 1024x768 resolution, etc.) You could even then add some min-width statements to prevent it shrinking smaller than a certain width (in pixels), if you wished.

Sorry I cannot be more explicit and give immediate example. I thought I had a bookmark to such an example that you asked for.

-Joel

Basic Positioning / browser resize

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Basic Positioning / browser resize

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴