CSS Box cannot be aligned

[wrathyimp]

I have added the CSS code for the related boxes.
I cannot figure the correct padding that I am missing on the 3rd Column, which is going below.

You can check the following page.
http://bp.com.kw/index-1-2-4.html

Thanks

.box-24, .box-25, .box-26{float:left; background:#e5e8e3; padding:10px 20px; font-size:10px; height:580px;}
.third-wrap{width:980px;}
.box-24{width:375px; margin-right:25px; }
.left2-wrap{float:left; width:145px;}
.left2-wrap-2{float:left; margin-top:15px; width:350px; }
.right2-wrap{float:left; margin-left:0px; margin-top:5px; width:375px; color:#4a4a4a;}
.right2-wrap p{text-align:left; padding-top:5px;}
.right2-wrap strong{text-align:left; padding-top:15px; font-size:15px; color:#717070; padding-bottom:5px; font-weight:bold;}
.link{color:#4a4a4a; text-decoration:none; font-size:12px; font-weight:bold;}
.box-25{width:270px; margin-right:20px; font-size:12px !important; padding:20px 10px 0px 10px!important; }
.box-nav ul{margin:0px; padding:0px;}
.box-nav li{list-style:none; padding:12px 0px 10px 5px;}
.box-nav ul li a{font-family:Arial, Helvetica, sans-serif; text-decoration:none; font-size:12px ; color:#282727;}
.box-nav ul li a:hover{color:#282727;}
.box-26{width:225px; padding:20px 0px 0px 5px!important;}
.last2-left-wrap{float:left; width:210px;}
.last2-right-wrap{float:left; margin-left:3px; margin-top:5px; width:210px; font-size:12px; color:#4a4a4a;}
.last2-right-wrap p{text-align:left; padding-top:5px; font-size:12px; color:#717070; padding-bottom:5px;}
.last2-right-wrap strong{text-align:left; padding-top:5px; font-size:13px; color:#717070; padding-bottom:5px; font-weight:bold;}
.last2-right-wrap .link{color:#4a4a4a; text-decoration:none; font-size:12px; font-weight:bold;}
.border{background:url(../images/border.jpg) no-repeat center; padding:10px 0;}
.box-25B{float:left; background:#3763a1; font-size:10px; height:280px;}
.box-25B{width:270px; margin-right:20px; font-size:12px !important; padding:20px 10px 0px 10px!important; }
.box-nav ul{margin:0px; padding:0px;}
.box-nav li{list-style:none; padding:12px 0px 10px 5px;}
.box-nav ul li a{font-family:Arial, Helvetica, sans-serif; text-decoration:none; font-size:12px ; color:#282727;}
.box-nav ul li a:hover{color:#282727;}
.center-down{width:270px; height:180px; background:#3763a1; text-align:center; padding-top:180px; padding-left:0px; }
/*  - - - -- - - - - - - -- */

[diafol]

Do you think you could be more specific with this? Providing a link and dumping some random CSS isn't going to get you quick answers (I may be wrong).

How about you post the relevant HTML and the CSS applied to the offending element and any container for that element.

Have you used any browser tools to look at the resolved CSS (e.g. like Chrome's "Inspect Element")?

[<M/>]

Can you also show the HTML and a snapshot/link to what you did wrong? Maybe we can work from there.

Also, why not just use a browser editing tool like Diafol mentioned.

[wrathyimp]

OK, Sorry for not being abe to explain in details.

I have attached the screenshot and pointed out the issue of the alignment or indents.

I need to adjust the #1 first as its not fixed in 100% zoom of browsers.
The #2 is appears only when I zoom out below 75%.

[wrathyimp]

the CSS file that I am using is HERE or http://bp.com.kw/css/style-2.css

And for the html I think you can just view the source from the browser, Its just HtML only.

I hope this help in my problem explaination.

Thanks

[wrathyimp]

This i the output required. I need to a the blue text png image in the second cloumn at the blottom.

I am almost there with my first design, but this blue text box with the whole second row to all the columns was added later.

[diafol]

I've just had a quick scan of your html and it looks ridiculously complicated for a simple 3 column layout. You seem to have a lot of separate classes. This makes it very difficult to pinpoint the issue, especially as you seem to float stuff. I advise using Chrome or Forefox and applying Chris Prederick's 'Web Developer' plugin/extension and outlining elements.