Positional woes

[Steven]

http://www.theudo.net/mapSo I have begun work on a new website. There are always dozens of little problems that come up during the design, but this I haven't seen before. For some reason the markup order is changed! Here's the markup:

   <div id="box">   		<div class="box_employers"></div>		<div class="box_brokers"></div>		<div class="box_admins"></div>   </div>

Here is the CSS:

#box {	height: 254px;	width: 604px;	background: url(images/box.jpg); }.box_employers {	float: left;	height: 58px;	width: 201px;	background: url(images/box_employers.jpg); 	position: relative;	top: 77%; }	.box_employers:hover {		background: url(images/box_employers_hover.jpg) }.box_admins {	float: right;	height: 58px;	width: 201px;	background: url(images/box_admins.jpg); 	position: relative;	top: 77%; }	.box_admins:hover {		background: url(images/box_admins_hover.jpg) }.box_brokers {	float: right;	height: 58px;	width: 201px;	background: url(images/box_brokers.jpg); 	position: relative;	top: 77%; }	.box_brokers:hover {		background: url(images/box_brokers_hover.jpg) }

The order of the 3 box images must be EMPLOYERS - ADMINS - BROKERS, but for some reason when they are placed in that order int he Markup it displays it on the site as EMPLOYERS - BROKERS - ADMINS. So I had to slap the markup with my ghetto stick and change the markup to employers - brokers - admins. Then it displayed the page as employers - admins - brokers. Have any of you seen this before?Also, but of smaller importance at the moment, the employers div is placing an extra 1 pixel space to its right side. Notice how it's white line is thicker than the white line between the next two boxes.Just ask away and I will try to clarify if you do not understand what's going on.Thanks in advance!- Steven

[rzea]

Hello Steven,Solution: just float all your DIVs to the left.Doing this will stack/order your layers in the order you need. You also need to stack your CSS classes in the correct order, as with the HTML.--Now, for the white border that divides the boxes, easy.What you need to do is just add a border-left to the .box_brokers and .box_admins DIVs:

div.box_brokers,div.box_admins {	 border-left:#fff 1px solid;}

Lets us know how it goes.

[Steven]

It worked out!Thanks a lot