Question

I have a container div for my website with the following CSS code

.container {
    width: 1020px;
    background-color:transparent;
    margin: 0 auto;
}

and it has a fixed width as it is shown above. In the container there is a navbar and a section in between of those I am using an <hr> property in order to separate them, but the issue I am having is even if I will give this hr a 100% width it will fit just the width of my container, but I want it to expand through out the whole page.

Is there any way to manage that? Thanks in advance.

Answer 1

An element’s width, when given relative sizing, is relative to its parent element. In this case, then, there’s no way to have the hr element’s width be relative to another parent.

You can, though, give a width of greater than 100%, and then use a negative margin to centre, if required:

​div {
    width: 50%;
    margin: 0 auto;
    border: 1px solid #f90;
}

​div hr {
    width: 190%;
    margin-left: -45%;
}​

<div id="a">
    <hr />
</div>​

JS Fiddle proof-of-concept.