How do you restrict the width of you webpages?

Question

If you look at youtube.com or answers.yahoo.com, they restrict all the content to a block in the middle. How is that done? Using a table? Parameters describing by using styling? Thanks.

Answer 1

All you have to do is enclose your page content within a master div. I usually call it "wrapper" -

other structural divs and content in here

Then in my css file I style it like this -



#wrapper {

width:760px; /*this is a good width to use in case your users still use 800x600 resolutions*/

margin:0 auto; /*this is how you center it*/

text-align:center; /*this makes IE6 center the div - IE6 doesn't behave very well*/

}



I would also make sure the div immediately within the wrapper has at least this styling in the css -



#content { /*just an example name here*/

text-align:left; /*this ensures your text will not be centered*/

}



The "content" div doesn't need a width specification because it inherits the width of its parent, the wrapper div. You just have to make sure that if you float divs side by side within the wrapper that their total widths don't exceed the wrapper's width. Keep in mind that borders, padding and margin in addition to a div's width affect how they're laid out. Tables aren't necessarily the easiest way to duplicate what Yahoo and YouTube do. I've been building sites for a couple of years and I switched to divs midstream. They work just fine and are better solutions for content accessibility and more complex designs.



Here is a site we did at work - http://www.writemindinstitute.com. Check out the source code. The tables that you'll see there were auto-inserted by the content management system the site uses. Otherwise, it's built with divs.

Answer 2

You can use tables and specify width= command using either fixed pixel widths or percentages ie. width=10% etc.



Tables let you do it easily and its even easier if you use a master page to define the tables then just load the ones that change.



If you look at html tables you will see the width commands, other commands such as border will make the tables seamless so you can't see where they start and end.

Answer 3

while i seriously doubt this is how this web page accomplishes this, i think your best bet would be to use the table method...

whatever

you find cooler methods by using divs and css though, not near as clunky. check out http://www.w3.org/Style/CSS/