To center an element that has a width (and is not floated) then you should use auto left and right margins and it will centre automatically, No need to put 15% left and right margins as that is just guessing and indeed ensures that the element can never occupy only its own width should the page be constructed in a fluid way.
It looks as though from your drawing that you want that element left aligned anyway so remove the 33.3 % width from it and if required apply a width to nested div instead if you want to restrict the content width.
.product {
[B] margin: 50px auto;[/B]
min-height: 374px;
padding: 10px 464px 10px 0;
[B]/* width: 33.3%;*/[/B]
}
Hey Paul, I have another question, do you have any good suggestions for planning out layouts.
There are some people who use grids such as 960. But i feel like i need to understand layouts myself first before using that.
I would avoid grids until you have a good understanding of CSS otherwise you will never learn how to modify them to your needs.
These days its all about fluid/elastic design so some grids are a bit outdated in that respect but the new ones like bootstrap or foundation do take a mobile first approach and are quite good but are a heavy price to pay for most small sites when a couple of simple divs will do the trick.
There is no magic to creating a fluid layout as that is how a div behaves by default. Just put text in a div and it will fit on every device known to man.
The problem is when designers get in the way and start restricting things to behave as if the web was paper. It’s not.
The concept is simple (but it’s not always easy) and to create a fluid layout to fit on as many devices as possible you have to ensure your design can adapt as you open and close your window. Normally this would mean using a max-width that is suitable for large screens (nothing too wide though as that is just as bad - around 1280px max usually but depends on text size).
As you close your browser window there will come a point where something just doesn’t fit (or if you are designing mobile first the opposite is true) and at that point you will need to change the design so that it adapts and you do this with media queries using the current width as the breakpoint. This could simply be moving three columns into one column for smaller devices (or vice versa for the mobile approach). In that way you end up with a layout that works through the whole range and collects all devices on the way without ever needing to know anything about device width.
width: 724px;
I was looking at the width i set for my container.
I actually pulled this value from another similar css layout.
was wondering how to best estimate the value that i need for this section or other layouts. any advice is appreciated.
724px is probably too small unless you have a minimalist design but will look lost on my 27" imac. It’s fine for odd sections though but again it should really be a max-width anyway so that when you close the window the nav can move below the logo and the site can get smaller and smaller without a scrollbar appearing. That should be your goal these days.
Testing browsers is easy. Just download all the main ones and test your design as you build. Older IE is a challenge though and an old spare computer is useful for loading older versions of IE to test (most of us have chucked out old computers but they are useful for testing even if they don’t work very well). You can set up virtual machines for IE but I find that too much trouble for a computer illiterate like me.