Question

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!

Answer 1

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: