Help aligning divs - something cascading that I don't see?

[yelow]

I have a column of a bunch of DIVs stacked one on another, all with clear:both; so that it's single-column.

Everything is float:left; inside the contentDiv, also.

I may be running into an issue of mismatched position:relative; and floats, I don't completely understand the rules, and any help I've found online either dictates that I do something completely different or dives into a 17-page abstract of table structure that I unfortunately don't have time or patience for.

Does anyone see off the top of their heads why it's not doing it right?


Included are the define pages main_page.php content code and the abridged index_home.css stylesheet:
(I was 500 charas over limit, had to truncate. Not many big changes to the stock stylesheet, mostly colors and padding and stuff.)

<div class="masterTopPane">
	<p class="topFirst">Catering to your type of business!</p>
	<p class="topSecond">select your industry below:</p>
	
	<div class="topThird">
	<ul class="Vertical" id="bigLinks">
	<li><a href="/index.php#restaurants">Restaurants</a>
	<li><a href="/index.php#apparel">Apparel + Shoes</a>
	<li><a href="/index.php#surveillance">Surveillance</a>
	<li><a href="/index.php#categories">All Categories</a>
	</ul>
	</div>
</div>

<div class="topPane">
	<a name="restaurants">
	<p class="paneTop">Restaurants + Food Service</p>
	</a>
</div>
<div class="middlePane">
	<div class="paneFloaterContainer">

	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/food1.jpg" alt="one">
	<h3 class="floaterTitle">Quick Service</h3>
	<br />
	<p class="paneFloater">Quick-service setups available.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/food2.jpg" alt="two">
	<h3 class="floaterTitle">Fine Dining</h3>
	<br />
	<p class="paneFloater">Advanced Aldelo configurations, ease of use.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/food3.jpg" alt="three">
	<h3 class="floaterTitle">Sushi</h3>
	<br />
	<p class="paneFloater">All kinds of cuisines are manageable.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/food4.jpg" alt="four">
	<h3 class="floaterTitle">Pizza</h3>
	<br />
	<p class="paneFloater">'Topping' and other modules expand your possibilities.</p>
	</div>
	
	</div>
</div>
<div class="bottomPane">
	<a href="http://store.persite.com/index.php?main_page=index&cPath=21_18">
	<p class="paneBottom">Click here to see our full list of restaurant products and services.</p></a>
</div>

<div class="topPane">
	<a name="apparel">
	<p class="paneTop">Apparel + Shoes</p>
	</a>
</div>
<div class="middlePane">
	<div class="paneFloaterContainer">

	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/retail1.jpg" alt="one">
	<h3 class="floaterTitle">Apparel</h3>
	<br />
	<p class="paneFloater">Large stores see use in the utility of customer tallying.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/retail2.jpg" alt="two">
	<h3 class="floaterTitle">Footwear</h3>
	<br />
	<p class="paneFloater">Small stores prefer View-From-Home systems.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/retail3.jpg" alt="three">
	<h3 class="floaterTitle">Boutiques</h3>
	<br />
	<p class="paneFloater">Track your merchandise.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/retail4.jpg" alt="four">
	<h3 class="floaterTitle">High Fashion</h3>
	<br />
	<p class="paneFloater">Customer management and multiple price levels, too!</p>
	</div>
	
	</div>
</div>
<div class="bottomPane">
	<a href="http://store.persite.com/index.php?main_page=index&cPath=21_19">
	<p class="paneBottom">Click here to see our full list of retail solutions.</p></a>
</div>

<div class="topPane">
	<a name="surveillance">
	<p class="paneTop">Surveillance + Security</p>
	</a>
</div>
<div class="middlePane">
	<div class="paneFloaterContainer">

	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/surveillance1.jpg" alt="one">
	<h3 class="floaterTitle">Security</h3>
	<br />
	<p class="paneFloater">From the comfort of your computer.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/surveillance2.jpg" alt="two">
	<h3 class="floaterTitle">Surveillance</h3>
	<br />
	<p class="paneFloater">Cameras installed and configured.</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/surveillance3.jpg" alt="three">
	<h3 class="floaterTitle">Capturing</h3>
	<br />
	<p class="paneFloater">We support 4- 8- and 16-camera systems, and more!</p>
	</div>
	
	<div class="paneFloater">
	<img src="/includes/templates/persite/images/pane/surveillance4.jpg" alt="four">
	<h3 class="floaterTitle">Nanny-Cams</h3>
	<br />
	<p class="paneFloater">Discreet installation and positioning is available.</p>
	</div>
	
	</div>
</div>
<div class="bottomPane">
	<a href="http://store.persite.com/index.php?main_page=index&cPath=4">
	<p class="paneBottom">Click here to see our full list of surveillance products and services.</p></a>
</div>

<div class="topPane">
	<a name="allcategories">
	<p class="paneTop">All Categories</p>
	</a>
