CODEWITHSUNDEEP
htmlcssresponsive-design
4t0m1c
4t0m1c

Reputation: 329

Paragraph element expands a div to max-width before line break

I'm developing the front end for a web app in plain html and css which will be handed over for further integration.

The Goal

I want to create a dynamic notification element that fits the size of the paragraph until the max-width is hit and the paragraph breaks to the next line.

The Problem

The div is only taking on the longest words width or the min-width and not expanding fully until hitting the max-width.

I would like to keep it all in CSS but I suspect I might need some JS for this and if so, please point me in the right direction. =)

HTML

<div class="noti"><p>The notification text will appear over here, and spill over to the next line if long enough.</p></div>

CSS

.noti {
    height:auto;
    min-height:50px;
    width:auto;
    max-width:300px;
    font-family: 'Arvo', serif;
    position: absolute;
    bottom: 55px;
    right: 0px;
    border: solid 5px #007DAC;
    border-radius: 25px 25px 5px 25px;
    padding: 10px;
    background:#FFF;
    line-height:normal;
    text-align:left;
    color:#007DAC;
}

http://jsfiddle.net/074Lb4qb/ EDIT This works but the same code doesn't work in dreamweaver or previewed in firefox or chrome.

Upvotes: 4

Views: 2663

Answers (2)

4t0m1c
4t0m1c

Reputation: 329

Ok thanks to not working modularly, I have the found the problem to be the <li> element that the notification <div> was a child of. The <li> element was modifying the width value.

Upvotes: 1

Akash Bose
Akash Bose

Reputation: 102

I did not understand what you actually wanted to say. but you can add word-wrap: break-word;

.noti {
    height:auto;
    min-height:50px;
    width:auto;
    max-width:300px;
    font-family: 'Arvo', serif;
    position: absolute;
    bottom: 55px;
    right: 0px;
    border: solid 5px #007DAC;
    border-radius: 25px 25px 5px 25px;
    padding: 10px;
    background:#FFF;
    line-height:normal;
    text-align:left;
    color:#007DAC;
        word-wrap: break-word;
}

jsfiddle

Upvotes: 0

Related Questions