Safari is overlapping the content

I have tested the following css and html in Safari and the result was that it overlapped. Can someone please tell me how I can fix this problem? Thanks in advance.

I have my Internet Explorer css in separate css page.


#contentWrapper {
	background: #FFF;
    overflow: hidden;
    padding: 1em;
    position:relative;
    z-index:1;
    margin-top:-20px;
    width: 100%;
	color: inherit;
}

#contentWrapper a{
	color: #002535;
	text-decoration: underline;
	background: inherit;
}

#contentWrapper a:hover {
	text-decoration: none;
}

#contentWrapper a:visited {
	color: #000;
}

#contentWrapper p {
	margin-top: 1em;
}

#contentLeft {
	float: left;
	width: 450px;
	position: relative;
	padding-bottom: 1em;
}

#contentRight {
	float: right;
	width: 350px;
	border-left: 1px #002535 solid;
	padding-left: 1em;
	position: relative;
	padding-right: 1em;
}

#contentBottom {
	width: 100%;
	margin-top: 0.5em;
	float: left;
	border-top: 1px #002535 solid;
	position: relative;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#servicesLeft {
	float: left;
	width: 280px;
	border-right: 1px #002535 solid;
	padding-right: 0.8em;
	position: relative;
}

#servicesMiddle {
	float: right;
	width: 270px;
	padding-right: 0.2em;
	position: relative;
}

#servicesRight {
	float: right;
	width: 280px;
	padding-left: 0.9em;
	border-left: 1px #002535 solid;
	position: relative;
}


	<div id="contentWrapper">
		<div id="contentLeft">
			<h3>Main title here</h3>
			<p>Paragraph 1</p>
			<p>Paragraph 2</p>
			<p>Paragraph 3</p>
			<p>Paragraph 4</p>
		</div>
		
		<div id="contentRight">
			<h3>Sub Title here</h3>
			<p>Paragraph 1</p>
			<p>Paragraph 2</p>
			<p>Paragraph 3</p>
		</div>
		
		<div id="contentBottom">
			<h3>Sub Title here</h3>
			<div id="servicesLeft">
				<h5>Product Title 1</h5>				
				<p>Paragraph 1</p>
				<p>Paragraph 2</p>
			</div>		
			
			<div id="servicesRight">
				<h5>Product Title 2</h5>
				<p>Paragraph 1</p>
				<p>Paragraph 2</p>
			</div>	
			
			<div id="servicesMiddle">
				<h5>Product Title 3</h5>
				<p>Paragraph 1</p>
				<p>Paragraph 2</p>
			</div>			
		</div>
	</div>

I have just solved the problem by placing height: auto in #contentWrapper and #contentBottom.

Hi,

Glad you sorted it so there must have been something else going on :slight_smile:

height:auto is the default and is not needed unless you are over-ruling something else.

Safari looked the same as Firefox to me and I didn’t see the overlap you mentioned. However, I guess there was some code missing above so glad you got it working anyway.:slight_smile: