Convert div to span with CSS

Question

Hi,

I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.

How can i do this and keep the styles that already have been defined for the footer?

Thanks in advance!

Edit

div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}

Answer 1

Try adding overflow:auto; to your span. Also add display:block;

Answer 2

To convert a div to a span, simply add:

.myDiv
{
   display: inline;
}

But I'm really not sure that this is the solution you're after.

Answer 3

how if add this:

position:relative /optional/ float:left; left:0px;

i always do this before i know to use span .. when i first learn css i always do to my element content

Answer 4

If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.

Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc. You still need the body to be contained in a block-level element.

Answer 5

Quote:

there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer

Solutions:

• Remove empty div(s) from HTML
• Remove empty div(s) by adding display:none
• Reduce height of the div(s)
• Reduce margin or padding of the div(s)
• Set position:relative; top:-[yourownnumber]px to .footer

Answer 6

As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.

However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:

display:inline-block;

What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).

Could this be the answer you're looking for?