Skip to main content
Participant
July 30, 2017
Answered

Container won't float

  • July 30, 2017
  • 2 replies
  • 295 views

I have set up two half (50%) boxes in the responsive site I am building and I must have done something wrong. The second one doesn't float, and now the box color is gone as well.

Guilford Garden Center - Where Gardening is Fun!

Sorry - learning css....   slowly....

    This topic has been closed for replies.
    Correct answer osgood_

    You have closed the 'row' too early and missed out a closing row </div>, see in red below:

    <div class="row">

    <div class="col col-md-one-half">

    <div class="info-box-medium">

    <h4>PRODUCTS FOR GROWING</h4>

    <p>Annual and Perennial Flowers<br>

                          Vegetables and Herbs<br>

                          Cover Plants, Shrubs and Trees<br>

                          By Pound or Pack Seeds and Bulbs<br>

                          Gloves, Hats and Garden Tools<br>

                          Soil Treatments and Fertilizers<br>

                        </p>

                          <h4>Click <u>Here</u></h4>

                          </div>

                          </div>

                    </div> <!-- wrong place - this closes the row too early, move it to as shown below in red-->

               

               

                    <div class="col col-md-one-half">

                      <div class="info-box-medium">

                        <h4>PRODUCTS FOR SHOWING</h4>

                        <p>Pots, Ceramics and Planters<br>

                          Garden Globes, Statues and Gnomes<br>

                          Bird Seed and Bird Feeders<br>

                          Chimes, Flags, Crystals and Gifts<br>

                          Watering and Hydro-Control<br>

                          Seasonal Gifts and Gift Cards<br>

                        </p>

                      <h4>Click <u>Here</u></h4></div>

                    </div>

               

                    </div><!-- right place - ends the row in the correct place-->

               

                <div class="row">

           

                    <div class="col col-md-one-third">

                      <div class="info-box-dark">

                        <h4>Sales and Specials</h4>

                        <p>Click <span style="color: #FFFD00; font-weight: 400;">HERE</span> to see our latest sales and upcoming specials. Bookmark this page and check back often for the best deals!</p>

                      </div>

                    </div>

               

                    <div class="col col-md-one-third">

                      <div class="info-box-dark">

                        <h4>Classes and Events</h4>

                          <p>We love sharing knowledge!  Click <span style="color: #FFED00; font-weight: 400;">HERE</span> to see our latest  classes, festivals, contests special events and more.</p>

                        </div>

                    </div>

               

              <div class="col col-md-one-third">

                <div class="info-box-dark">

                  <h4>Guilford Garden Blog</h4>

                  <p>Written by our own Christina Larson, our <span style="color: #FFED00; font-weight: 400;">BLOG</span> covers a wide range of garden topics helpful to all gardeners.</p>

                </div>

      </div>

    </div><!-- add closing row tag -->

    2 replies

    osgood_Correct answer
    Legend
    July 31, 2017

    You have closed the 'row' too early and missed out a closing row </div>, see in red below:

    <div class="row">

    <div class="col col-md-one-half">

    <div class="info-box-medium">

    <h4>PRODUCTS FOR GROWING</h4>

    <p>Annual and Perennial Flowers<br>

                          Vegetables and Herbs<br>

                          Cover Plants, Shrubs and Trees<br>

                          By Pound or Pack Seeds and Bulbs<br>

                          Gloves, Hats and Garden Tools<br>

                          Soil Treatments and Fertilizers<br>

                        </p>

                          <h4>Click <u>Here</u></h4>

                          </div>

                          </div>

                    </div> <!-- wrong place - this closes the row too early, move it to as shown below in red-->

               

               

                    <div class="col col-md-one-half">

                      <div class="info-box-medium">

                        <h4>PRODUCTS FOR SHOWING</h4>

                        <p>Pots, Ceramics and Planters<br>

                          Garden Globes, Statues and Gnomes<br>

                          Bird Seed and Bird Feeders<br>

                          Chimes, Flags, Crystals and Gifts<br>

                          Watering and Hydro-Control<br>

                          Seasonal Gifts and Gift Cards<br>

                        </p>

                      <h4>Click <u>Here</u></h4></div>

                    </div>

               

                    </div><!-- right place - ends the row in the correct place-->

               

                <div class="row">

           

                    <div class="col col-md-one-third">

                      <div class="info-box-dark">

                        <h4>Sales and Specials</h4>

                        <p>Click <span style="color: #FFFD00; font-weight: 400;">HERE</span> to see our latest sales and upcoming specials. Bookmark this page and check back often for the best deals!</p>

                      </div>

                    </div>

               

                    <div class="col col-md-one-third">

                      <div class="info-box-dark">

                        <h4>Classes and Events</h4>

                          <p>We love sharing knowledge!  Click <span style="color: #FFED00; font-weight: 400;">HERE</span> to see our latest  classes, festivals, contests special events and more.</p>

                        </div>

                    </div>

               

              <div class="col col-md-one-third">

                <div class="info-box-dark">

                  <h4>Guilford Garden Blog</h4>

                  <p>Written by our own Christina Larson, our <span style="color: #FFED00; font-weight: 400;">BLOG</span> covers a wide range of garden topics helpful to all gardeners.</p>

                </div>

      </div>

    </div><!-- add closing row tag -->

    Nancy OShea
    Community Expert
    Community Expert
    July 30, 2017