CODEWITHSUNDEEP
border
user1590241
user1590241

Reputation: 43

Extending a div border outside wrap?

Here is my site

Currently still fiddling around with design layout and there is one problem I can't quite solve. On my header I have a red border-bottom to separate it from the main content. Likewise, on the footer I have a red top-border to do the same. Is there a way of extending the borders beyond the div (and consequently outside of the wrapper, with overflow visible) without it conflicting with the other elements? I want to configure the layout so it has more of a grid-like design.

#wrap {
width: 1000px;
background-color: #ffffff;
text-align:left;
margin: 0 auto 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000; }

#head{
background-color: #ffffff;
width: 1000px;
height: 159px;
border-bottom: 1px solid #ff0000; }

kind of like this?

Upvotes: 4

Views: 11842

Answers (1)

haydnKing
haydnKing

Reputation: 76

Yes. You can set a negative margin, causing the div to extend outside of its parent, like this. (I only did the header, but you get the idea)

The solution in the fiddle uses the annoying !important to get the styling right - you might want to reorganize your CSS to get around this and make your code more maintainable, see this post.

Upvotes: 6

Related Questions