CODEWITHSUNDEEP
htmlcss
zoul
zoul

Reputation: 104065

How can I easily break from a wrapping container?

I have a fixed-width container to center some content:

.container {
    width: 1000px;
    margin: auto;
}

<div class="container">
    content…
</div>

Now I’d like to create a horizontal rule inside the content:

<div class="container">
    <p>Content foo…</p>
    <hr>
    <p>Content bar…</p>
</div>

I like the rule to span the whole page, not just the container. I can do that by pulling the <hr> element out of the container:

<div class="container">
    <p>Content foo…</p>
</div>
<hr>
<div class="container">
    <p>Content bar…</p>
</div>

Is there a way to make the <hr> span the whole page width without taking it out of the container?

Upvotes: 2

Views: 265

Answers (4)

nisav
nisav

Reputation: 143

CSS:

.container {
     width: 100%;
     margin: auto;
}
.container p {
    width:1000px;
}

HTML:

<div class="container">
     <p>Content foo…</p>
     <hr>
     <p>Content bar…</p>
</div>

Upvotes: 0

RichieAHB
RichieAHB

Reputation: 2088

Obviously the natural answer is to change the way you are laying out your containers but to answer your question as you put it you can use position: absolute and then the CSS adjacent sibling selector + to add some space for the hr after it get's take out of the flow.

http://jsfiddle.net/w248Y/1/

HTML

<div class="container">
    <p>Content foo…</p>
    <hr/>
    <p>Content bar…</p>
</div>

CSS

.container {
    width: 400px;
    margin: auto;
}

p {
    margin: 0;
    padding: 0;
}

hr {
    left: 0;
    margin: 1em 0 0;
    position: absolute;
    width: 100%;
}

hr + * {
    /*Doube the hr margin for even layout */
    margin-top: 2em;
}

Upvotes: 1

DaniP
DaniP

Reputation: 38252

The only way I see is taking the hr out of the flow document like this:

hr {
    position:absolute;
    width:100%;
    left:0;
    border-left:0;
    border-right:0;
}

Check this Demo Fiddle

Upvotes: 2

Jamie Collingwood
Jamie Collingwood

Reputation: 689

The short answer is no.. there is no easy way. The easiest way to do what you are trying to achieve is to simply wrap each P in its own container and use the HR outside of each container. http://jsfiddle.net/eEM5G/ Let me know if this helps you out.

<div class="container">
    <p>Content foo…</p>
</div>
<hr>
<div class="container">
    <p>Content foo…</p>
</div>


.container {
    width: 1000px;
    margin: auto;
}

Upvotes: 0

Related Questions