CODEWITHSUNDEEP
csshtml
Matt Raible
Matt Raible

Reputation: 8624

How do I get a wrapper div's background-color to expand with the height

I have a div that wraps a number of actions a user can take. This div is like an actionBar that you'd see at the top of a table. It has 3 elements: 1) a button group, 2) a group of selects and 3) pagination controls.

I have the first two elements floating left and the last one floating right. This works great and everything lines up great when the browser window is wide enough to fit everything. However, when the screen resolution is smaller or the user makes the browser too narrow, the elements wrap. The wrapping I like, but the div does not expand its height (and associated background color) to fit the wrapped elements.

How do I make the div expand its height to fit these wrapped elements.

See the problem in action at http://jsfiddle.net/mraible/bJQCL/.

Upvotes: 3

Views: 5198

Answers (4)

SVS
SVS

Reputation: 4275

Just remove wrapper div fixed height & add overflow:hidden or auto to that div.

Upvotes: 0

0b10011
0b10011

Reputation: 18795

First, get rid of the static height on .wrapper. Then, you have two options:

  1. Use overflow:auto to force .wrapper to contain its contents (example):

    .wrapper {
    background-color: #CBE6A5;
    background-image: -webkit-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: -moz-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: linear-gradient(top, #CBE6A5, #E2F1CD);
    overflow:auto;
}

    Note: This can cause an unwanted scrollbar with content wider than 100% (example).

  2. Use :after to force .wrapper to contain its contents (example):

    .wrapper {
    background-color: #CBE6A5;
    background-image: -webkit-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: -moz-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: linear-gradient(top, #CBE6A5, #E2F1CD);
}
.wrapper:after {
    display:block;
    content:".";
    font-size:0;
    height:0;
    color:transparent;
    clear:left;
}

    Note: This does not work in IE7 and below.

  3. Add a "clear" div to the end of .wrapper (example):

    <div class="clear"></div>

    .wrapper {
    background-color: #CBE6A5;
    background-image: -webkit-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: -moz-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: linear-gradient(top, #CBE6A5, #E2F1CD);
}
.clear {
    clear:left;
}

Upvotes: 0

j08691
j08691

Reputation: 207900

Remove the fixed height on the wrapper and add overflow:auto to it.

jsFiddle example.

Upvotes: 5

Amin Eshaq
Amin Eshaq

Reputation: 4024

look at this fiddle

Simply add height:auto and an overflow of auto.

.wrapper {
    background-color: #CBE6A5;
    background-image: -webkit-linear-gradient(top, #CBE6A5, #E2F1CD);
    background-image: -moz-linear-gradient(top, #CBE6A5, #E2F1CD);
    height: auto;
    overflow:auto;
}

Upvotes: -1

Related Questions