Confusion about div — why is it not as wide as its contents, and how can I center it?

Question

Question by Basit

Please note: I am new to CS. Brand new.

I want my button div to be placed horizontally inside the confirm div: example.

Right now my dialog-button div width is equal to the width of the confirm Div. Why?

I am just placing two buttons inside my Div, so it’s width should be equal to 128 (the total of two button witdh). Similarly the height should be equal to button height, but it isn’t.

Second i want that mt button-div placed center horizontally . I tried left: 50% inside my button-div. But it is aligning the left margin with the centre of the confirm div. How can i do it?

EDIT
————————————————–

enter image description here

Answer 1

Answer by Starx

Starx

May be I didn’t understand correctly, but if you want it inside then put it inside.

<div id="message">

    Are you sure you want to  

    <div id="dialog-button">
        <button>Ok</button>
        <button>Cancel</button>
    </div>             
</div>

Demo

Update 1

Right now my dialog-button div width is equal to the width of the confirm Div. Why?

Why, because <div>s are block tag, they always take 100% width of the containing element. It is not equal to the width of confirm Div.

To make the dialog-button take the actual width use display: inline-block as its CSS. Demo

Update 2:

To the best from what i understood. This is what you want. If not help me help you.

Update 3:

Ok, here is a demo with the image. I will leave the without image part to you. 😉