Removing unwanted space

[nofel]

Hi, i m working a website and there a maroon line throughout the page and below it are three boxes. now i have two issues.
1.i want the top of the boxes to touch with the bottom of maroon line.the maroon line have a margin-bottom:3px; i tried to remove it but still it won't get connected with top of the boxes.
2. I have 3 boxes with border of left and right. i want the right border of the 1st box connect with left side of the 2nd box. now its making it look thick as its 1px but both residing side by side it makes 2px. how can i make them look like its 1px?

Thanks in advance.

[DaveMaxwell]

1. The problem isn't just the margin-bottom on the sep div. It's the negative top margin as well, which can be resolved by reducing the height of the slider class to 269px, and removing the top and bottom margins from the sep div.
2. Just set the left border for qLinks (which should be a class, not an ID since you've got three of them on the page), then on the far right div, add an additional class which has the right border defined (ex. div class="qLinks lastLink").

If I could make an additional suggestion - float your images (the ones with class size-[auto|full|large|medium] ) with a margin-right and margin-bottom of say 1em which will allow the text in those divs to wrap around the images and make them much easier to read.

[chris.upjohn]

1.i want the top of the boxes to touch with the bottom of maroon line.the maroon line have a margin-bottom:3px; i tried to remove it but still it won't get connected with top of the boxes.

I had a look at your CSS source and your #sep selector still has a bottom margin as well as a negative top margin which is the reason for the space as well, anytime your negatively offset an element the DOM node itself stays put but the element moves so you need to be careful when using margins. What you really need to do is wrap your left and right columns in a parent and set some padding on the right column as the way your markup is currently will make it EXTREMELY difficult to maintain and update your website.

2. I have 3 boxes with border of left and right. i want the right border of the 1st box connect with left side of the 2nd box. now its making it look thick as its 1px but both residing side by side it makes 2px. how can i make them look like its 1px?

You could simply use border-right and then use the :first-child selector to set the left border on the first box.

.box {
    border-right: 1px solid #000;
}
 
.box:first-child { border-left: 1px solid #000; }

[nofel]

Thanks guy, that solution of dropping the margins and :first-child, solved my problem. u guys are ninja's.
thanks!

[nofel]

If you look at the website. the last box right border isn't working

[DaveMaxwell]

If you look at the website. the last box right border isn't working

That's because you didn't do as he suggested - you put the border-left on the qLinks, then the border-right on the first child.

And I'll repeat what I said earlier - you REALLY need to change the ID="qLinks" to class="qLinks" on those divs, then change the #qLinks to .qLinks. If you have more than one element to apply a common style to, then you use classes, not ids. There should only be one id with a name in an HTML markup page.

[nofel]

I thought the id's won't do much problem coz i m using wordpress and it uses a lot of ID in just one page.anyhow i changed it, sorry for before i overlooked. but now the first line has been appended to last box and gone from first box.

[DaveMaxwell]

I thought the id's won't do much problem coz i m using wordpress and it uses a lot of ID in just one page.anyhow i changed it, sorry for before i overlooked. but now the first line has been appended to last box and gone from first box.

To be honest, I don't use the child stuff since I have problems with it. I personally would just use an additional class and add that class onto the first div. See my example in post #2.

[nofel]

well i applied 3 different class to every 3 box with different border and it worked.

[DaveMaxwell]

well i applied 3 different class to every 3 box with different border and it worked.

Well, I'm glad you got it working, but you didn't need three classes - just two. If you apply qLinks2 to that last div, change the first div to be <div class="qLinks qLinks2">, and remove the border-right from .qLinks, you'll get the same look. Your choice, but it might save some work later on if you want to make changes to the color, width, style, etc of the border.

[nofel]

yes u r right. thanks for the heads up. although i think the picture on the right side is somewhat cutting off. i guess

[DaveMaxwell]

yes u r right. thanks for the heads up. although i think the picture on the right side is somewhat cutting off. i guess

It is because the image is wider than the div that it's in (204px vs 176px). You'd need to widen the div, which would require you to either a) widen the width of the main div or b) reduce the width of the slider div. Personally, I'd reduce the width of the slider div since the page looks a little large for me. The only reason that slider div is that wide is that one image which doesn't look to be there.