Top 3 Reasons you’ll love CSS Overflow
I have been working on a few pages for a few weeks now, and have seen the magic of overflow. And I’d really love to share what I’ve learned.
1. Remember the clearfix workaround I shared a few months ago? Here’s an even easier way.. [if you’re stranded between floated divs, and need something to clear the float so that your container can actually hold the two divs?] You can try overflow:auto; on your container div.
<div class="container">
<div class="left">Left!! </div>
<div class="right">Right</div>
</div>
You css could look like this:
<style>
.container{
overflow:auto;
}
.left{
float:left;
width:200px;
}
.right{
float:right;
width:250px;
}
</style>
Round Submit Buttons -Almost!
This month, one of the most challenging tasks I had was with Rounded Submit Buttons. They’re not really rounded, they just have this slight rounded edge on all four sides. I just couldn’t figure it out on my first try and so I settled for a floated approach. Until yesterday, I needed two floated left buttons to show up on the center of the page. And well, to make the long story short, two floated left buttons are just too shy for center stage. 
So, I decided to take on a new approach.. one that will grow with the button:
Read more
February 29
I really wanted to make sure I post today because.. today is the most ‘different’ day of the year. Well at least it doesn’t show up until after 4 years.
My workaround-of-the-day is commonly known as clearfix.
I heard it from someone that we should avoid using HTML tables, or at least use them wisely. So, I checked out a few css files (and learned of floats), and read of ‘clearfix’. When I was working with facebook apps, adding ‘clearfix’ when I had floats, sure worked wonders.
A float works most with columns, take for example, this blog’s theme. The posts are written on a floating(left) div while the sidebars are floated right. The problem comes in, when we need another div as a footer. You see, a float takes the div out of the normal flow (thus the name ‘float’). So, the parent div of the divs will not ‘contain’ the float normally (OR it means, that the parent div will not get the height of the floated divs) .
What we’d use here is: clear:both; (for the footer).
Also, you might wanna make sure that if you have floats, and have more than one column, and they are kind of width-dependent, your floats will not expand. Because sometimes, when our floats gets added content, the widths expand, and this could cause our divs to run down. [And totally break your design.. ]. I usually solve this problem using ‘overflow:hidden;’ 