Wednesday, September 29, 2010

Css Tutorial : How to create a fixed-width div

1. Set things up. Rename the boilerplate documents to create-a-fixed-widthwrapper.
html and create-a-fixed-width-wrapper.css. Link the CSS document
to the web page by amending the url value of the style element.
@import url(create-a-fixed-width-wrapper.css);


2. Add some content. The web page already has a div element with an id of wrapper.
Within it, add a bunch of paragraphs and test the web page. You’ll see that the content
stretches with the browser window and goes right up to its edges—this is a
basic liquid design. If the browser window is very wide, this makes the content all
but unreadable. 3. Restrict the wrapper’s width. In CSS, add the following rule:
#wrapper {
width: 600px;
margin: 0 auto;
}
The width setting defines a width in pixels for the wrapper div. The margin setting
provides automatic margins to the left and right of the div, which has the effect of
centering the layout in the browser window,

No comments:

Post a Comment