Home/ Questions/Q 7558393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T12:21:39+00:00

I am new to Css. I don’t know whether this question had answer or

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0