...

View Full Version : Parent and Child Divs



NoeG
08-10-2011, 08:00 PM
I've always felt uncomfortable using so many divs but what about when I need to use them to wrap another one in order to get the layout to workout

Here is a sample of a template I wrote yesterday for my blog


<div id="container-2">
<div id="left-col">
<div class="news-wrap1">
<div class="thumbnail">
<img src="thumbnails/thumb1.jpg" alt="thumb" />
</div>

<div class="news-left">
<span>08/07/2011</span><br />
Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus. Sed suscipit pretium vestibulum. In eleifend, leo quis varius feugiat, nunc dolor tristique orci, nec gravida ligula risus ac neque. Nam interdum massa eget libero blandit et facilisis turpis volutpat.
<br /><a class="right" href="">Read More &raquo; </a>
</div>
</div><!-- /news-wrap1 -->
<div class="news-wrap2">
<div class="thumbnail">
<img src="thumbnails/thumb2.jpg" alt="thumb" />
</div>

<div class="news-left">
<span>08/07/2011</span><br />
Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus. Sed suscipit pretium vestibulum. In eleifend, leo quis varius feugiat, nunc dolor tristique orci, nec gravida ligula risus ac neque. Nam interdum massa eget libero blandit et facilisis turpis volutpat.
<br /><a class="right" href="">Read More &raquo;</a>
</div>
</div> <!-- /news-wrap2 -->
</div><!-- /left-col -->

<div id="right-col">
<div class="newswrap-right">
<div class="thumbnail">
<img src="thumbnails/thumb3.jpg" alt="thumb" />
</div>

<div class="news-right">
Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus. Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus.
<br /><a class="right" href="">Read More &raquo;</a>
</div>
</div>
<div class="newswrap-right">
<div class="thumbnail">
<img src="thumbnails/thumb4.jpg" alt="thumb" />
</div>

<div class="news-right">
Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus. Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus.
<br /><a class="right" href="">Read More &raquo;</a>
</div>
</div>
<div class="newswrap-right">
<div class="thumbnail">
<img src="thumbnails/thumb5.jpg" alt="thumb" />
</div>

<div class="news-right">
Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus. Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus.
<br /><a class="right" href="">Read More &raquo;</a>
</div>
</div>
</div><!-- /right-col -->

</div>

I had to nest #left-col and# right-col in a wrapper div #container-2 in order to get the two columns to float beside each other, on top of that I also had to nest thumbnail and news-left inside newswrap-left to get those to float beside each other same with news-right and newswrap-right

is there an easier way to do it so I'm not having so many child divs and parent divs? or can anyone point out unnecessary markup that I could rewrite to make the template load faster

alykins
08-10-2011, 08:15 PM
this is my personal opinion so...
You are trying to limit your divs, a good thing no doubt... but one question I would ask then is why are you wrapping every <img> with a div? you can assign the class to the <img>


<img src="thumbnails/thumb1.jpg" alt="thumb" class="thumbnail" />


now for the text areas... is there a reason you are wrapping the text areas in <div>'s? Why not use <p>'s... this is there intent


<p class="news-left">
<span>08/07/2011</span><br />
Etiam et ante dolor. Maecenas id erat vitae odio semper laoreet ut sit amet lacus. Sed suscipit pretium vestibulum. In eleifend, leo quis varius feugiat, nunc dolor tristique orci, nec gravida ligula risus ac neque. Nam interdum massa eget libero blandit et facilisis turpis volutpat.
<br /><a class="right" href="">Read More &raquo;</a>
</p>


making these changes (and using the appropriate tags) would make your code have only (rough guess, I didn't go and count) 3-4 divs... not a whole lot right? :) and now you dont have the conflict of extra divs nagging you :)

NoeG
08-10-2011, 08:50 PM
wow that totally makes sense thanks for that I'm freakin retarded lol thanks so much



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum