Re: centering a floated item

[thelemondropkid]

The reason why your centre column is not centering is due to the fact that there are 2 major errors in your code that you need to fix first.

1. You have a div with ID of ‘page-wrap’ that contains floated elements.
You have given all your ‘columns’ a fixed width but not the containing div. One of the CSS rules states that when a element contains floated, in needs to have a fixed width (or em based). What is happening is your right ‘column’ is floated right but has no boundaries as to what point it will float. The wider your browser is made the further that ‘column’ floats.
So therefore, add a 800px width to div ‘page-wrap’ and give it the boundary it needs. (200px + 400px + 200px = 800px)
That will now but all three ‘column’ right against each other. That takes care of one problem.

2. The next problem in your code is pertaining to the above mentioned containing ‘page-wrap’ div.
As it contains floated elements, you not only need to give it a fixed with like we have done, but, you also need to take care of it´s position in the ‘flow’ of the document. Your three ‘columns’ are floated and are taken out of the ‘flow’ of the document. The problem is this: ‘page-wrap’ has no float but contains floated elements and therefore does not ‘wrap’ the floated elements it contains. In order to do this, add ‘position: relative’ to page-wrap’ or float it too. One or the other would do but I would use the first mentioned property. The reason why i would use ‘position: relative’ is that if you wanted to place a ‘footer’ div below that needs to ‘clear’ all your ‘columns’, it would clear the containing ‘page-wrap’ div too, witch is not what you want.

Hope that helped you and did not put you to sleep.

Q.