CODEWITHSUNDEEP
htmlcss
john
john

Reputation: 37

Forcing Div width bigger than Margin-auto width

Hi so i have a line that i want to put on my website. Although i have tried a few things like z-index, position: fixed ect. i can't seem to get the line to span the whole browser length, while still having the margin-auto width for the website 900px;. Is their anyway to "override" the margin width of 900 and for the line to span the whole website while being static. I have also tried taking the div out of the body tags and that didn't seem to work either.

.line {
    position: static;
    background-color: #d1d1d1;
    width: 100%;
    height: 1px;
    margin-top: 20px;
}

 body {
 margin: 0px;
 padding: 0px;
 margin: 0 auto;
 width: 900px;
}

Upvotes: 0

Views: 34

Answers (1)

JanR
JanR

Reputation: 6132

If the line is part of your body then width:100% will make it 900px (the width you set on your body)

They way around is to set body width to 100%, and then create a wrapper (with width 900px) for your main content and a separate line div for the line across the full width.

Added a fiddle: http://jsfiddle.net/xrqezvxz/

your css would look something like:

 body {
     margin: 0px;
     padding: 0px;
     width: 100%;
    min-height:500px;
}

.line {
    position: fixed;
    background-color: #d1d1d1;
    width: 100%;
    height: 5px;
    margin-top: 20px;
}

.content_wrapper
{
    width:900px;
    background-color:red;
    min-height:500px;
    height:500px;
    margin:0 auto;
}

Upvotes: 1

Related Questions