My goal is to have a centered wrap with fixed width and dynamic padding, containing p-tags. The challenge is to make the background color of these tags extend to the browser's border on the left while keeping the content inside the centered area.
I was able to achieve this using JavaScript (Example).
Here is the basic structure:
<div>
<p>asd</p><br>
<p>asd</p><br>
<p>asd</p>
</div>
This is the JavaScript code used to style the elements:
$(document).ready(function() {
$('p').css('padding-left', $('div').css('padding-left')).css('margin-left', "-" + $('div').css('padding-left'));
});
And here is the CSS applied:
div {
width: 300px;
background: green;
padding: 0 calc(50% - 150px)
}
p {
height: 50px;
margin-bottom: 10px;
background: blue;
display: inline-block;
}
Is there a way to achieve this layout using only CSS without relying on JavaScript? It should be supported on FF, Chrome, iPad iOS5/6 Safari, and IE9+.
/EDIT:
After some feedback and research, I found a SOLUTION to the issue by modifying the structure slightly: http://jsfiddle.net/EFhkH/2/
If you have any recommendations for improving the line breaks after the inline-block elements, feel free to share!