CODEWITHSUNDEEP
css
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

Reduce the width of a <div> block using css

This is the page I have created :

enter image description here

I want to reduce the width of the block which has the orange color as a background-color, without using a number in the property width, is there any other method to do that ?

I tried float:left; and it worked but it goes to the left I want the width to be detected automaticly due to the text lenght and in the center of the html page.

Upvotes: 1

Views: 5973

Answers (2)

Matt Ball
Matt Ball

Reputation: 359776

One solution is to add a wrapper element around the div:

<div id="outer">
    <div id="inner">Vous avez acheté 6 pieces, le total à payer est : 200DH</div>
</div>

and then:

#inner {
    display: inline-block; /* for the background */
}

#outer {
    text-align: center; /* for centering */
}

http://cssdesk.com/Y8SB8

The wrapper is, of course, unnecessary if the div's parent already has text-align: center.

Upvotes: 3

Christian
Christian

Reputation: 19740

Well if you want it to be centered, with an auto width, one option would be to treat it as an inline element.

display: inline;

or:

display: inline-block;

Assuming the parent element has text-align: center, this should be sufficient.

Upvotes: 2

Related Questions