0

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

Basit
  • 8,426
  • 46
  • 116
  • 196
  • 1
    Just a slightly off-topic remark: you shouldn't write `-webkit-border-radius: 15px; /*Opera, safari*/`. Opera simply uses `border-radius`, and other than that, it has `-o-` instead of `-webkit-` for its custom properties. – Mr Lister Mar 02 '12 at 08:37
  • If you want the buttons centered inside their `
    `, you could just apply `text-align: center;` to the `
    `. See http://jsfiddle.net/Zfa2v/9/
     – Paul D. Waite Mar 02 '12 at 08:47
  • @PaulD yes you are right but suppose that i remove the image and spacer Div. Then both the message Div and button div are still at their positions. I want that they adjust automatically inside the container div. If i use icon, then this should be the layout as your demo, But if i do not provide icon, then message and button div should adjust(move horizantally) automatically. Is it possible ? LIke without icon the message div left and right margin should become 20px and the button div move accordingly in the center – Basit Mar 02 '12 at 09:20
  • @PaulD.Waite Also if i set my button-div style `display:inline-block`, then text-align centering isn't working? Now the button-div is not centering. – Basit Mar 02 '12 at 09:24
  • @Basit: “suppose that i remove the image and spacer Div. Then both the message Div and button div are still at their positions.” Ah, I see — it would help if you’d stated that in your original question. The way I coded it in my example, I added 104px left padding to `#confirm`. You’d need to remove that along with the image. – Paul D. Waite Mar 02 '12 at 10:07
  • @Basit: (I think you were originally trying to avoid using padding to position the message and buttons by floating the image and using `overflow: hidden` on the message and button containers, as per http://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width/2251833#2251833. I’m not sure why that approach didn’t work, but if you’re still having trouble with it, maybe you could ask another question explaining that issue.) – Paul D. Waite Mar 02 '12 at 10:07
  • @PaulD.Waite If you increase the text in paragraph, note that image is still in the center. No matter how long or small the text is, the image center itself vertically automatically. Now i want that if image not present then message Div and button div do the same i.e. align it self automatically horizontally:) Anyways i will definitely ask this in different post:). Thanks :) – Basit Mar 02 '12 at 11:16

2 Answers2

1

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. ;)

Community
  • 1
  • 1
Starx
  • 77,474
  • 47
  • 185
  • 261
  • check out the link. I did the same thing. I didn't understand your answer. May be you read the question incorrectly... – Basit Mar 02 '12 at 08:08
  • @Basit, have you seen the updates? Is it the solution you were looking for? – Starx Mar 02 '12 at 08:49
  • yes this is exactly what i was asking:). HHmm it means by default block level elements take 100% width or height of their container. But if we want it to restrict to height and width of the containing element, then we should use `display: inline-block`? Is it? Also i want to now center the button-div horizontally inside container div. Thanks – Basit Mar 02 '12 at 09:10
  • No , right now in your demo the button-div is left align with the conatiner div. I want the buttons, as buttons are in the button-div now. So now i want that this div should placed in the center, like in other text boxes, buttons appear in the center not on the left. Hope now you understand what i want. Thanks – Basit Mar 02 '12 at 09:48
  • “Defining inline-block makes the element to extends to the size of its containing element.” — I think you’ve made a mistake there. `display: block` makes an element extend to the size of its containing element; `display: inline-block` makes an element extend to the size of its *contents*. – Paul D. Waite Mar 02 '12 at 10:03
  • @PaulD.Waite, I was trying to write `containing elements` by which I was trying to mean `its contents`. ha ha. Thanks for the correction. – Starx Mar 02 '12 at 10:24
  • @Starx: aha — yup, ‘containing’ is a bit ambiguous now that I think about it. No worries, just wanted to make sure everyone was on the same page. – Paul D. Waite Mar 02 '12 at 10:26
  • hhhmm you can say. But now you place button-div inside message div. Ok. But What do you say about this [link]http://jsfiddle.net/Zfa2v/11/. Now the text and button-div is on the same line – Basit Mar 02 '12 at 10:52
  • @Basit, I think I have wasted a lot of time guessing, what you want. Why dont you draw a quick image and I will see what i can do to get it. – Starx Mar 02 '12 at 11:14
  • I am sorry, but i didn't mean to bother you. I used JSFiddle. This is my first time that i am using this. I posted my code there, so you guys understand what i want. I came to now about JSFiddle yesterday. Yes you are right that i should made an image and post here that what i want but believe me, this idea didn't come to my mind. I thoudgt JSFiddle is enough. Anyways if you hurt then i am sorry. I said that i want to place button-div, center horizontally, inside container Div. May be my sentence is wrong. But thanks you help me alot. As a newbie i learn something today – Basit Mar 02 '12 at 11:27
  • @Basit, No, I am very happy help you. I am part of Stackoverflow family, and I am here, cause I want to help other and be helped for my problem as well. The only thing, is that I have wasted a lot of time, guessing the correct output. I could have helped you correctly long time before. So, please create a simple image, I will help you my best. :) I am not hurt, no worries. – Starx Mar 02 '12 at 11:39
  • I am editing my question, there you can see the picture, that what i want. I drew the shape but both shapes are of same width and height:). my drawing is not good :) – Basit Mar 02 '12 at 12:03
0

The div which the two buttons are in is actually the width of the of the comfirm div. The reasons why divs stretch to the width of their parent, is because that is block level element.

the reason every thing seems so confusing is that you have a lot left floating divs in your example. These are changing how things would normally laid out. To make things simpler why dont you try removing some of the more confusing elements. I suggest trying a more simple example like the one below:

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/ie-css3.htc" type="text/css">
        <link rel="stylesheet" href="css/messageDialogStyle.css" type="text/css">
        <script type="text/javascript" src="js/jquery-1.7.1.js">
        </script>
        <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js">
        </script>
        <script type="text/javascript" src="js/puff.js"></script>
        <script type="text/javascript" src="js/jquery.dialog.js"></script>
    </head>
    <body>
        <div id="confirm">        
            <div id="message">
                   Are you sure you want to  
            </div>
            <div id="dialog-button">
                <button>Ok</button>
                <button>Cancel</button>
            </div>
        </div>
    </body>
</html>

If you want to center a button. If you change the margin-left and margin-right to auto you will center any block element. try changing your css to the css below:

#confirm {
    background-color: #ddd;
    display:block;
    width:400px;
    min-height:120px;
    position:absolute;
    border:1px solid #ccc;
    border-radius: 15px;
    -moz-border-radius: 15px;              /*FireFox*/
    -webkit-border-radius: 15px;           /*Opera, safari*/
    behavior: url(css/border-radius.htc);  /*IE*/
}
#message {
    width: 280px;
    border:1px solid #ccc;
    white-space: normal;
    word-wrap: break-word;
    margin:20px 0 0 0;
    overflow: hidden;
}
#dialog-button {
     border:1px solid #ccc;
     position: relative;
}
button {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 64px; 
}

Note if you have to make the button a block element for the margin auto trick to work.

You can find more about block level element here.

user1239299
  • 665
  • 8
  • 26
  • hhhmmm, But in your case buttons are on different lines. It means button is block level element. So to place button on one line, i should use `display: block-inline`, as suggested by the **Starx** in his post This will place two block level elements on one line. And now the width is equal to the sum of two buttons. Am i right? Thanks for the link. At-least now i am clear about block and inline elements :) – Basit Mar 02 '12 at 09:07