CSS layout problem with borders

I'm currently working in the following site for a client http://minta.jvsoftware.com/ but I'm trying to make the top and bottom borders of the main container div to look like this http://awesomescreenshot.com/0f8jdwn71 basically make the borders span to the left up to the end of the screen (don't mind the red color this is supposed to be the same color as the border I have now).

I've been trying to come up with a solution but so far I have failed, I'm willing to try a JS/jQuery solution if implementing it with just css becomes too hard.

Can anyone help开发者_开发知识库 me? Thanks in advance!

You can achieve this by pure CSS with negative margins.

First you have to update the CSS for .container as follows:

.container {
  clear: both;
  font-family: "Times New Roman",Times,serif;
  margin: 124px auto 36px;
  padding: 0;
  width: 940px;
}

Now wrap the content of the main div into another div and apply some css like this:

<div id="main" class="container clearfix" role="main">
    <div style="border: 1px solid red; margin-left: -2000px; padding: 8px 8px 8px 2000px;">
        <div class="content"> ... </div>
        <div class="featured-image"> ... </div>
        <div style="clear:both;"></div>
    </div>
</div>

Here a screenshot to help you figure it out:

To achieve the layout you want, i think you have to put a at the left beside the container div and make them float left and give this div the border at the top and the bottom with the red color

Why you don't use "position:absolute"? In this case it's perfect solution I guess.

<style>
.topborder,
.bottomborder {
  position:absolute;
  left:-100px;
  width:150px;
  height:3px;
  background:#ff0000;
  z-index:999;
}

.topborder {
  top:-3px;
}

.bottomborder {
  bottom:-3px;
}

#main {
  position:relative;
}
</style>

<div id="main" class="container clearfix" role="main">
  <div class="topborder"></div><div class="bottomborder"></div>

  your content

</div>