I have a new client that I did a website mockup for. I have attached it. I am slicing it up according to the sections that I will need…header, nav bar, main content, content boxes, and footer. The content boxes are going to be new for me. I just want to make sure I am thinking about the CSS for this correctly. I will have a top, middle and bottom for the boxes so that they can expand. Would I use margins and padding to get them placed where they are in the mockup? I will be using a 2 column layout. Not sure if floats would need to be used for the right column. Please let me know if my thinking is correct or tell me where I am incorrect in my thinking. Thanks.
You are correct, the site you are designing is very common. It is called a two column layout. You are best off searching for “two column layout css template”. You can then download and instead opt to change the images and content to your liking. People have already designed this layout for you many times over, don’t reinvent the wheel.
I’d suggest quite the opposite
Code out what you have already, without thinking about the design. Then apply CSS to suit.
Using publicly available code is a quick way of learning bad habits I always handwrite all of my code, I’m sure many other people here do too.
Check out the layouts at Pauls site.
He has a good number of 2 col layouts there
Disclaimer: Paul’s site is one of the rare places that you won’t pick up bad habits (:
His site is the only site I ever recommend because with almost every other site there is always something that I’d do differently and something slightly wrong.
Paul codes exactly how I like it
I gacve Pauls site in hopes of pointing out how the layouts are done. You will still need to design the site though
Yes float both columns and make the columns the width of those boxes so that you don’t need to position the inner elements but just position the initial column.
The columns will be moved into position with margins.
Float the left column to the left and use a left margin to move it over (remember the ie6 double margin bug so add display:inline).
Float the second column to the right and move it into position with a right margin (again take care of the double margin bug in IE6).
This will allow breathing space in the middle of the page and the layout won’t break if you are a pixel out somewhere.
Remember to clear both columns or add clear:both to the footer if it is in the same parent container.
Stack the round boxes in the columns and they will need no positioning except perhaps for a margin-bottom where required. If the layout is fixed width then a top middle and base approach is easier that applying multiple corners.
Make sure haslayout is in effect on each complicated container.
As mentioned above it’s always good to see how someone else has achieved a similar layout but it’s also good practice to make the code your own although you don’t always have to re-invent the wheel - just change the tyres
Thanks for the site comments guys