Tricky stuff with <p> and <span class>

problims avoiding style inheritance

[mossimo]

Here’s one for all you CSS gurus.
Try the code bellow and try to get the main text off the left border “padding-left” won’t work because it will pad the top box to running the effect. I hope it’s not too easy I spent 10 hours on it and no luck.

The nesting effect has been tested and works in, IE6, NN7, Op, Moz1.4

.smallbox{
height: 15px;
background-color: Highlight;
font: Verdana;
color: #ffffff;
font-size: 1.2em;
font-weight: bold;
padding-left: 2em;
padding-right: 2em;
border-right-color: #000000;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #000000;
/*border-top-style: solid;
border-top-width: 1px;
commented out to make it
work in IE*/
border-left: none;}
.bigbox{
background-color: #ffffff;
border: 1px solid #000000;
width: 40%;
color: #000000;
font: Verdana;
font-size: .9em;
padding-bottom: .4em;
padding-right: .4em;}

<p class="bigbox"><span class="smallbox">Aenean Viverra</span><br />
This text needs left padding so it’s not touching the left border, wile keeping the little in the upper left corner. This text needs left padding so it’s not touching the left border, wile keeping the little in the upper left corner.</p>

[drbrain]

You need to use more boxes.

p { border: 1px solid black; }
p span { display: block; clear: both; }
p .box { float: left; border: 1px solid black; border-width: 0 1px 1px 0; }
p .text { margin-left: 2em }

<p>
<span class="box">Text on the left with border</span>
<span class="text">Indented text</span>
</p>

[mossimo]

Big smile and thanks. Works great I knew it I was over thinking.

[SuzyUK]

or try:

p {padding-left: 15px;}
p span{margin-left: -15px;}

(add your class names)

you can't have negative padding so cancel it with a negative margin on the span instead

Suzy