explanation of display: inline and overflow: hidden

[AffiliateDreamer]

Hi,

I'm analyzing this CSS file to better learn tableless design using the float method (forgot the name of this style, I know the other one is called absolute positioning).

Basically there is a outer div tag that defines the width of page, and then a 3 column layout that has 1 div tag that is floated to the left, then another to the right while the main contain section is just left alone and somehow gets centered between the two floats (not sure how that works).

So its:

<div id="container">

<div id="leftcolumn"></div>

<div id="middlecolumn"></div>

<div id="rightcolumn"></div>

</div>

body
{
display: block;
}

#container0
{
width: 800px;
}

#leftcolumn
{
float: left;
display: inline;
overflow: hidden;
width: 140px;
}

#sidebar
{
display:inline;
overflow:hidden;
width: 140px;
}

So can someone explain what display:inline and overflow:hidden actually do?

And how/why does the middle column magically get defaulted between the two outer columns that are floated to left and right respectively?

Also what does display:block do?

[sgietz]

Inline won't start on a new line, whereas block does.

overflow:hidden simply means that, if the content of a container exceeds the area/space of the container, it gets cut off (becomes hidden).

[Xapti]

To expand on what the other person said...
overflow: hidden not only cuts off, but does not allow you to scroll (or display a scrollbar)
There's Also overflow-x and overflow-y, But those Are only supported by Firefox and IE I think, and not by the W3C.

Also, take a look at this:
[w3.org...]
yo can read the entire page... but also keep in mind the part that I pointed to (#q24 "9.7 Relationships between 'display', 'position', and 'float'")

Display:block seems totally pointless for the body, AFAIK, unless it's some sort of layout fix you're using.

You can't float:left and display:inline at the same time, like I pointed out in the link. When something is set to float, it's taken out of normal flow, and set to display:block. It does not mean it will take up it's own line though, because it's out of normal flow. Therefore, as long as it doesn't cause problems, you should remove the display:inline on your floater.

[SuzyUK]

You can't float:left and display:inline at the same time,

it's true, elements that are floated are supposed to ignore the display property so it should be unnecessary BUT the reason it could be there is that it is a cure for 2 x IE6 bugs.

One being the Double Margin bug, the other similar Duplicate Indent bug, because of this some coders add display:inline; to all their floats to avoid any IE errors. As everyone else ignores it it causes no other problems that I'm aware of. It should perhaps be in a conditional (separate IE file) to highlight that it's a workaround though.

overflow: hidden on the same elements could also be to stop the expanding box problem, which is also IE6 and below. long links or words would cause the floats to expand widthways and perhaps break the layout if it weren't there.

display: block on the body is not necessary as the body element is a block

the #sidebar in the above code is not floated - so it will display as an inline element, in which case the width (and therefore overflow: hidden) is of no use, inline elements do not accept widths

Suzy