sepoto Posted August 9, 2012 Share Posted August 9, 2012 http://dailysportsguide.com/prototype/index.php body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: white; } #wrapper { width: 800px; margin: 0px auto; color: white; background-color: red; border: 1px solid white; text-align: left; padding: 0px 0px 0px 0px; height: auto;} #header { margin: 0px; padding: 0px; width: 100%; height: 141px; }#hcolumnLeft { float: left; width: 300px; background-color: blue; margin: 0px; padding: 0px; color: white; height: 141px; }#hcolumnRight { float: right; margin: 0px; padding: 0px; color: white; background-color: green; width: 500px; height: 141px; text-align: right; } #container { width: 100%; padding: 0px; margin: 0px; color: red; background-color: blue; height: auto; }#columnLeft { width: 50%; float: left; color: red; margin: 0px; padding: 0px; background-color: yellow;}#columnRight { width: 50%; float: right; color: red; margin: 0px; padding: 0px; background-color: white; } index.php <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div id="container"><div id="columnLeft"><p>Test p!</p></div><div id="columnRight"><p>Test p!</p></div></div> </div></body></html> So clearly I have written #columnLeft and #columnRight to be enclosed inside #wrapper. When I look at the page however the solid white border of #wrapper has not carried down below #columnLeft and #columnRight. In fact #columnLeft and #columnRight appear to be totally outside of #wrapper which is not my intent. Did I perhaps do something wrongly with #container? The height of wrapper should be auto so all the elements should then be contained inside of #wrapper. This is odd. There must be something wrong with my code! Thanks in advance! Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 9, 2012 Share Posted August 9, 2012 (edited) Add overflow: hidden; to the container Edited August 9, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2012 Share Posted August 9, 2012 The wrapper cannot detect the precence of floated elements, unless overflow: hidden; is used on it. 1 Link to comment Share on other sites More sharing options...
sepoto Posted August 9, 2012 Author Share Posted August 9, 2012 Indeed... Setting #wrapper { overflow: hidden; } and the border is behaving properly now. I will need to familiarize myself with this property and its workings. Thank you both for your prompt replies. 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