Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts

    Parent and Child Divs

    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

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

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,740
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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>
    Code:
    <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
    Code:
    <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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    wow that totally makes sense thanks for that I'm freakin retarded lol thanks so much


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •