This website is a showcase of my digital creativity ranging from C++ to wallpapers to website development, and a bit of photography as well. Feel free to have a look around and leave some feedback.

So, if you're new to web design like myself, you've probably come across quite a few problems when designing layouts. One of the most common problems i find myself stuck on is the hanging float; this is where you've floated a <div> which is inside a container <div>, and the container <div> fails to expand and encase the floated <div>.
There have been many solutions to this problem posted all over the internet, but today i offer my own solution (even as inelegant as it is).

My solution is to have a floated sub-container <div> within container <div>, because floats always stretch to encase their child elements. If you have a look at the CSS for this page, you can see i've used a container (#MainWrapper), and a sub-container (#SubWrapper) where the main container is used to position the sub-container on the page.

The CSS would look something like this for a centred <div> with:

• A floated container inside
• Two divs horizontally aligned next to each other

The end result looks something like this:

Sadly, this leads to the problem of having two unequal sized <div>'s, and also another problem to do with the main container. See my next post on how to solve these using javascript.