CODEWITHSUNDEEP
html
Parveez Ahmed
Parveez Ahmed

Reputation: 1417

Wrappning one element with another in HTML

<div>
 <span>oneoneoneone</span>
 <span>twooneoneone</span>
 <span>threeoneoneone</span>
</div>

By nature it displays "span"s in one line without a break.

<div style="position:absolute;background:red">
 <div style="position:absolute">
 <span>oneoneoneone</span>
 <span>twooneoneone</span>
 <span>threeoneoneone</span>
 </div>
</div>

It displays the span elements one below the other. I know it's a silly question,but I am curious to know the fact!My question is that why inline elements behave like a block level elements here? Any good guy from stackoverflow...

Upvotes: 0

Views: 51

Answers (2)

Pete
Pete

Reputation: 58462

span elements are inline elements which means they will always take up the space on a line before wrapping to the next line.

In the first example you have a normal div which is a block level element that will take up the whole line (100% width). This means the spans will not wrap unless the width is less than all three words.

In the second example, you have an absolutely positioned div. As you have not given this div a width, it will be as wide as the largest non-breaking element inside it - which is one of the words in your span. As the div is now only as wide as a word, the spans will wrap.

This fiddle shows your second absolutely positioned div is only as wide as the largest non-breaking element

Have a look at this to understand block and inline elements

Upvotes: 0

Dan Goodspeed
Dan Goodspeed

Reputation: 3590

Because by default a is a block element that takes up the full width of the container it's in. "position:absolute" removes that width. If you set "width:100%;" to the elements with absolute positioning, the spans will again be on one line without a break.

Upvotes: 1

Related Questions