Why are my divs overlapping?

[wee493]

My div's are overlapping in my center column. I'm pretty sure it's a CSS problem. Here is my code. or u can check it out on my site here http://wiurl.net/index.html

 

CSS

<style>
	/* Begin Mosc Section */
	body {
		margin-left: 15px;
		margin-right: 15px;
		font-family: Arial, Helvetica, sans-serif;
		background-color: #EEE;
	}

	/* End Misc Section */

	/* Begin Header Secion */
	.header {
		width: 100%;
		border-bottom: 2px solid #000;
		min-width: 620px;
	}
	.header h1 {
		size: 14px;
		font-family: Arial, Helvetica, sans-serif;
		color: #1E90FF;
		display: inline;
	}
	.header small {
		font-size: 15px;
		font-family: Arial, Helvetica, sans-serif;
		margin-left: 10px;
	}
	.header ul {
		list-style: none;
		padding: 0px;
		margin: 12 0 0 0px;
	}
	.header ul li {
		display: inline;
	}
	.header ul li a {
		color: #1E90FF;
		text-decoration: none;
		font-size: 1.2em;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
	}
	.header ul li span {
		padding: 0 9 0 9px;
		margin-bottom: 5px;
		font-weight: 900;
		font-size: 19px;
		color: #AAA;
	}
	.header ul li a:hover {
		text-decoration: underline;
	}
	#nav {
		float: right;
		margin-right: 30%;
		margin-top: -5px;
	}
	/* End Header Section */

	/* Begin Content Section */
	#content {
		width: 100%;
		margin-top: 0.75em;
		-moz-border-radius: 7px;
		border: 1px solid #BBB;
		background-color: #FFF;
		display: inline-block; /*sets hasLayout - required for IE*/
		display: block; /*resets to proper property value without resetting layout*/
		overflow: hidden; /*causes modern browsers to enclose child floats*/ 
	}
	#left_col {
		float: left;
		margin: 7px 0px 7px 7px;
		width: 67%;
		vertical-align: top;
		min-width: 550px;
	}
	#right_col {
		float: right;
		vertical-align: top;
		margin: 7px 7px 7px 3%;
		padding-left: 10px;
		width: 26%;
		border-left: 1px solid #000;
	}
	/* Left Settings */
	.create {
		/*background-color: #EEE;
		-moz-border-radius: 15px;
		border: 1px solid #BBB;*/
		height: 6em;
		padding: 15px;
		width: 100%;
	}
	.create h3 {
		padding: 0px;
		margin: 0 0 15 0px;
		border-bottom: 1px solid #BBB;
	}
	.create .inner {
		background-color: #EEE;
		-moz-border-radius: 15px;
		border: 1px solid #BBB;
		padding: 15px;
	}
	.create input[type=text] {
		height: 30px;
		font-size: 18px;
		width: 70%;
		padding-left: 5px;
	}
	.create input[type=submit] {
		height: 30px;
		padding-bottom: 1px; width: 110px; height: 30px; font-size: 14px; color: #FFF; background: url('http://bit.ly/static/v20/images/button_shorten.png') no-repeat 0 0; border: 0;
	}
	.create .input_desc {
		font-size: 19px;
		padding-right: 3px;
	}
	.create .indent {
		padding-left: 45px;
	}
	/* End Left Settings */

	/* Right Settings */
	.right_section {


	}
	.right_section ul {
		list-style: none;
		padding: 0 0 0 3px;

	}
	.right_section ul li {
		background-color: #DDD;
		border-top: 1px solid #CCC;
		padding: 4 0 2 7px;
	}
	.right_section ul li:hover {
		background-color: #CCC;	
		border-top: 1px solid #AAA;	
	}			
	.right_section h3 {
		font-size: 15px;
		color: #1E90FF;
		padding: 3px 0px 2px 0px;
		margin: 0 0 10 0px;
		border-bottom: 1px solid #CCC;
	}

	/* End Content Section */
</style>

 

HTML section being effected

<div id="content">
<div id="left_col">

	<div class="create">
		<h3>Create a WiURL</h3>

		<div class="inner">
           	<span class="input_desc">URL:</span><input type="text" name="url">
		<input type="submit" value="Create WiURL"><br />
            <span class="indent">Submit a URL be shortened</span>
            hey sup<br> test
            <br> hello?
            </div>
	</div>

        <div class="create">
		<h3>Upload an Image</h3>

		<div class="inner">
		<span class="input_desc">File:</span><input type="file" name="file">
		<input type="submit" value="Upload"></div>
	</div>


</div>

 

[fortnox007]

Heya i am prolly the worst ccs'er on earth, but fooling around a bit with Firebug showed me that if you put the height to 10 em the div's are better seperated.

.create {
height:10em;
padding:15px;
width:100%;
}

Let me know if you found this helpfull since this teaches me also hehe 

[fortnox007]

ANyways, if the above helped you.... May i asked where you learned your css? A book , forum , site, and above which  ? If you can recomend me something i would be pleased to hear it.

cheers,

 

P.s Install Firebug btw it showed me where your divs end and a new one starts

[wee493]

Heya i am prolly the worst ccs'er on earth, but fooling around a bit with Firebug showed me that if you put the height to 10 em the div's are better seperated.

.create {
height:10em;
padding:15px;
width:100%;
}

Let me know if you found this helpfull since this teaches me also hehe 

 

wow, thank you. I fell like a total idiot. 

[wee493]

ANyways, if the above helped you.... May i asked where you learned your css? A book , forum , site, and above which  ? If you can recomend me something i would be pleased to hear it.

cheers,

 

P.s Install Firebug btw it showed me where your divs end and a new one starts

 

W3 Schools is where I learned http://www.w3schools.com/Css/default.asp

[fortnox007]

Ty for the site suggestion. He no worries whole empires are build on idiots