• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

can't get images properly spaced

Hi!

On this page: http://www.topsecurityinc.com/alarm-monitoring.asp
I have three images in the middle of the page.
I can't seem to figure out how to get all three images centered horizontally.
The last two images are too close together.
I calculated from the left border there should be 61 pixels margin then the first image, then 61 pixels then the second image then 61 pixels then the third image and then 61 pixels to the right border..
Any corrections to the divisions would be appreciated.
TIA
0
TrueBlue
Asked:
TrueBlue
  • 4
1 Solution
 
Tom BeckCommented:
I don't think there is room for 61px all the way across, but how about this solution?
...

<div style="width: 100%;">

  <div style="float: left; margin-left: 48px;">

    <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator Stations" src="Web/images/Monitoring-Station-Operator-Stations.jpg"></div>

               </div>

          </div>

      </div>

    </div>

  </div>  

   

 <div style="float: left; margin-left: 50px;">

     <div class="BoxtopLeftCorner">

        <div class="BoxtopRightCorner">

            <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator" src="Web/images/Monitoring-Station-Operator.jpg"></div>

               </div>

            </div>

        </div>

     </div>

 </div>

 

 <div style="float: right; margin-right: 50px;">

  <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Receivers" src="Web/images/Monitoring-Station-Receivers.jpg"></div>

               </div>

          </div>

      </div>

   </div>

  </div>

</div>

...

Open in new window

0
 
Tom BeckCommented:
This is little better. I just noticed why it did not work for you the first time. margin-left was spelled with two "t"s.
<div style="width: 100%;">

  <div style="float: left; margin-left: 47px;">

    <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator Stations" src="Web/images/Monitoring-Station-Operator-Stations.jpg"></div>

               </div>

          </div>

      </div>

    </div>

  </div>  

   

 <div style="float: left; margin-left: 50px;">

     <div class="BoxtopLeftCorner">

        <div class="BoxtopRightCorner">

            <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Operator" src="Web/images/Monitoring-Station-Operator.jpg"></div>

               </div>

            </div>

        </div>

     </div>

 </div>

 

 <div style="float: left; margin-left: 50px;">

  <div class="BoxtopLeftCorner">

      <div class="BoxtopRightCorner">

          <div class="BoxbottomLeftCorner">

               <div class="BoxbottomRightCorner"> 

                    <div class="Boximage"><img height="131" width="196" alt="Florida Alarm Monitoring Center - Receivers" src="Web/images/Monitoring-Station-Receivers.jpg"></div>

               </div>

          </div>

      </div>

   </div>

  </div>

</div>

Open in new window

0
 
Tom BeckCommented:
Still does not work either way in IE compatibility mode though. Were you aware of this?
0
 
TrueBlueAuthor Commented:
tommyBoy,
Thanks for pointing the typo out. :)
Any idea why IE compatibility mode does not like the boxes?
0
 
Tom BeckCommented:
Easy fix (I hope).

Change these two rules from float:right to float:left.


.BoxbottomRightCorner{background:url(../web/images/Box_Bottom_Right_Corner.gif) no-repeat right bottom;float:left;}
.BoxtopRightCorner{background:url(../web/images/Box_Top_Right_Corner.gif) no-repeat right top;float:left;}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now