Expand element widths to match expanded screen width

Question

A question was asked a few years ago whereby if an element's width is larger than the screen width, then other block elements (h1 etc.) do not expand to match (see fiddle whereby the h1 width does not change after the wide element appears):

function addElement(){
    $("#para").after('<div class="wide">Wide</div>');
    $("a").fadeOut();
    // $("h1").width($(".wide").width()); // <-- trying to avoid needing this
}

body {margin:0; padding:0}
h1 {background-color:#eee}
.wide {background-color:#00c; color:#fff; width:110%; margin-top:1em; margin-bottom:1em}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

Although the original answer did work, now that CSS3 is more mainstream, I wondered whether there was any smarter way to accomplish the goal, without resizing manually using JQuery? For example, is there a pure CSS solution? I do not know the width of the element in advance (its a table of data from an ERP system and sometimes can be very wide).

If not, I'm happy to delete the question, but couldn't think of a way to draw attention back to an older problem whereby a better solution may now exist.

Answer 1

What I think you want is to set the width of the parent object of .wide, and have the children of that parent affect the width of all of its children.

I decided to change it so instead of your new element having the class wide, I gave that class to its parent (body in this case) because css doesn't have a parent selector, so this seemed like the simplest solution.

function addElement(){
    $("#para").after('<div class="foo">Wide</div>'); // <-- updated
    $("a").fadeOut();
    $("body").addClass("wide"); // <-- new
}

body {margin:0; padding:0}
h1 {background-color:#eee; width: 100%;}
.foo {background-color:#00c; color:#fff; margin-top:1em; margin-bottom:1em} // <-- updated
.wide { width: 110%; } // <-- new
.wide > * { width: auto; } // <-- new

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>

It is slightly different from how you doing things, but I think that it should accomplish what you are trying to do

Update:

Instead of

$("body").addClass("wide");

adding

$("#para").parent().addClass("wide");
$("#para").parent().width($("#para").parent().width()*1.1);

should work with the tables, but I'm not sure if you'll find this any better than

$("h1").width($(".wide").width());

which you were trying to avoid.

JSFiddle

Answer 2

If body and its block elements expanded to match .wide's width, then .wide would no longer be 110%. That's really the crux of the problem.

The easiest solution may be to set the widths of both body and .wide in pixels, after .wide has been added to the DOM.

function addElement(){
  $("#para").after('<div class="wide">Wide</div>');
  $("a").fadeOut();
  $('body, .wide').width($('.wide').width());
}

body {margin:0; padding:0;}

h1 {background-color:#eee;}

.wide {background-color:#00c; color:#fff; width:110%; margin-top:1em; margin-bottom:1em}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Header 1</h1>
<p id="para">
    <a href="#" onclick="addElement(); return false;">Add wide element</a>
</p>