responsive box model with border and text inside the div

[mlegg]

On this page I have a div with a border and background color. It is where it starts to say "The following scholarship applications are to be filled out online"


How can I get it so that the border is responsive and fits inside of the white container, not going all the way to the end on the right like it does now?
Another of my members changed the page to add the new scholarships links there. I would also like to have a small radius on the box too. I looked into css box models but couldn't quite adapt the code to make it work the way I am asking for properly.

<div style="padding:10px;border:2px solid #333;background:#efefef;">

thank you,
Mike

[molendijk]

Something like this?

<div style="position: relative; width: 500px; height: 400px; background: black; margin: auto">
<div style="position: absolute; left: 2%; top: 2%; right: 2%; bottom: 2%; border: 1px solid black; border-radius: 15px; background: white; padding: 10px">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>
</div>

Or this?

<div style="position: absolute; left: 10%; top: 10%; right: 10%; bottom: 10%; background: black">
<div style="position: absolute; left: 2%; top: 4%; right: 2%; bottom: 4%; border: 1px solid black; border-radius: 15px; background: white; padding: 10px">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>
</div>

[coothead]

Hi there mlegg,

I am really surprised that you have not tried changing this...

#content {
    padding: 0px 0px 10px 10px;
    clear:both;
    position:relative;    
 }

...to this...

#content {
    padding: 0 10px 10px;
    clear:both;
    position:relative;    
 }

coothead

[mlegg]

Thanks guys. I was just thinking of the change to the inline css for that part on the html page.

[coothead]

Hi there mlegg,

I notice that you have added an unnecessary "px" here...

#content {
    padding: 0 10px 10px;
    clear:both;
    position:relative;    
 }

You could equally have added " pt, in, pc, cm or mm" and got the same result.

coothead

[mlegg]

LOL OOPS