homepage Welcome to WebmasterWorld Guest from 54.226.168.96
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Float vs display: inline-block;
Orangutang




msg:4581389
 6:01 pm on Jun 5, 2013 (gmt 0)

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.

 

lucy24




msg:4581466
 8:55 pm on Jun 5, 2013 (gmt 0)

"float" and "inline-block" are different things used for different purposes.

Here as elsewhere, it tends to work better if you first figure out, in English (or human language of your choice), what you want the element to do and how you want it to behave in different circumstances. And then set up the code to make it do what you want.

So you can't lay down a general rule saying Always A or Always B. Code for the specific situation.

Orangutang




msg:4581601
 9:17 am on Jun 6, 2013 (gmt 0)

Hi Lucy,

Thanks for the reply and confirming that using float is a perfectly correct method of coding. I'm building my first on-line application and using float did everything I wanted but when I read this debate some of the experienced designers were making comments like

"Floating divs next to each other is a new method of using tables and like tables they will be extinct soon"

"One even said they never ever use float and if you did it shows you know nothing about designing websites"

This is what I needed to clear up which you have done. Thanks for putting my mind at rest and I can now look forward to spending the day producing rather than double checking what I've already done.

DrDoc




msg:4581702
 4:16 pm on Jun 6, 2013 (gmt 0)

Just because I hate when bad advice floats around, let me second what lucy24 said:

Floating elements are a perfectly viable solution, as are inline-blocks. Neither is a one-size-fits-all solution. In most cases, only one of them is the right solution for a particular scenario.

As for the bad advice you were given elsewhere -- tables are not extinct. Never were. Never will be. They were just never meant for page layout design.

Use the right tool for the right job, whether that be tables, floats, inline-blocks, iframes, whatever ...

Orangutang




msg:4582071
 1:29 pm on Jun 7, 2013 (gmt 0)

Hi DrDoc,

Thanks for seconding the advice Lucy gave me. One of the main reasons I joined WebmasterWorld is because of "the advice" I've found on the net.

As a non-trained person I read books and search the net in order to learn the technology to be able to build the applications I want. But the amount of times I've tried something only to find for instance it was incorrect advice or browser compatibility was not taken into consideration or something else or something else has made a complex task a lot harder.

When I read you shouldn't even use floats I couldn't believe it, due to my lack of experience it made me think everything that I'd done to date was wrong, you can imagine what my first thoughts were.

So thank you both for the advice and enabling me to move forward instead of spending my time analysing information that makes no sense.

Once again onward and upward as they say :-)

ergophobe




msg:4586784
 10:54 pm on Jun 22, 2013 (gmt 0)

"Nothing is good or bad, but thinking makes it so"
-- Shakespeare

Floats... very handy, but also troublesome as floated elements, for example, can overflow their container unless you do something ("clear" it or trigger haslayout etc).

Floats can change things in ways that may not be expected: an element that is "display:inline" but is floated computes margins and padding as if it were "display:block"

A great resource on floats is this:
[css-101.org...]

On the relationship between float and inline-block, see

slide 25 - display: inline-block triggers a block formatting context (BFC)

slides 49-52 cover "floats versus inline-block"

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved