Question

I am writing a website and am confused because the following code gives no height when I open the file in m browser. I was searching online to see if there was a reason why but I haven’t been able to find anything.

Why does the following section (or alternatively a div) show as having 0 height, when each image does?

<section class = "class">
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
        <img class = "class" src = "url" alt = "alt" />
</section>

Above this code is:

<section class = "class">
        <span class = "class">Insert Text Here</span>
</section>

This shows as having the correct height.

After the section with no height is this code:

<section class = "class">
        <div class = "class"> Insert Code Here </div>
</section>

Which gives the height including the section with all of the images. This is causing me to get really messed up when styling the rest of the website.

I would declare a fixed height amount, but it is going to be a mobile site and each of the images need to have a percentage width, which means that the height will change depending on the mobile device.

Any help or clarification would be greatly appreciated! Thanks!

The following code is exactly as I have it set up, only without header or footer:

 <style>
 body
 {
 max-width:640px;
 margin:0 auto;
 font-family: helvetica;
 }
 image
 {
 border:none;
 padding:0px;
 margin:0px;
 height:auto;
 }
 div
 {
 display:block;
 }
 a
 {
 text-decoration:none;
 }
 a:hover
 {
 text-decoration:none;
 }
 .club_options .beer, .club_options .flower, .club_options .cigar, .club_options .chocolate
 {
 float: left;
 margin-left: 4%;
 width: 44%;
 margin-bottom: 4%;
 }
 .club_options .wine, .club_options .fruit, .club_options .coffee, .club_options .pizza
 {
 float: right;
 margin-right: 4%;
 width: 44%;
 margin-bottom: 4%;
 }
 .club_options .wine, .club_options .beer
 {
 margin-top: 4%;
 }
 p
 {
 margin:0px;
 padding:0px;
 }
 .content_wrapper .top_banner
 {
 width: 100%;
 background-color: #A43309;
 font-size: 38px;
 text-align: center;
 padding-top: 15px;
 padding-bottom: 15px;
 }
 .content_wrapper  .top_banner .banner
 {
 color: white;
 }
 .content_wrapper .top_banner img
 {
 padding-bottom: 4px;
 }
 .bottom_banners .social_media
 {
 width: 100%;
 background-color: #EAEAEA;
 }
 .bottom_banners .social_media a img
 {
 padding-top: 15px;
 padding-bottom: 15px;
 padding-right: 2%;
 padding-left: 2%;
 width: 19%;
 }
 .bottom_banners .social_media img
 {
 padding-bottom: 6px;
 }
 </style>
 <section class = "content_wrapper">
    <section class = "top_banner">
        <span class = "banner"> Shop our Gourmet Clubs</span>
        <img src = "../images/arrow.jpg" alt = "Arrow" />
    </section>
    <section class = "club_options">
        <img class = "beer" src = "../images/beer.jpg" alt = "Beer of the Month Club" />
        <img class = "wine" src = "../images/wine.jpg" alt = "Wine of the Month Club" />
        <img class = "flower" src = "../images/flower.jpg" alt = "Flower of the Month Club" />
        <img class = "fruit" src = "../images/fruit.jpg" alt = "Fruit of the Month Club" />
        <img class = "cigar" src = "../images/cigar.jpg" alt = "Cigar of the Month Club" />
        <img class = "coffee" src = "../images/coffee.jpg" alt = "Coffee of the Month Club" />
        <img class = "chocolate" src = "../images/chocolate.jpg" alt = "Chocolate of the Month Club" />
        <img class = "pizza" src = "../images/pizza.jpg" alt = "Pizza of the Month Club" />
    </section>
    <section class = "bottom_banners">
        <!--wall street-->
        <div class = "wall_street_banner">
            <img src = "../images/wall_street_journal_logo.jpg" alt = "Wall Street Journal" />
            <div class = "quote">
                <span class = "apostrophe">&ldquo;</span>
                <span class = "text">Best Overall, Best Value with generous shipments</span>
                <span class = "apostrophe">&rdquo;</span>
            </div>
        </div>
        <!--social media-->
        <section class = "social_media">
            <a href = "#" target = "_blank">
                <img src = "../images/facebook.jpg" alt = "Like us on Facebook" />
            </a>
            <img src = "../images/social_media_separator.jpg" alt = "" />
            <a href = "#" target = "_blank">
                <img src = "../images/twitter.jpg" alt = "Follow us on Twitter" />
            </a>
            <img src = "../images/social_media_separator.jpg" alt = "" />
            <a href = "#" target = "_blank">
                <img src = "../images/google_plus.jpg" alt = "Find us on Google+" />
            </a>
            <img src = "../images/social_media_separator.jpg" alt = "" />
            <a href = "#" target = "_blank">
                <img src = "../images/pinterest.jpg" alt = "Pin it on Pinterest" />
            </a>
        </section>
    </section>
</section>

Answer 1

section.club_options contains only floated elements and therefore needs a clearfix or overflow:hidden;.

And to head off another issue (possibly one of many), I don’t think that image selector is going to work too well.