Essentially, the problem is that I have a containing div, contentMain, that is parent to one div, contentBar, which has two horizontally stacked child div elements, infoBoxL and infoBoxR and another (which is alone). Now, I am floating left infoBoxL and infoBoxR and the rendering is fine. In infoBoxMid, I clear the float but want there to be some whitespace between the two former content containers.
Attempting a margin-top, Firefox does nothing while IE properly displays the content with the margin space. My eyes are glazed so I cannot be sure of the source, but I am hypothesizing that it has something to do with an inline attribute.
Any help would be extremely appreciated, particularly because I want to get to my javascript and am furious at myself for being bogged down in CSS. Anyway...
Since psionics are for games, here is my css and html code:
/* CSS Document */
* {
padding:0;
margin:0;
}
/*
#content {
position:relative;
left:0;
width:970px;
border:1px solid #000066;
background-color:#FFFFFF;
color:#666666;
display:block;
margin: 0 0 0 0;
padding: 0 0 0 0;
min-height: 500px;
}
*/
#contentMain {
position:relative;
margin: 20px 10px 20px 15px;
width:678px;
overflow:auto;
border:solid 1px #000066;
}
.contentBar{
position:relative;
margin-top:30px;
margin-bottom:35px;
margin-left:auto;
margin-right:auto;
width:650px;
color:#666666;
}
#infoBoxL {
width:300px;
margin-top:5px;
margin-bottom:5px;
float:left;
}
#infoBoxR{
width:300px;
margin-top:5px;
margin-bottom:5px;
margin-left: 35px;
float:left;
}
#infoBoxMid {
position:relative;
background-color:#666666;
margin-left:auto;
margin-right:auto;
width:320px;
clear:left;
}
/*
#contentSide {
width:200px;
margin-top:20px;
margin-left:10px;
float:left;
}
.sidePill {
margin-left:auto;
margin-right:auto;
width:170px;
}
*/
.pHeading{
font-family:Georgia, Times New Roman, Times, serif;
text-align:left;
font-size:medium;
font-weight:bold;
color:#000066;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mangin Web Development</title>
<link href="assets/styles/styles_content.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contentMain">
<div class="contentBar">
<div id="infoBoxL">
<p class="pHeading">Web Development</p>
<p>Our company specializes in planning, configuring, developing, and deploying websites for a range of needs. Perhaps you are a client in need of revamping a current site, or you are new to the Internet. Whatever the case, our company promises to meet your needs with personalized and dedicated service and support.</p>
</div>
<div id="infoBoxR">
<p class="pHeading">Consulting and Instruction</p>
<p>Businesses must remain well-versed in the latest information technologies in order to maintain and improve the effectiveness of their web platforms. Our company offers consulting services to ensure that systems administrators keep their firms as internet leaders.</p>
</div>
</div>
<div id="infoBoxMid">
<p class="pHeading">Why Us?</p>
<p>
» Data Security and Integrity<br />
» Transparent Pricing and Project Management<br />
» Personalized Service<br />
</p>
</div>
</div>
</div>
<div id="contentSide">
<div class="sidePill">
<p> This is side pill element A. This is just filler text.</p>
</div>
<div class="sidePill">
<p> This is side pill element B. This is just filler text. There is a serious problem with the layout of this CSS and I am determined to resolve it in time for tomorrow evening.</p>
</div>
</div>
</body>
</html>
