Website Page Layout Width

Question

Hey guys,

I have designed the home page for my website. Now only specifing the with is remaining. After debating a lot, i decided to go with a fixed page layout. How do i do that? How do I put everything within 750px (or whatever you suggest)?

Answer 1

The simple answer to this question is to employ a library that has done the heavy lifting for you. I suggest 960 Grid.

Answer 2

In addition to 960 Grid as mentioned by Gabriel, I'm starting to enjoy using Blueprint.

Answer 3

wrap your content in the new DIV and use the following code:

#wrap_div {width:750px; margin: 0 auto;}

and then code, code and code :)

Answer 4

make a container div

<div id="container">
   <!-- Your content goes here-->
</div>

and use the following css

#container{width:750px; margin:0 auto}

The css sets the width using 'width' and writing the 'margin' like that centres the div in the browser window. ie, top, bottom, right left. Meaning that the margin at the top and bottom of the page is '0', and the right and left is 'auto'.

Answer 5

.. within 750px (or whatever you suggest)?

Use a width of around 960px (as the frameworks mentioned in the other answers do). This is targeted towards 1024x768 resolutions (and leaves some space for scrollbars), because very few people still browse in 800x600 or lower: http://www.w3schools.com/browsers/browsers_display.asp

Answer 6

Word of warning. It seems best to keep element sizes relative by percentage inside fixed parent position divs. What I mean, if

container {width:900px;}

child element1 {width:40%;}

child element2 {width:40%;}

etc;

problems can occur under low monitor resolutions if you insert high px values for internal elements in a fixed position div. In this case, elements within a div can spread out of their boxes when viewed in sub 1024x768 resolutions. Best to keep child elements sized by percentage so that div positions move relative to browser window size. I learned this the hard way.