1

I am new to Css. I don't know whether this question had answer or not. Actually i have a page

<body>
    <div id="confirm">
        <img src="images/help.png" alt="Help Icon">
        <div id="message">
            Are you sure you want to  deletesadcasdsaduasudashdhasdoiasnidosanidoasyduiasnduasnoidnasidonasiodashydioasndoiasndioasdhioasydoiasndioashydasiodsaoidasd

        </div>

        <button>Ok</button>               
    </div>

</body>

I am setting his style. Here is my css

#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*/
}

#confirm img {
    border:1px solid #ccc;
    margin:20px 20px 0 20px;
    float:left;
    width:64px;
}

#message {
    width: 280px;
    border:1px solid #ccc;
    float: left;
    white-space: normal;
    margin:20px 0 0 0;
    overflow: hidden;
}

#confirm button {
    position: relative;
    width:68px;
    margin:20px 180px 0 0;
    float:right;
}

Right now when i run my code it produses output like this

enter image description here

Now i want that no matter how large the text of the "message div" is. The "confirm div" automatically adjust their size and as well as positions all the elements inside it. Like right now i have set "confirm div" "min-height = 120". As you see the text is cropping. The text should not be cropped, The size of message div should increase automatically depending on the size of text. As message div size increase, the confirm div also increase in height, confirm div adjust the image and button in it. Finally all the elements should be inside the confirm Div. Or you can say that the message and image should always be remain in the center of the div. How can i do it?

Thanks

Thanks

2 Answers 2

1

your message text has no white space and has a verrrry long word in it, you need to all that word to be broken to auto size the div

Add

word-wrap: break-word;

to the CSS for #messsage

JSFiddle

Update

Ok that proved difficult but does this work for you JSFiddle2, I've added another div and put the image in that one, its positioned absolute not float so can centre the image. Also had to add another div thats floated as the image was to force the message to be in the right place.

5
  • Thanks:) But i also want that the image should always be in the mid of my confirm Div. How can i do that? I mean to say, as my message Div is increasing, the image top should also move. Thanks
    – Basit
    Feb 23, 2012 at 12:08
  • Perfect:) Awsome...Thanks:) But i want to ask another thing..Does position matter in css. Like if i have a div, and i first define width, height property, then define border property and then define float property and so on. Then i shuffle the position. Now i define first transition property, then linear-gradient property, then border property, the width and height and so on. Does this thing makes any different in css. Actually i am asking this because i follow your trick but have properties defined on different places, centering didn't work, then i copy paste your trick and things are ok.
    – Basit
    Feb 24, 2012 at 5:17
  • Also why the #confirm img{} div does not accept changes. Like in the #confirm imag div you set border. But when i change it to border:1px solid red;. Then there is no red color. Also if i change the width from 64 to 100 width:100px;. Then there is no effect. Why this is happening? Thanks
    – Basit
    Feb 24, 2012 at 5:38
  • Also you set margin-top: -32px;. If i change it to 32 then it is not center. Why? 32 is half of height 64.
    – Basit
    Feb 24, 2012 at 5:40
  • @Basit - your are right on the width:100px and the vertical-align not doing anything, sorry but I left them in while trying to get it to work. the margin-top:-32px is as you rightly noticed, 1/2 of the height, this makes the top:50% and and margin together vertically center the fixed 64px high image. As for if the order of properties in a CSS block matter, I've done a quick search and it doesn't appear that it does.
    – Dampsquid
    Feb 24, 2012 at 10:12
1

word-wrap: break-word; will serve the purpose.

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

DEMO

UPDATE LIKE THIS middled from top?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.