Emwat Oon Posted October 11, 2013 Share Posted October 11, 2013 * { margin: 0; padding: 0; } body { background: black; color: white; } nav { width: 100%; text-align: center; background-color: #56A4E8; list-style: none; margin: 20px 0 20px 0; padding: 5px 0 5px 0; } nav li { display:inline; list-style:none; margin:10px; padding:0; } #wrapwrap { background: grey; } #wrap { width: 800px; margin: 0 auto; } #left-col { float: left; width: 50%; } #right-col { float: right; width: 50%; } h2 { color: 56A4E8; } I validated it with http://jigsaw.w3.org/css-validator/validator It's all valid, but I don't see my grey background-color. Little help here? Link to comment Share on other sites More sharing options...
niche Posted October 11, 2013 Share Posted October 11, 2013 Please post the html Link to comment Share on other sites More sharing options...
davej Posted October 11, 2013 Share Posted October 11, 2013 (edited) If you just have empty divs they will have a height of zero. Also you have nav where you probably want .nav or #nav. Edited October 11, 2013 by davej Link to comment Share on other sites More sharing options...
Emwat Oon Posted October 11, 2013 Author Share Posted October 11, 2013 (edited) <html><head><title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: black; color: white; } #navbar { width: 100%; background-color: #56A4E8; padding: 0 10%; } nav { width: 800px; list-style: none; margin: 20px; padding: 5px 0 5px 0; } nav li { display:inline; list-style:none; margin:20px; padding:0 3%; } #navbar nav a { text-decoration: none; color: white; } #thing { background: grey; } #thing #wrap { width: 800px; margin: 0 auto; } #left-col { float: left; width: 48%; padding: 1%; } #right-col { float: right; width: 48%; padding: 1%; } h2 { color: #56A4E8; }</style></head><body> <div> </div> <div id="navbar"> <nav> <ul> <li><a href="#">content</a></li> <li><a href="#">content</a></li> <li><a href="#">content</a></li> <li><a href="#">content</a></li> <li><a href="#">content</a></li> </ul> </nav> </div> <div id="thing"> <div id="wrap"> <div id="left-col"> <h2>NEWS/EVENTS</h2> <hr /> <ul> <li>Kickstarter</li> <p>Like us on Facebook to earn points to win promotional items and other prizes. <a href="#">Click here</a> to learn more.</p> <hr /> <li>Announcements</li> <p>content</p> </ul> </div> <div id="right-col"> <h2>VIDEOS</h2> <hr /> <ul> <li>content<li> <li>content</li> <li>content</li> </ul> </div> </div> </div></body></html> Edited October 11, 2013 by Emwat Oon Link to comment Share on other sites More sharing options...
Emwat Oon Posted October 11, 2013 Author Share Posted October 11, 2013 If you just have empty divs they will have a height of zero. Also you have nav where you probably want .nav or #nav. I googled it and people are using .nav and #nav, but when I switch out nav for either of the two, they stop working oddly enough. I must definitely be overlooking something here. Link to comment Share on other sites More sharing options...
davej Posted October 11, 2013 Share Posted October 11, 2013 You were right about nav. It is now a legal tag. The problem is that you are using float inside #thing. #thing { background-color: grey; overflow:hidden; } 1 Link to comment Share on other sites More sharing options...
Emwat Oon Posted October 11, 2013 Author Share Posted October 11, 2013 Cool. Tried overflow: hidden and it works. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now