treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Too many Divs?

  • Hello, I have some CSS here and can someone tell me if I have too many div wrappers?

      <div class="grid-block">
      <div class="grid-box width33 grid-h" style="width: 315px;">
        <div style="min-height: 217px;" class="link-box mod-box-sync mod-box-header deepest">
          <h3 class="module-title">Logo Design</h3>
          <div class="grid-block grid-gutter">
            <div class="grid-box width100">
              <div>
                <div class="h150">Your logo is the first thing potential clients see when researching your business.<br><br>We offer cost effective, professional logo design services with an extremely fast turnaround.</div>
                <div align="center" class="atc-button"><a href="/index.php/services/graphic-services/logo-design" class="button-primary">Learn More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-box width33 grid-h" style="width: 315px;">
        <div style="min-height: 217px;" class="link-box mod-box-sync mod-box-header deepest">
          <h3 class="module-title">Website Redesign</h3>
          <div class="grid-block grid-gutter">
            <div class="grid-box width100">
              <div>
                <div class="h150">If you already have a website and it's time for an update, we're your company! <br><br> We can keep everything you enjoy about your website, while bringing it up to date.</div>
                <div align="center" class="atc-button"><a class="button-primary" href="/index.php/services/website-services/small-business">Learn More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-box width33 grid-h" style="width: 314px;">
        <div style="min-height: 217px;" class="link-box mod-box-sync mod-box-header deepest">
          <h3 class="module-title">Website Maintenance</h3>
          <div class="grid-block grid-gutter">
            <div class="grid-box width100">
              <div>
                <div class="h150">Let Kelly Website Design handle all of your website maintenance so you can concentrate on running your business.
                  <p>We offer many types of plans as well as pay-as-you-go options.</p>
                </div>
                <div align="center" class="atc-button"><a class="button-primary" href="/index.php/services/website-services/site-maintenance">Learn More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  • LoL, then which ones can i get rid of? Sorry, new to this.

  • First, that's HTML not CSS and we can't tell you which ones are unnecessary until we see it in action.

    Do you have a live site or could you make a reduced case (with both HTML and CSS) for us to examine?

  • https://www.kellywebsitedesign.com/

    That's the live site. the coding I am talking about is the bottom three boxes. I am using the Joomla! content management system. I have a little experience with CSS but I usually have a programmer working with me but he is away and need to make sure this is correct.

  • Ahhh...if you are using a CMS then it's likely that all those divs are actualy doing something specific like setting widths, gutters etc.

    I'd leave it for now if it's working.

    When your programmer gets back I would ask him if there isn't something that can't be done to reduce the 'divitis' but otherwise...leave well enough alone.

  • Ok, great! Thanks for the fast reply.