0

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; }
/*  - - - -- - - - - - - -- */

Edited by diafol: article not code snippet

3
Contributors
6
Replies
37
Views
4 Years
Discussion Span
Last Post by diafol
0

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")?

0

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.

0

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%.

Attachments bpweb-css-1.jpg 294.55 KB
0

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.

Attachments bpweb-mockup-1.jpg 463.67 KB
0

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.

Edited by diafol

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.