responsive box model with border and text inside the div

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.

Code:

---

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

---

Attachment 5657

thank you,
Mike

Something like this?

Code:

---

<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?

Code:

---

<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>

---

Hi there mlegg,

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

Code:

---


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

---

...to this...

Code:

---


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

---

coothead

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

Hi there mlegg,

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

Code:

---


#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. :D

coothead

LOL OOPS :rolleyes: