Comments on: CSS: What's the difference

By: Code Novice

Code Novice — Tue, 30 Nov 1999 00:00:00 +0000

CSS Defs & Lorem Ipsum
Hey, who knew there was Imitate Jenni Week? I…

By: Julik

Julik — Tue, 30 Nov 1999 00:00:00 +0000

To onderstand the difference between 'display:block' and 'display:inline' you have to know a few things.
Basically, HTML elements are divided into 'inline' and 'block' elements. Block elements include DIVs, lists, list items, paragraphs, headings, blockquotes etc.
If you put, say, 2 consecutive block elements in a page they will reside one UNDER each other (this is what happens if you put a few headings one after another. If you assign a border to them, you will see that they span from one side of the containing block (body is a block too BTW to the other. This is the behaviour for blocks.
Inline elements, in contrast, are positioned like words in a paragraph - one after the other, this is what happens if you put, say, 15 links one after the other in your code - they will follow each other and flow to the next line when there is little space.
The 'display' property allows you to override the default display of a particular element - for example, if you make the

tag inline - the list items will go one after the other like words in a paragraph.
And vice-versa - if you make the a tag block - it will occupy it's own line in your layout.
Overriding these properties is very useful for configuring custom backgrounds of elements (for example, left-padding property for an inline element gives you padding ONLY in the first line of this element, while padding-left on block element gives you padding for the whole box.

By: Jesus Piña

Jesus Piña — Tue, 30 Nov 1999 00:00:00 +0000

Sorry I forgot to put the link.
http://brainjar.com/css/positioning/
Take a look at it and see what happens.

By: sosa

sosa — Tue, 30 Nov 1999 00:00:00 +0000

i've found float position to be so much useful than absolute. But it can be so hard to understand in the first time. Floatutorial is an very good step-by-step resource for learning floats http://css.maxdesign.com.au/floatutorial/.
Also you could check Listamatic and Listutorial to see how can block and inline display property work in making unordered lists in navigation bars.

By: Jesus Piña

Jesus Piña — Tue, 30 Nov 1999 00:00:00 +0000

I was in the same predicament as you are and I found thsi tutorial about positioning that I think could be very helpful. In my opinion this the one tutorial that really gets me closer to understanding positioning.
Just my 2 cents.

By: Jennifer

Jennifer — Tue, 30 Nov 1999 00:00:00 +0000

One thing I noticed looking at some code - a useful display:inline; usage is on the form tag (depending on your layout) it's driven me crazy in some layouts that form is a block element…

By: Billy

Billy — Tue, 30 Nov 1999 00:00:00 +0000

A small point about relative positioning: In your example, your element will appear 320px from the left of the page, but there will still be a hole on the left side of your page where that element fits into the flow of the document.

Basically, a relatively positioned element is positioned statically first, then repositioned according to the rules in your CSS. But, this does not effect any other elements on the page. They stay exactly where they are.

By: Vincent

Vincent — Tue, 30 Nov 1999 00:00:00 +0000

Other uses for inline:

You can make lists inline. This can be useful in creating standard templates for pages, and then making the same code for your main menu either go down a left hand collum or across the top of the page.

float:

I use float all the time for blocks. Lets say you have 5 or 6 blocks of text (say, each of them have the last 5 posts in a particular category) if you float each one left (or right) then they'll fit as many as the can across the page, then move down below. As the user resizes the page, they'll refloat.

By: jayseae

jayseae — Tue, 30 Nov 1999 00:00:00 +0000

Your position stuff is just about right. Personally, I don't think that I use any of them.

I also don't really use inline or block - but they can be useful. Say you want to display a heading as the beginning of your paragraph - but then continue text as normal, instead of adding space around it. Change your heading (say,

) to display: inline, and it won't break when it hits it. You could also use a span, styled with the right size information, to do this, and it might be more semantically correct - this is why I don't use the block/inline options. But you can do it that way.

Contrary to the others, I find float very useful. It allows you to "float" an element to the left or right of other elements. Take a look at my page. The main entires have a float (of left). That means that it stays on the left side of the enclosing container, and other elements in the same container, like the sidebar, slides up next to it on the right.

Float indicates where the element ends up in the display - in this case, on the left of my page.

When you use float, make sure you pay attention to your widths. For instance, if you have a page that is 800px wide, and a float: right element that is 300px wide, your remaining elements cannot be more than 500px (actually something like 490px is probably accurate, with padding and margins and borders) or it won't look like it floats. The float moves an element to the side, and allows space for the other elements to move up the page next to it. But if the other elements aren't wide enough, they won't.

The biggest problem with floats is that browsers support width differently - seems to mostly be because of margins and padding and such. So make sure you test it!

Using borders helps, as it can display the border of each element, so you see exactly how the interact with one another.

By: wcoco

wcoco — Tue, 30 Nov 1999 00:00:00 +0000

I've been wanting to know this! There's *nowhere* i could find a proper explanation and not causing futher confusion! Thank you for this.