CODEWITHSUNDEEP
htmlcss
Mohammer
Mohammer

Reputation: 405

Extend an element to browser-border inside centered wrap without javascript

I have a centered wrap (fixed width and dynamic padding) and inside some p-tags. The backgroundColor of these tags must be extended to the browsers border to the left, but the content should still remain inside the centered content area.

I managed to make it with JavaScript (Example).

HTML:

<div>
    <p>asd</p><br>
    <p>asd</p><br>
    <p>asd</p>
</div>

JS:

$(document).ready(function() {
    $('p').css('padding-left', $('div').css('padding-left')).css('margin-left', "-" + $('div').css('padding-left'));
});

CSS:

div {
    width: 300px;
    background: green;
    padding: 0 calc(50% - 150px)
}

p {
    height: 50px;
    margin-bottom: 10px;
    background: blue;
    display: inline-block;
}

But I would like it to be like that with css only. Is there a way to get that behaviour without JavaScript?

FF, Chrome, iPad iOS5/6 Safari, IE9+ must be supported.

/EDIT:

Thanks for the replies so far. I used inline-block on the p-elements to have it not extend to the right, as it should have, like an inline element, the minimum width it needs. But I still want the next element to be in a new line (if there's a better solution, it's welcome)

Thanks to PaulvdTool, i managed to find a SOLUTION: http://jsfiddle.net/EFhkH/2/

Still, if you have a better idea to force linebreaks after the inline-block, youre welcome

Upvotes: 0

Views: 201

Answers (1)

Paul van den Dool
Paul van den Dool

Reputation: 3212

The thing you want happening (as I get it from your description) isn't even happing in your fiddle. When I resize the screen the blue doesn't stay against the left side. I tried making it with CSS and I managed a bit by using the :before element. The effect only works on single line text.

Maybe somebody can extend on this.

CSS

#container {
    width: 300px;
    background: silver;
    margin: 0 auto 0 auto;
}
.text {
    width: 100%;
    background: gray;
}
.text:before {
    content: ".";
    background: gray;
    width: 50%;
    position: absolute;
    left: 0;
    z-index: -1;
    color: gray;
}

HTML

<div id="container">
    <div class="text"><p>line 1</p></div>
    <div class="text"><p>line 2</p></div>
    <div class="text"><p>line 3</p></div>
    <div class="text"><p>line 4a<br />line 4b</p></div>
/div>

http://jsfiddle.net/PaulvdDool/rtRQD/

EDIT I cheated by adding a dot "." in the before element, else the background didn't show. I made the dot invisible by giving it the same color as the background.

Upvotes: 1

Related Questions