HTML Section with embedded images shows 0 height

[leexaa]

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?\[code\]<section class = "class"> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /> <img class = "class" src = "http://stackoverflow.com/questions/12762181/url" alt = "alt" /></section>\[/code\]Above this code is: \[code\]<section class = "class"> <span class = "class">Insert Text Here</span></section>\[/code\]This shows as having the correct height.After the section with no height is this code:\[code\]<section class = "class"> <div class = "class"> Insert Code Here </div></section>\[/code\]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:\[code\] <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 = "http://stackoverflow.com/questions/images/arrow.jpg" alt = "Arrow" /> </section> <section class = "club_options"> <img class = "beer" src = "http://stackoverflow.com/questions/images/beer.jpg" alt = "Beer of the Month Club" /> <img class = "wine" src = "http://stackoverflow.com/questions/images/wine.jpg" alt = "Wine of the Month Club" /> <img class = "flower" src = "http://stackoverflow.com/questions/images/flower.jpg" alt = "Flower of the Month Club" /> <img class = "fruit" src = "http://stackoverflow.com/questions/images/fruit.jpg" alt = "Fruit of the Month Club" /> <img class = "cigar" src = "http://stackoverflow.com/questions/images/cigar.jpg" alt = "Cigar of the Month Club" /> <img class = "coffee" src = "http://stackoverflow.com/questions/images/coffee.jpg" alt = "Coffee of the Month Club" /> <img class = "chocolate" src = "http://stackoverflow.com/questions/images/chocolate.jpg" alt = "Chocolate of the Month Club" /> <img class = "pizza" src = "http://stackoverflow.com/questions/images/pizza.jpg" alt = "Pizza of the Month Club" /> </section> <section class = "bottom_banners"> <!--wall street--> <div class = "wall_street_banner"> <img src = "http://stackoverflow.com/questions/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 = "http://stackoverflow.com/questions/12762181/#" target = "_blank"> <img src = "http://stackoverflow.com/questions/images/facebook.jpg" alt = "Like us on Facebook" /> </a> <img src = "http://stackoverflow.com/questions/images/social_media_separator.jpg" alt = "" /> <a href = "http://stackoverflow.com/questions/12762181/#" target = "_blank"> <img src = "http://stackoverflow.com/questions/images/twitter.jpg" alt = "Follow us on Twitter" /> </a> <img src = "http://stackoverflow.com/questions/images/social_media_separator.jpg" alt = "" /> <a href = "http://stackoverflow.com/questions/12762181/#" target = "_blank"> <img src = "http://stackoverflow.com/questions/images/google_plus.jpg" alt = "Find us on Google+" /> </a> <img src = "http://stackoverflow.com/questions/images/social_media_separator.jpg" alt = "" /> <a href = "http://stackoverflow.com/questions/12762181/#" target = "_blank"> <img src = "http://stackoverflow.com/questions/images/pinterest.jpg" alt = "Pin it on Pinterest" /> </a> </section> </section></section>\[/code\]