[nova912]

How do i make a border wrap around text keeping a padding of 5px (or any other style for the matter).

I could do this a dirty way and make a table with 1 cell and then put the text between <nobr>this and it would stay on one line</nobr> but there must be a better way of controling the environment.

Right now the border width just goes untill it hits a wall.

[JonnyBee]

Not 100% sure what you mean but I'll have a Go..

//css sheet

Code:

#somediv //Add what ever Styling you want here
{
margin-left:auto;
margin-right:auto;
position:relative;
}

#somediv p //note that the P indicates that it will only effect content between <p> tags t
{
display:block;
padding: 5px;
border:Solid 1px #000000;
float:left;
}

//Html

Code:

<div id="somediv">
<p>some text here</p>
</div>

I thinks thats the sort of thing your after..

[nova912]

what i mean is this

with this code the border will look like this
----------------------------...
|blah blah
----------------------------...
.. all the way to the end of the element that the div is in, how do i make it like this...
------------
|blah blah|
------------

Code:

<div style="border:1px solid red"><font>blah blah</font></div>

[Spaced]

Code:

CSS:
(if you want the border on all your paragraphs)
p{margin: 2px; padding: 5px; border: 1px solid #000;}

(If you wants them only on certain paragraphs)
.yourclassname{margin: 2px; padding: 5px; border: 1px solid #000;}

-----

HTML:

<p class="yourclassname">hello world</p>

get rid of the <font> tags, you do not need them. Use <p> (paragraph) tags when you are coding any sort of text.

I gave it a margin of 2px just for a little bit of spacing around the text, you can change that.

[JonnyBee]

Ahh Inline Css .. And just top and bottom.. gotcha!

Code:

<div style="border-top:1px solid red; border-bottom:1px solid red"><p>Some Text</p></div>

[nova912]

Well the problem is, the text may be only as long as "Invalid E-Mail Address" its never going to be longer then that.

I could solve this by going like so and the table would start out as only 1px wide but the <nobr> will actually strech out the same to the width of the text AND the <div>'s style will also strath out the table.

Code:

<table width="1">
<tr>
<td>
<div class="style1">
<nobr>E-Mail Invalid.</nobr>
</div>
</td>
</tr>
</table>

[Spaced]

I forgot one part of this.
With the float on <p> tag the border will go only the length of the text. The "clearyourclass" class is to push any text that is suppose to be underneath "yourclassname" you can do this with a <br clear="all" /> but you have less control of the final product.

Code:

CSS:
.clearyourclass{width: 100%; float: left;}
.yourclassname{margin: 2px; padding: 5px; border: 1px solid #000; float: left; clear: both;}

-----------
<div class="clearyourclass">
     <p class="yourclassname">Your text Here</p>
</div>