Jump to content

Float is effecting height I believe


Krewe
 Share

Recommended Posts

Hey Guys, I have two divs with the float left attribute inside a container div.Everything in that aspect works, however, my div (which is the div on the left) doesn't continue the background color when you scroll down. Here is the example: Http://www.codekrewe.com/about.php Code:

@charset "utf-8";/* CSS Document */html, body{margin:0;padding:0;height:100%;}body{background-color:#444444;background-image:url(../images/stripes2.png);font-family:Arial, Helvetica, sans-serif;text-shadow:0px 1px 1px #000000;color:#CCCCCC;}#container{float:left;clear:both;width:100%;min-width:900px;height:100%;}/*************************************Navigation*************************************/#nav{width:200px;float:left;margin-right:10px;padding-left:10px;padding-right:10px;height:100%;background-color:#333333;background-image:url(../images/stripes2.png);}.button {margin-top:10px;border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow:		 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;font: bold 11px Arial;padding: 6px 10px;white-space: nowrap;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background:    -moz-linear-gradient(top, #333, #444444);background:	 -ms-linear-gradient(top, #333, #444444);background:	  -o-linear-gradient(top, #333, #444444);cursor: pointer;}.button:hover, .button:focus {   border-color: #333;   background: -webkit-linear-gradient(top, #333, #444444);   background:    -moz-linear-gradient(top, #333, #444444);   background:	 -ms-linear-gradient(top, #333, #444444);   background:	  -o-linear-gradient(top, #333, #444444);   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;   box-shadow:		 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;}.button:active {   border: 1px solid #333;   border-bottom-color: #333;   border-top-color: #444;   -webkit-box-shadow: inset 0 2px 4px #000;   -moz-box-shadow:    inset 0 2px 4px #000;   box-shadow:		 inset 0 2px 4px #000;   background: -webkit-linear-gradient(top, #444444, #333);   background:    -moz-linear-gradient(top, #444444, #333);   background:	 -ms-linear-gradient(top, #444444, #333);   background:	  -o-linear-gradient(top, #444444, #333);}a img{border:0;}a:link,a:visited,a:hover,a:active{text-decoration:none;color:#FFCC00;}a:hover{text-decoration:underline;}a .button{color:#FFCC00;text-decoration:none;}h1,h2,h3,h4,h5{color:#C60;margin:0;padding:0;text-shadow:1px 1px 1px #000000;}h1{font-size:32px;}h1 a:link,h1 a:visited{color:#C60;text-decoration:none;}h1 a:hover,h1 a:active{color:#F90;text-decoration:none;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{color:#0099CC;font-size:24px;margin:0;padding:0;}a:focus{outline:none;}img#floatLeft{float:left;width: 100px;height: 100px;margin-right:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}/**************************************Content**************************************/#content{width:700px;float:left;height:100%;}.construction{clear:both;margin-left:auto;margin-right:auto;}#wrapper{clear:both;width:700px;padding-top:10px;padding-bottom:10px;}/*************************************Footer*************************************/.footer{color:#CCCCCC;font-size:12px;text-align:left;}

HTML:

<html><body><!-- Start Container --><div id="container">    <div id="nav">	 <a href="index.php"><div><img src="images/logo.png" alt="logo"/></div></a>	 <a href="index.php"><div class="button">Home</div></a>	    <a href="about.php"><div class="button">About Us</div></a>	    <a href="portfolio.php"><div class="button">Portfolio</div></a>	    <a href="services.php"><div class="button">Services</div></a>	    <a href="contact.php"><div class="button">Contact</div></a><br />	    <img src="../images/line.png" width="200" height="2" alt="line" />	    <p class="footer">	    Code Krewe<br />	    <a href="index.php">www.CodeKrewe.com</a><br />	    <a href="mailto:zach@codekrewe.com">Zach@CodeKrewe.com</a><br />	    <a href="mailto:contact@codekrewe.com">Contact@CodeKrewe.com</a><br />	    </p>    </div>    <div id="content"><div id="wrapper"><div class="about"><h1>About Us:</h1><img src="images/line.png" height="2" width="500" /><br /><br /><h6>Who are we?</h6><p>Code Krewe is a portfolio site for Zach Case at the moment. Its main purpose is to showcase all the of websites and/or logos he creates for individual businesses over the years. However, in the future, he would like to make this site into a business so companies all over the nation could purchase his services, which include, Web Development, Web Design, Logo Design and Web Hosting. Also, we want to offer our clients all of the items they need to get their business growing online, this would include Web Hosting (which we currently offer) and Buying a Domain with us. Currently only Zach Case works at Code Krewe. He makes all his own websites and graphics. If you are in need of a web service we do not currently provide, please e-mail us at Contact@CodeKrewe.com</p><h6>Who is Zach Case?</h6><img id="floatLeft" src="images/zachcase.jpg" alt="Zach Case" /><p>Zach Case is a high school student at Castle View High School in Colorado. Born in 1995 he was first introduced to the website development world when he stumbled upon the website w3schools.com. He didn't do much with it until he was 13, when he was 13 he started to mess around with HTML and see what you could do with it. Not much was done until freshman year in high school when he took a class that was centered around web development with HTML. After that class he moved to learning CSS so he could work on a side project. Nothing else was done freshman or sophomore year in high school concerning Web Development except for the occasional learning more about HTML and CSS for just mess around projects. Then in May of 2011 Zach met the owner of <a href="Http://www.surfshackyogurt.com">Surf Shack Yogurt</a>, a Colorado based frozen yogurt store that was opening its first store. Zach offered to make their site, and to his amazement, they accepted. Surf Shack Yogurt was his first client, after that day Zach has been learning more and more about the web development world daily, and as of December 28th he now knows 4 coding languages. HTML, CSS, PHP, and MySQL. He is hoping to continue this career all the way through high school and further on into his life. </p></div><h6>What do we do?</h6><p>Here at Code Krewe we make websites, simple. We will make anything you need for your online business. Currently we can make your whole website, design it, add a blog, add a login system, add a CMS feature (check next section for info on CMS) and make a contact form so customers can easily contact you. Right now we can not make an actual online shopping cart/store. We are working on gaining the knowledge to do so.At Code Krewe, we write our own code, and uses only add-on programs you want, like WordPress.</p><h6>What is CMS?</h6><p>CMS stands for Content Management System. It is a type of coding/web development system that allows users to add content to their own site without having to know any HTML/coding languages. It is a great system that will allow any business owner to control what content their customers see on their website without having to know any of the code or do any of the dirty work. If you have ever used WordPress, that is a great example of a CMS. Their whole program allows someone to add content to a site and/or blog without knowing any coding languages!</p></div></div></div><!-- End Container --></body></html>

Thanks Guys.Krewe

Link to comment
Share on other sites

Your background colour is only going to be as high as the browser window OR if the content extends beyond this height, the content within it. One way to get over this is to use a repeating image of the same colour down the left side of the div #container which is the same width as the nav container.

Link to comment
Share on other sites

It still isn't working bud.

@charset "utf-8";/* CSS Document */html, body{margin:0;padding:0;height:100%;}body{background-color:#444444;background-image:url(../images/stripes2.png);font-family:Arial, Helvetica, sans-serif;text-shadow:0px 1px 1px #000000;color:#CCCCCC;}#container{background-image:url(../images/stripes3.png);background-position:top left;background-repeat:repeat-y;float:left;clear:both;width:100%;min-width:900px;height:100%;}/*************************************Navigation*************************************/#nav{width:200px;float:left;margin-right:10px;padding-left:10px;padding-right:10px;height:100%;}.button {margin-top:10px;border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow:	0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow:		 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;font: bold 11px Arial;padding: 6px 10px;white-space: nowrap;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background:	-moz-linear-gradient(top, #333, #444444);background:	 -ms-linear-gradient(top, #333, #444444);background:	  -o-linear-gradient(top, #333, #444444);cursor: pointer;}.button:hover, .button:focus {   border-color: #333;   background: -webkit-linear-gradient(top, #333, #444444);   background:	-moz-linear-gradient(top, #333, #444444);   background:	 -ms-linear-gradient(top, #333, #444444);   background:	  -o-linear-gradient(top, #333, #444444);   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;   -moz-box-shadow:	0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;   box-shadow:		 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;}.button:active {   border: 1px solid #333;   border-bottom-color: #333;   border-top-color: #444;   -webkit-box-shadow: inset 0 2px 4px #000;   -moz-box-shadow:	inset 0 2px 4px #000;   box-shadow:		 inset 0 2px 4px #000;   background: -webkit-linear-gradient(top, #444444, #333);   background:	-moz-linear-gradient(top, #444444, #333);   background:	 -ms-linear-gradient(top, #444444, #333);   background:	  -o-linear-gradient(top, #444444, #333);}a img{border:0;}a:link,a:visited,a:hover,a:active{text-decoration:none;color:#FFCC00;}a:hover{text-decoration:underline;}a .button{color:#FFCC00;text-decoration:none;}h1,h2,h3,h4,h5{color:#C60;margin:0;padding:0;text-shadow:1px 1px 1px #000000;}h1{font-size:32px;}h1 a:link,h1 a:visited{color:#C60;text-decoration:none;}h1 a:hover,h1 a:active{color:#F90;text-decoration:none;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{color:#0099CC;font-size:24px;margin:0;padding:0;}a:focus{outline:none;}img#floatLeft{float:left;width: 100px;height: 100px;margin-right:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}/**************************************Content**************************************/#content{width:700px;float:left;height:100%;}.construction{clear:both;margin-left:auto;margin-right:auto;}#wrapper{clear:both;width:700px;padding-top:10px;padding-bottom:10px;}/*************************************Footer*************************************/.footer{color:#CCCCCC;font-size:12px;text-align:left;}

No Html was changed.I also tried taking the floats off everything, still didn't work.I tried putting it on the body tag and it still stopped at the same spot -.-. I can get it too work when I apply no styling to the html, and make the body have the left bar background.However, that takes out the lighter grey with stripes background. So I try to make it so the html carries the light grey stripped background, and then have the body have the left bar background. But then the background stops again! While the html background still continues. Any ideas bud?

Edited by Krewe
Link to comment
Share on other sites

I knew you were going to back with this, the reason is because the container can't determine the area of floated child elements, so use overflow:hidden; to fix this, and you will have to remove height:100%;

#container {	background-image: url("../images/stripes3.png");	background-position: left top;	background-repeat: repeat-y;	clear: both;    float: left;     /* height: 100%; removed by dsonesuk*/	min-width: 900px;	overflow: hidden; /* added by dsonesuk */	width: 100%;}

Link to comment
Share on other sites

Damn you're good...I was thinking I had to use overflow, but I do not know it's function well enough.Thank you Dsone. I understand why this page it looks the way it does, but how can I fix it?I am puzzled how to fix it, without putting back the 100%. Http://www.codekrewe.com/contact.php&Http://www.codekrewe.com/ Krewe

Edited by Krewe
Link to comment
Share on other sites

I fixed it, but you can tell me how many rules I broke :PIf I broke no rules I'll be amazed. CSS: This is all the code I changed really.

@charset "utf-8";/* CSS Document */html, body{margin:0;padding:0;height:100%;}body{background-color:#444444;background-image:url(../images/stripes2.png);font-family:Arial, Helvetica, sans-serif;text-shadow:0px 1px 1px #000000;color:#CCCCCC;}#container{width:100%;height:100%;}a img{border:0;}a:link,a:visited,a:hover,a:active{text-decoration:none;color:#FFCC00;}a:hover{text-decoration:underline;}a .button{color:#FFCC00;text-decoration:none;}h1,h2,h3,h4,h5{color:#C60;margin:0;padding:0;text-shadow:1px 1px 1px #000000;}h1{font-size:32px;}h1 a:link,h1 a:visited{color:#C60;text-decoration:none;}h1 a:hover,h1 a:active{color:#F90;text-decoration:none;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{color:#0099CC;font-size:24px;margin:0;padding:0;}a:focus{outline:none;}img#floatLeft{float:left;width: 100px;height: 100px;margin-right:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */margin-top:20px;}/*************************************Navigation*************************************/#nav{background-image:url(../images/stripes2.png);background-color:#333333;position:fixed;top:0;left:0;width:200px;padding-left:10px;padding-right:10px;height:100%;}.button {margin-top:10px;border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow:	0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow:		 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;font: bold 11px Arial;padding: 6px 10px;white-space: nowrap;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background:	-moz-linear-gradient(top, #333, #444444);background:	 -ms-linear-gradient(top, #333, #444444);background:	  -o-linear-gradient(top, #333, #444444);cursor: pointer;}.button:hover, .button:focus {   border-color: #333;   background: -webkit-linear-gradient(top, #333, #444444);   background:	-moz-linear-gradient(top, #333, #444444);   background:	 -ms-linear-gradient(top, #333, #444444);   background:	  -o-linear-gradient(top, #333, #444444);   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;   -moz-box-shadow:	0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;   box-shadow:		 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;}.button:active {   border: 1px solid #333;   border-bottom-color: #333;   border-top-color: #444;   -webkit-box-shadow: inset 0 2px 4px #000;   -moz-box-shadow:	inset 0 2px 4px #000;   box-shadow:		 inset 0 2px 4px #000;   background: -webkit-linear-gradient(top, #444444, #333);   background:	-moz-linear-gradient(top, #444444, #333);   background:	 -ms-linear-gradient(top, #444444, #333);   background:	  -o-linear-gradient(top, #444444, #333);}/**************************************Content**************************************/#content{min-width:700px;height:100%;margin-left:230px;}.construction{clear:both;margin-left:auto;margin-right:auto;}#wrapper{clear:both;width:700px;padding-top:10px;padding-bottom:10px;}.box{border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow:	0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow:		 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;padding: 6px 10px;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background:	-moz-linear-gradient(top, #333, #444444);background:	 -ms-linear-gradient(top, #333, #444444);background:	  -o-linear-gradient(top, #333, #444444);margin-top:10px;margin-bottom:10px;}/*************************************Footer*************************************/.footer{color:#CCCCCC;font-size:12px;text-align:left;}/*************************************Portfolio*************************************/div.cover{float:left;width:200px;height:200px;overflow:hidden;position:relative;z-index:10;margin:10px;-webkit-box-shadow: 0 10px 6px -6px black;-moz-box-shadow: 0 10px 6px -6px black;box-shadow: 0 10px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}.inside {position:absolute;top:0;left:0;background-color:#333333;background-image:url(../images/stripes2.png);background-repeat:repeat;color:#FF9900;border:0px groove #000000;-moz-box-shadow:	3px 3px 10px 5px #111;-webkit-box-shadow: 3px 3px 10px 5px #111;box-shadow:		 3px 3px 10px 5px #111;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}div.inside img {float:left;height:200px;}.inside p{padding:0;margin:0;}.inside h1{padding:0;margin:0;}div.cover:hover{overflow:visible;z-index: 10000;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}div.cover:hover #container{overflow:inherit;}div.inside:hover{width:400px;height:auto;padding:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}div.inside:hover img {height:auto;}

Edited by Krewe
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
 Share

×
×
  • Create New...