Alright, here's the problem I'm faced with:
I'm designing a website based of a jpeg graphic the company provided me. There is a menu column on the left (150px), with the main body being the right (700px). Both these are inside a main wrapper div. The main body is it's own div, and each section inside has it's own div (i.e., Mission Statement, News, Events). Each section needs to have a 1px "border" dividing it from the section previous. Here's my existing code:
Code:
body {
background: #fff;
font: normal 62.5% "Palatino Linotype","Times New Roman",serif;
color: #000;
}
#wrapper {
position: relative;
width: 850px;
padding: 5px 5px 5px 5px;
background: #fff;
/*border: 1px solid #09507e;*/
text-align: center;
z-index: 1;
}
#main-body {
text-align: left;
margin: 0 0 0 150px;
padding: 0 0 0 10px;
border: 1px solid #09507e;
border-right: 0;
}
#mission-statement p {
font-size: 1.3em;
}
#events {
border-top: 1px solid #09507e;
clear: right;
}
#news {
border-top: 1px solid #09507e;
}
Therefore, the main body div has a top, left, and bottom border, and that works SWEET. Exactly what they wanted. Then the News and Events divs have a 1px border at the top ... Now to the problem:
The border-top of News and Events doesn't extend all the way to the left border of the main body div. The company execs ABSOLUTELY have to have those connect. There is currently a 3-5px space between the left border and the top border of the sub-divs. I assume this is from the padding.
What's the best to way to "extend" that border so that they connect? I'm trying to avoid using an image for the border. I have screenshots, but can't figure how to post images ....
THANKS!
--Nathan
Extend a border
