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.
Creating a fixed-width wrapper
Internet Explorer 5.x for Windows gets the box model wrong, placing padding and
borders inside the defined dimensions of an element. The bug is explained in full in
Chapter 9, which also offers workarounds to fix layouts that get broken in aging versions
of Microsoft??™s browser.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
264
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, as shown in the following screenshot.
Required files Files from add-starting-point in the chapter 7 folder as a
starting point.
What you??™ll learn How to add style to a fixed-width div.
Pages:
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366