Hi,
I came across a debate today discussing the use of display: inline-block; rather than float. I'm using the float method for my application but from what I read that's incorrect.
So I've done a test case and something's not adding up. Please see the analysis below:
Using float
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 700px;
height: 200px;
margin: 0 auto;
color: #ffffff;
background-color: #FF0000;
}
#div_1{
float: left;
width: 200px;
height: 200px;
background-color: #000000;
}
#div_2{
float: left;
width: 200px;
height: 100px;
background-color: #669900;
margin: 20px 0 0 0;
padding: 40px 0 0 0;
}
#div_3{
float: left;
width: 200px;
height: 200px;
background-color: #333333;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
</div>
</body>
</html>
Comments: 1. The parent element collapses if no height is stipulated.
Using display: inline-block;
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 700px;
margin: 0 auto;
color: #ffffff;
background-color: #FF0000;
}
#div_1{
display: inline-block;
width: 200px;
height: 200px;
background-color: #000000;
}
#div_2{
display: inline-block;
width: 200px;
height: 100px;
background-color: #669900;
margin: 20px 0 0 0;
padding: 40px 0 0 0;
}
#div_3{
display: inline-block;
width: 200px;
height: 200px;
background-color: #333333;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
</div>
</body>
</html>
Comments: 1. The parent element doesn't collapse if no height stipulated.
2. This adds a few pixels spacing between the divs.
3. When I add margin-top of 20px to div_2 it adds it to div_1 and div_3.
4. When I add padding-top of 40px to div_2 it simulates adding a margin-top of 40px to div_1 and div_3. (How would I get div_1 and 3 back up?)
Using the float method I always stipulate the parent elements height to negate the collapsing issue and it always seems fine.
But if I need to change it all to use the display: inline-block method the comments I've made would really cause me an issue. As you can notice as soon as I started to add margins and padding all sorts of issues were produced. I even put another div inside the div 2 and added the margins and padding to that but still didn't change it's behaviour.
What I'd really like to know is, is it ok to use the float method or do I need to start from the beginning learning css.
If I do any pointers as to how to make the display: inline-block script display the same as the float script would be a really helpful start.
