Jump to content

Two column layout with a wrapper... Columns appear outside although they are written to be inside the wrapper.


Recommended Posts

 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; }


<!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! screenshot2.png

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...