CODEWITHSUNDEEP
htmlcss
ben
ben

Reputation: 29777

Why isn't max-width working in this situation?

jsFiddle

In this example the two quotes both have the same width. What I want to happen is that the quote's width is determined by the length of the quote, but it cannot go over 200px.

So the first quote should have a width of 200px, but the second quote should dynamically be 60px, ending just after the 5 in the first line.

How can I do this?

CSS

.inner_quote {
    background:RGBA(255,250,205,.4);
    margin-left:50px;
    max-width:200px;
    display:block;
}

HTML

<span class="inner_quote">
    1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 
</span>
...
<span class="inner_quote">
    1 23 345
    <br>
    5552
</span>

Upvotes: 1

Views: 1258

Answers (3)

Amit Gupta
Amit Gupta

Reputation: 577

property-display:block tries to take up all the available width.

Since you mentioned the max-width property to 400px in the first span it wont go further. Though in second case pixels are requiered less but display:block property stretches the container as much as possible and is then restricted by the max-width mentioned.

property-display:inline-block will solve this issue as it maintains the block structure and just takes the space that is required by the container.

Upvotes: 1

Gary Ryan
Gary Ryan

Reputation: 754

have you tried display:inline-block?

Upvotes: 4

Ian Wood
Ian Wood

Reputation: 6573

The width issue is down to your display: block; on .inner_quote; block will fill available width...

Now you can fix this by floating (float: left;) but you will need to do some float clearing to keep it tidy...

Upvotes: 0

Related Questions