March 2, 2012

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

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 by 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. 😉

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!