CODEWITHSUNDEEP
csshtml
paul
paul

Reputation: 95

Span inside div doesn't style correctly

I want to use span inside div

div is used to put a red horizontal line

<div style="background-color:red;">
</div>

span is used inside div to put elements to right

<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>

But the horizontal line do not get red color, only ABC is shown in right, infact there is no effect of div style like width:900px......why?

Upvotes: 2

Views: 4707

Answers (4)

Gopikrishna
Gopikrishna

Reputation: 857

You need to add the property overflow:hidden; in your DIV. Below I mentioned the Code:

<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>

Upvotes: -2

Joost
Joost

Reputation: 4134

The float is not giving your div any height. You need to follow it up with a clear. Try this:

<div style="background-color:red;">
  <span style="float:right;">
    ABC
  </span>
  <div style="clear: both;"></div>
</div>

Upvotes: 2

Madbreaks
Madbreaks

Reputation: 19549

I'd suggest:

<div style="background-color:red; text-align:right;">ABC</div>

Otherwise, you need to add overflow:auto to your div's style definition if you do want to leverage the <span> as in your original example.

Cheers

Upvotes: 5

j08691
j08691

Reputation: 208030

Add overflow:auto to the div:

<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>​

jsFiddle example

Floating the inner span causes the div to essentially collapse, and adding the overflow rule allows it to regain the span.

Upvotes: 4

Related Questions