0

Or i have been building web pages for too long without a break or something really weird happened.

<div style="background-color:#0F0; margin:5px; height:5px;"></div>

Will result in a long bar of 5 height across the width of the parent div. This should normally not be visible since i gave the div no width.

I tried everything, messed up my whole CSS layout and nothing seemed to get rid of it. I even check some divs of me in that same project that still work like this.

So i opened a new project and just filled in that line above to make sure there wasn't some style setting messing things up. But still there is a green bar showing.

I just want my div to be the size of the text in it.

Again, i could be seeing things but this happened all of a sudden and i'm really clueless...

Improve this question
1
  • 2
    Code first, explanation later. Commented Apr 11, 2012 at 14:07

5 Answers 5

Reset to default
1

use display:inline because a div element automatic get the display:block

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Your div must have display:block either in your code or inherited from your browser.

change it to display:inline for your desired outcome.

Example here. http://jsfiddle.net/Hn2xP/1

Improve this answer

5 Comments

This did the trick on the example, but i never had to do that just befor this happend? I hope it works in my project as well.
your probally thinking of a "span" element, which by default has "display:inline"
@MennoGouw and welcome to SO, dont forget to accept an answer :)
No i almost never use spans... this is so weird. I'll add some extra code showing what i normally do and works soon.
its been this way my whole career, almost 10 years
1

Break the document flow

By default, div element has it's style display property set to block, what makes it's width to fill the dimensions of parent.

You have two options to make it clip to text, position: absolute or float: left (right works also, depends), as in:

<div style="background-color:#0F0; margin:5px; height:5px; position: absolute;"></div>

or:

<div style="background-color:#0F0; margin:5px; height:5px; float: left;"></div>

For more information, see CSS Floats and/or CSS Positions.

P.S. Bear in mind, that absolute position and/or floated element will remove it from document flow.

span instead of div (display: inline)

If you want to keep the document flow, use span instead of div - it's display property is inline by default, as Blowsie suggested.

<span style="background-color:#0F0; margin:5px; height:5px;"></span>

display: inline-block

There is also an option with display property set to inline-block, but it's compatibility is limited. See CSS Display property information for more details.

<div style="background-color:#0F0; margin:5px; height:5px; display: inline-block;"></div>
Improve this answer

Comments

0

Usually a padding issue. Difficult to diagnose without seeing code or example of site error.

try:

div {padding: 0px;}

in your css

Improve this answer

1 Comment

this, imo is incorrect , its clearly a display:block / display:inline issue
0

By default, the width of a div is auto, meaning that it will fill the entire available content. To have "no width" as you seem to want, set the width to zero explicitly. Or, use one of the other answers...

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.