CSS Query

[trippytango]

Hello, I am currently making a website for a project within university and there is a section of CSS which is confusing me to why it isn't functioning like i thought it would.

#ConAd {
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #D4D3D3;
}

#Content {
	height: 100%;
	width: 750px;
	float:left;
	padding: 10px;

}

#Advert {
	height: 100%;
	width: 310px;
	float:right;
	padding: 10px;


}

<div id="ConAd" >
        <div id="Content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
        <div id="Advert">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        </div>
    </div>

http://gyazo.com/4efcbfa28c20a75e257e9710de9a1168

Here is the code and image of what is happening. I want the dark gray section "ContAd" to be constantly wrapping around the content and advert while providing a colored background "dark gray".

Except with the padding it is only staying at the top behind the content and advert divs.

Does anyone have any idea how i can make this happen?

[trippytango]

I have noticed in the HTML code </div> is at end of lorem ipsum text for content div. Just before anyone rush's and says i'm missing the div.

[DeveloperBill]

Not sure if it is exactly the look you have in mind, but try this:

#Wrapper {
	padding: 30px;
	background-color: #D4D3D3;
	}

#ConAd {
	background:white;
	overflow:hidden;
	}
	
#Content {
	width: 750px;
	float:left;
	padding: 10px;
}

#Advert {
	width: 310px;
	float:right;
	padding: 10px;
}

<div id="Wrapper">
	<div id="ConAd" >
		<div id="Content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
		</div>
		<div id="Advert">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
		</div>
	</div>
</div>	

[trippytango]

Thank you very much Bill, this is exactly what i was looking for. I was unaware of the functionality of the overflow command. I will be coming back to this website if i have any other queries. Thanks

Not sure if it is exactly the look you have in mind, but try this:

#Wrapper {
	padding: 30px;
	background-color: #D4D3D3;
	}

#ConAd {
	background:white;
	overflow:hidden;
	}
	
#Content {
	width: 750px;
	float:left;
	padding: 10px;
}

#Advert {
	width: 310px;
	float:right;
	padding: 10px;
}

<div id="Wrapper">
	<div id="ConAd" >
		<div id="Content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
		</div>
		<div id="Advert">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar ligula. Pellentesque pharetra, massa a facilisis dapibus, risus libero fringilla nulla, vitae laoreet dui mi ut lorem. Praesent a metus vitae sem eleifend tristique. Fusce hendrerit laoreet quam, id molestie nibh vestibulum non. Mauris tempus, nisl at tristique mattis, lorem tellus hendrerit lacus, at mattis purus quam at risus. Curabitur dapibus lectus tempor augue scelerisque vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
		</div>
	</div>
</div>