div's not positioning right, any help with fixing would be great

Hi,

If you visit Here you will see in most browsers that the left and right divs don't inline with the centre div, could anybody point me into the right direction in fixing this.


Thanks Joe

 

Hello, Try this:

add these styles to your stylesheet:

	.inline-wrapper {
	display: inline;
	float: left;
	} /* Sets display to inline, and makes everything float to the left */

	.dockend {
	position: relative;
	top: 40px;
	} /* Fixes positioning problem on these end pieces by relatively repositioning them. */

Code (markup):

Now, add div wrappers around the background-image divs with the class "inline-wrapper", and on your end pieces also use the class "dockend". Remove display declarations from your divs containing background images.

 <div id="dockWrapper" style="height: 79px;">
 <div style="text-align: center;">
 
<div class="inline-wrapper dockend">
  <div style="background : url('dock-left.png') no-repeat 0 0px; width: 45px; height: 47px; border-bottom : 2px solid rgb(220,220,200); margin-right: 0px;">&nbsp;</div>
</div><!-- /.inline-wrapper -->
<div class="inline-wrapper middle">
  <div id="dock" style="background : url('dock-center.png') repeat-x 0 40px; width: 660px; height: 77px; border-bottom : 2px solid rgb(220,220,200); margin-right: -4px; padding-bottom: 10px;">
  <ul>
			 <li><p style="padding: 0px; margin: 0px;" class="app-status">Running</p><img src="images/app-store.png" class="app" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="calendar-status">Running</p><img src="images/google_calendar.png" class="calendar" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="docs-status">Running</p><img src="images/google_docs.png" class="docs" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="mail-status">Running</p><img src="images/google_mail.png" class="mail" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="youtube-status">Running</p><img src="images/google_youtube.png" class="youtube" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="browser-status">&nbsp;</p><img src="images/mozicon128.png" class="browser" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="music-status">Running</p><img src="images/music.png" class="music" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="pics-status">Running</p><img src="images/pics.png" class="pics" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="video-status">Running</p><img src="images/video.png" class="video" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>
			 
			 <li><p style="padding: 0px; margin: 0px;" class="messenger-status">Running</p><img src="images/pidgin.png" class="messenger" style="position: relative; margin-top: 0.1px;" width="60" height="60"></li>	
		</ul>
  </div>
</div><!-- /.inline-wrapper -->
<div class="inline-wrapper dockend">
  <div style="background : url('dock-right.png') no-repeat left 0px; width: 45px; height: 47px; border-bottom : 2px solid rgb(220,220,200); margin-right: -4px;">&nbsp;</div>
</div><!-- /.inline-wrapper -->
 </div>
 </div>

Code (markup):

Adjust your outside wrapper for positioning the whole thing on your page (like centering).

Also as a suggestion, you should use classes and ids and declare styles in the stylesheet instead of declaring them on the markup tags themselves using style="". It makes it easier to find and edit these things, and makes tools like editcss much more effective. Another reason is; while the older standards will take style="" just fine, using styles in the markup like that will not validate in XHTML.

 

Hi,

Thankyou worked perfect for what we needed, Yeah i don't normaly use the style="" that was just for testing i've now converted to use classes and ids.

Rep Added!


Joe

 

Sweet, Thanks for the rep!
I'm glad I was able to help you out