CODEWITHSUNDEEP
htmlcss
Devon Miller
Devon Miller

Reputation: 65

CSS Dynamically Resize Div to fit content?

I am trying to get a pop-down at the top of my page to resize with the browser. The text does, but the div containing it does not, so the text is cut off.

Here is my CSS:

.popdownbanner { position:absolute;top:0;left:0;height:100%;width:100%;background:#FF0C10;color:#000000;font:normal 95% Arial, Helvetica, sans-serif;}

HTML:

<div class="popdownbanner"><center>
        <h3 style="margin-left:10px;margin-right:10px;font-size:18px">THIS IS MY TEXT THAT IS CUT OFF, but I have several lines more than I have typed here.<a href="#" title="Donate" target="_blank">Click here to help!</a></h3></center>
       </div>

The other CSS on the page conflicts with the h3 tag, thus the style tag in the HTML. If I can get it to resize without using any JavaScript, that is my preference.

Upvotes: 0

Views: 1500

Answers (1)

Steven Brookes
Steven Brookes

Reputation: 894

As you are using absolute positioning, you should be able.to get away with removing the width and height properties and replacing them with right:0; and bottom:0; to have the same effect and should resize with the window. Its the methods that's served me well in the past, so hopefully works for you too!

Of course, this assumes you want a full-screen div, as your css suggests. Is that that case?

Upvotes: 1

Related Questions