Error in adding background color to section in HTML/CSS
Question
I am trying to add a dark background color to the newsletter section of this website using CSS. Instead nearly the entire page displays the background color. I've checked the the HTML document to make sure I mistakenly left a div or section open, but have found nothing. Can anyone tell me why my 75% of my page is being recognized as the "newsletter" section?
/* Will prevent padding from affecting the width of our columns */ * { box-sizing: border-box; } html, body { font-family: 'Open Sans',sans-serf; } .clearfix:before, .clearfix:after { content: " "; display: table; } /* Prevents floating elements on either side. */ .clearfix:after { clear: both; } .wrapper { width: 1440px; max-width: 90%; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { font-weight: 300; } /* Header */ #top_header { padding: 1.5em 0; } #top_header .logo { float: left; text-transform: uppercase; font-size: 1.15em; font-weight: 700; } #top_header .logo span { font-weight: 300; color: #73e298; } #top_header #main_nav { float: right; font-size: .9em; padding-top: 1em; } #top_header #main_nav a { color: #8b8b9f; text-decoration: none; margin-left: 1em; } #banner { background: url(../images/banner_background.jpg); background-repeat: no-repeat; background-size: cover; width:100%; padding: 6.5em, 0; } #banner #banner_content_wrapper { width: 900px; max-width: 90%; margin: 0 auto; display: flex; justify-content: center; align-items: center } #poster { width: 275px; position: relative; float: left; } #poster .featured_image { width: 100%; max-width: 100%; border-radius: .5em; -webkit-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47); -moz-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47); box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47); } /* Moves play button to center of poster image */ #poster .play_button { position: absolute; width: 80px; left: 50%; top: 50%; margin: -40px 0 0 -40px; } /* Moves Deadpool movie info to the right of the image. With better spacing */ #content { float: left; width: 500px; margin-left: 100px; } /* Changes Deadpool title to white, increases font size, and adjusts spacing in the display*/ #content .title { display: inline; font-size: 1.75em; color: #FFFFFF; } /* Rating system now side by side with title instead of below.*/ #content .ratings { display: inline; margin-left: 1em; } /* Adds color and increases size of stars */ #content .ratings i { color: #73e298; font-size: 1.35em; margin: 0 .15em; } /* Changes last star to a grey color */ #content .ratings .inactive { color: #48494d; } /* Changes description color to white which shows up better with the background. Double spaces description as well.*/ .description { color: #bbbebf; font-size: 1em; line-height: 2; } .info { color: #FFFFFF; font-size: .8em; font-weight: 700; margin-top: 3em; } .info span { margin: 0 .5em; } .row { width: 100% } /* Organizes images horizontally */ .post { width: 14%; /* 100% /6(images) -2.5% */ float: left; margin-right: 2.5%; } /* Shrinks images to playing card size. Adds space to images */ .post img { width: 100%; max-width: 100%; border-radius: .5em; } .post .title { font-size: 1.25em; margin: 1em 0 0 0; color:#252529; } /* Lightens the rating and mins. Slight size and margin adjustment */ .post_info { font-size: .75em; color: #8b8b9f; margin: 0.5em 0; } /* Better spacing between top movies and top shows*/ #top_movies, #top_shows { padding: 5em 0; } #top_movies, #top_shows header { padding: 0 0 1.5em 0; } #top_movies, #top_shows header h2, .view_more { display: inline; } #top_movies, #top_shows h2 { font-size: 1.75em; } #top_movies, #top_shows, .view_more { float: right; font-size: .8em; margin: .75em 3.5% 0 0; } /*Adds border between popular movies and tv sections*/ #top_movies { border-bottom: 1px solid #d4d4d4; } #newsletter { padding: 5em 0; text-align: center; background: #2a2a2e; } #newsletter .newsletter_inner{ width: 600px; margin: 0 auto; } #newsletter h2 { font-size: 1.75em; color:#FFFFFF; }
<!DOCTYPE html> <html> <head> <title>Movies & TV | Dan Mayle </title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <!--Header including navigation bar--> <header id="top_header" class="clearfix"> <div class="wrapper"> <h1 class="logo">Movies<span>&</span>TV</h1> <nav id="main_nav"> <a href="#">Movies</a> <a href="#">TV Shows</a> <a href="#">Celebs & Photos</a> <a href="#">News</a> </nav> </div> </header> <section id="banner" class="clearfix"> <div id="banner_content_wrapper"> <div id="poster"> <img src="images/movies/deadpool.jpg" alt="Deadpool Movie Poster" class="featured_image"> <img src="images/play_button.png" alt="Play Trailer" class="play_button"> </div> <div id="content"> <h2 class="title">Deadpool</h2> <div class="ratings"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star inactive"></i> </div> <p class="description">A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.</p> <p class="info">R <span>|</span> 108 min <span>|</span> Action, Adventure, Comedy <span>|</span> 12 February 2016</p> </div> </div> </section> <section id="top_movies" class="clearfix"> <div class="wrapper"> <header class="clearfix"> <h2>Popular Movies</h2> <p class="view_more">View All Movies</p> </header> <div class="row"> <div class="post"> <img src="images/movies/the-martian.jpg" alt="The Martian"> <h3 class="title">The Martian</h3> <p class="post_info">PG13 | 144 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/inside-out.jpg" alt="Inside Out"> <h3 class="title">Inside Out</h3> <p class="post_info">PG | 95 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/jurassic-world.jpg" alt="Jurassic World"> <h3 class="title">Jurassic World</h3> <p class="post_info">PG13 | 124 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/mad-max.jpg" alt="Mad Max"> <h3 class="title">Mad Max: Fury Road</h3> <p class="post_info">R | 120 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/star-wars.jpg" alt="Star Wars"> <h3 class="title">Star Wars: The Force Awakens</h3> <p class="post_info">PG13 | 109 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/avengers.jpg" alt="The Avengers"> <h3 class="title">Avengers: Age Of Ultron</h3> <p class="post_info">PG13 | 141 Minutes</p> </div> </div> </div> </section> <section id="top_shows" class="clearfix"> <div class="wrapper"> <header class="clearfix"> <h2>Popular Shows</h2> <p class="view_more">View All Shows</p> </header> <div class="row"> <div class="post"> <img src="images/tv_shows/walking-dead.jpg" alt="The Walking Dead"> <h3 class="title">The Walking Dead</h3> <p class="post_info">TV-MA | Season 4</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/game-of-thrones.jpg" alt="Game Of Thrones"> <h3 class="title">Game Of Thrones</h3> <p class="post_info">TV-MA | Season 6</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/breaking-bad.jpg" alt="Breaking Bad"> <h3 class="title">Breaking Bad</h3> <p class="post_info">TV-MA | Season 5</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/empire.jpg" alt="Empire"> <h3 class="title">Empire</h3> <p class="post_info">TV-14 | Season 2</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/master-of-none.jpg" alt="Master of None"> <h3 class="title">Master of None</h3> <p class="post_info">TV-MA | Season 1</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/mr-robot.jpg" alt="Mr Robot"> <h3 class="title">Mr Robot</h3> <p class="post_info">TV-14 | Season 1</p> </div> </div> </div> </section> <section id="newsletter"> <div class="newsletter_inner"> <h2>Get the best Movie & TV Show trailers straight in your inbox each week.</h2> <div class="sign_up_form"> <input type="text" placeholder="First Name"> <input type="email" placeholder="Email Address"> <button class="button">Subscribe</button> </div> </div> </section> <footer id="main_footer"> <p class="logo">Movies<span>&</span>Stuff</p> <p class="copyright">©2016 Movies & Stuff. All Rights Reserved.</p> <div class="links"> <a href="#">Terms of Service</a> <a href="#">Privacy Policy</a> </div> </footer> </body> </html>
2 answers
solution1
1 2016-06-27 23:53:14
Get rid of the unnecessary float:right on #top_movies and #top_shows. You're outsmarting yourself there by floating them and then applying clearfix. :)
solution2
0 2016-06-27 23:37:52
I'am not sure what's your design idea. But on floating div's following containers are floated around the parent. Though you have to clear them:
#newsletter {
clear: both;
}
see here ( http://codepen.io/f7o/pen/LZWZWp )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS Background color section but not page
CSS Flex Section Background Color
HTML/CSS background color
Html and css background color
Setting one Section of HTML as a Different Background Color
Can't get the background color for fill in the proper section in my page (HTML/ CSS)
adding background color with bgcolor in html
HTML CSS Background-Color
Background color in Inputs HTML/CSS
Linking CSS to HTML background color
Related Tags