</div>
<div class="middlePane">
	<div class="fullPaneFloater">

	<ul class="floaterList">
	<li><a href="http://store.persite.com/index.php?main_page=page&id=5"><img src="/includes/templates/persite/images/pane/thumb_pos.jpg"></a>
	<li><a href="http://store.persite.com/index.php?main_page=page&id=7"><img src="/includes/templates/persite/images/pane/thumb_accesscontrol.jpg"></a>
	<li><a href="http://store.persite.com/index.php?main_page=page&id=6"><img src="/includes/templates/persite/images/pane/thumb_surveillance.jpg"></a>
	<li><a href="http://store.persite.com/index.php?main_page=page&id=8"><img src="/includes/templates/persite/images/pane/thumb_audiovisual.jpg"></a>
	</ul>
	
	<ul class="floaterList">
	<li><a href="http://store.persite.com/index.php?main_page=page&id=10"><img src="/includes/templates/persite/images/pane/thumb_webservices.jpg"></a>
	<li><a href="http://store.persite.com/index.php?main_page=page&id=10"><img src="/includes/templates/persite/images/pane/thumb_networking.jpg"></a>
	<li><a href="http://store.persite.com/index.php?main_page=page&id=11"><img src="/includes/templates/persite/images/pane/thumb_telephony.jpg"></a>
	<li><a href="http://store.persite.com/index.php?main_page=page&id=12"><img src="/includes/templates/persite/images/pane/thumb_support.jpg"></a>
	</ul>
	
	</div>
</div>
<div class="bottomPane">
</div>

...
	
img#posunit {
	float: right;
	margin: 5px;
	}
	
ul#homeList {
	font-size: 10px;
	list-style-position: outside;
	list-style-image: url(http://store.persite.com/images/yellow_bullet.gif);
	}
	

	
.masterPane {
float: left;
width: 570px;
}

.masterTopPane {
background-image: url(/includes/templates/persite/images/pane/topdiv_bg.jpg);
background-position: top left;
background-repeat: no-repeat;
width: 550px;
height: 325px;
}

.topdivInsides {
margin: 50px;
}

p.topFirst, p.topSecond, p.topThird {
padding-left: 40px;
}

p.topFirst {
padding-top: 25px;
font-size: x-large;
margin: 0em;
color: #537294;
}

p.topSecond {
font-size: medium;
margin: 0em;
color: #273542;
}

.topThird {
float: left;
width: 260px;
padding-bottom: 25px;
font-size: x-large;
color: #f25b11;
text-align: right;
}

#bigLinks a a:link, a:active: a:visited {
color: #f25b11;
}

#bigLinks a:hover{
color: #FA6A0A;
}

ul.Vertical {
list-style-type: none;
}
	
.topPane {
clear: left;
float: left;
/*border: 1px solid yellow;*/
background-image:url(../images/pane/panebg_01.gif);
background-position:top;
background-repeat:no-repeat;
height:49px;
width:570px;
}

.middlePane {
clear: both;
float: left;
/*border: 1px solid red;*/
background-image:url(../images/pane/panebg_03.gif);
background-position: top;
width:570px;
}

.bottomPane {
clear: both;
float: left;
/*border: 1px solid blue;*/
background-image:url(../images/pane/panebg_05.gif);
background-position:top;
background-repeat:no-repeat;
height:37px;
width:570px;
}

.paneFloaterContainer {
clear: both;
width: 508px;
padding-left: 30px;
}

.fullPaneFloater {
/*border: 1px solid #ededed;*/
clear: both;
float: left;
}

.floaterList li{
display: inline; 
list-style-type: none;
padding-left: 18px;
}

.paneFloater {
/*border: 1px solid #ededed;*/
float: left;
padding: 1px;
}

p.paneFloater {
padding: 3px 5px 3px 5px;
text-align: left;
width: 100px;
}

.floaterTitle {
padding-top: 5px;
padding-left: 5px;
}

a.paneLinker {
text-align: center;
}

.rightAligned {
float: right;
font-size: small;
color: #537294;
}

.paneTop {
margin: 0em;
font-size: large;
color: #537294;
padding: 20px 5px 0px 30px;
}

.paneBottom {
padding: 8px 0px 0px 50px; 
margin: 0em; 
font-size: small; 
color: gray;
}

Thanks for looking.

-Tim

[Kim]

Exactly what page doesn't look right? what browser?

[yelow]

Every browser shows it the same, which is why I suspect that it's not a glitch but something I inadvertently put in.

I guess it's comforting to know that it doesn't throw itself in your eyes, but on the main page the top div is just one with a bg image, and all the other ones are split into top-middle-bottom. The very top one is JUST slightly to the left of everything else, and all others align perfectly with each other.

thanks

-Tim

[yelow]

http://browsershots.org/http://store.persite.com/

valid until 12:30 PM eastern standard on Sunday the 26th.

Every browser shows it the same except MSIE 5.5 (which just totally nukes everything) and MSIE 8 (which is no better thanks for a peek into the future microsoft may you ############## rot in hell)

[yelow]

Is there really no one that sees what the problem is with this?

http://store.persite.com

[yelow]

I'm starting a new thread, it turns out the issue is not with the DIVs but the css property for the description container (which is conspicuously missing from my stylesheet fwiw).

Please lock or merge this thread with the new one: Why am I having alignment issues?