Can I repeat a div inside its own div?

[valarcher]

Hi – I’ve got a class “btmsub” twice over. The original html looks like this:

<div class="btmsub"><?php include("$rpath/1cde/btmsub.php"); ?></div>

and btmsub.php is:

<div class="btmsub"><h2>...</h2>
    <div class="subscribe"><div class="subimg"></div>
        <p>Treat Yourself to:</p>
<ul>
    <li ...
</div>

So the “view source” of the final display is:

<div class="btmsub"><h2>...</h2>
<div class="btmsub">
        <p>Treat Yourself to:</p>
<ul>
    <li...
</div>
</div>

This is the css:

.btmsub{font-size:110%;}
.subscribe p{color:blue;font-weight:bold;}
.subimg{float:right;background:url('imgpg/cabbage.jpg') no-repeat;width:200px;height:125px;
    padding:0 0 10px 10px;}
@media screen and (max-width:800px){
    .btmsub ul{margin-left:22px;}.subimg{display:none;}}
.btmsub .awbox{clear:right;margin:0 auto;padding:20px 25px 15px 15px;}
.testim{width:100%;margin:30px auto 0;font-size:110%;}
.testim p{color:blue;font-weight:bold;}

If I try to delete either one of the <div class="btmsub">s, all hell breaks loose, e.g. the li’s above it get affected for no logical reason whatsoever!

Is it the end of the world if I’m calling up a div within its own div? It’s the only way I can get it to display the way I want.

Ultimately I’m not happy with it, because if I try put a border round btmsub then of course I get a double border in two places.

thanks! - Val – http://greensmoothie.com/test/1mst.php

[PaulOB]

Hi,

You should replace the nested .btmsub with a class that says .btmsub2 instead and than add a new css rule that says.

.btmsub2 {font-size:110%}

The reason is that your first .btmsub applies a font-size of 110% and then the nested .btmsub is compounding this with another font-size:100% giving you larger text which I assume is what you want?

You could have safely removed the nested .btmsub class but the text would reduce in size. Nothing else would change as all other elements are targeted by the outer .btmsub rule anyway. The only affect of your nested .btmsub rule is to increase the font-size.

As you see it gets complicated when you nest rules so you would be better off just using a new class when you want changes to inner elements.

[valarcher]

Hi Paul - thank you! Actually what happened is that when I tried to fix it yesterday – apply font-size to .btmsub p, li, so I could delete the second btmsub, that’s exactly what I did!

.btmsub p,li {font-size...

so of course it changed all the li’s in the rest of the page! Then I realized in my sleep last night it’s:

.btmsub p, .btmsub li {font-size...

I see myself dying with a garrulous “specificity, specificity, specificity…” on my lips. All my loved ones standing round will be thinking “poor ol’ Val’s loose screw…” and little will they know that finally in my last breath I hit one brief moment of lucidity…

[valarcher]

P.S. and I just made btmsub a width:100% having moved the font-size to p, li – didn’t want you thinking I’ve still got font-size twice over