Okay let me start by saying this is not a tutorial, really it’s a simple guide that people can expand upon to help with their designs for the web. It’s there to help thos people that do not constantly use grid systems when designing.
Being a Lecturer has definitely taught me a lot about how people combat against challenges they encounter when coding for the web. The typical scenario is the div floated left and the div floated right.
So many people falter at this hurdle they just can’t seem to get the div on the left floated left and the div on the right floated right. Aghhhhhh! they constantly scream as there lines of coding simply are doing nothing.
Have a look at my layout below. It’s sitting perfectly at the minute with nice content on top and then a div on the left with the wakeboarding info and a div on the right with all of my latest work.
Okay but what happens if it was broke like below and we had the div on the left stacking on top of the div on the right.
Now from experience a lot of people at this stage would start playing about with widths and forget completely about a very simple principle. Colour is your friend!!
If you want to fix a simple problem like this give both the div on the left and the div on the right a background colour. Just like below and you will see in most cases where the problem lies.
Okay you should see the right hand side is too wide at this stage. Okay so it may be padding, it may be just your width. Take a print screen and measure the div on the left in Photoshop or think about your layout when you designed it. What width were these column’s. Have you simply got lost in the code and completely wrecked this layout? Possibly.
Go to your stylesheet and enter the correct width for the div on the right hand side. After using the coloured boxes to measure the width it should be, you should now have the result below.
You can now clearly see thanks to the coloured boxes that the divs fit seamlessly side by side.
This tutorial is very very basic but if you expand upon this and use coloured boxes for other areas in your design you will find it a very useful and fitting addition to your toolbox.