CODEWITHSUNDEEP
jquerycsshtml
GJK
GJK

Reputation: 37389

HTML + CSS - 2 DIVs That Resize

I have a quick question about HTML and CSS. I thought this would be easy to track down, but it's turning out to be quite the challenge. Essentially, I have 2 DIVs that are side by side, one that is a fixed width and one that is dynamic. The one on the right is a fixed-width, 400px DIV that holds some basic information. The one on the left is supposed to just fill the rest of the page. But there's a catch, I want to be able to dynamically hide the right DIV at any time (using jQuery) and have the left one fill its space. I know that there's several ways to do it, and I already know a few. But I want to do as little CSS manipulation in jQuery as possible. Here's some sample code I have.

<body>
    <div id="right"></div>
    <div id="left"></div>
</body>

<style type="text/css">
    #left {
        height: 100%;
        margin-right: 400px;
    }
    #right {
        float: right;
        width: 400px;
        height: 100%;
    }
</style>

The problem with this is that the right margin is permanently set to 400px. So if the right side were to be re-sized (to 0 width), the 400px margin would remain. Essentially, I need a margin on the left that is the size of the div on the right.

Any help is much appreciated.

Upvotes: 1

Views: 483

Answers (4)

Bakabaka
Bakabaka

Reputation: 1505

Is it a possibility to nest #right inside #left, and then float: right it? If you make #left the entire width of the page, this should have the same effect.

Upvotes: 0

Ashwin Singh
Ashwin Singh

Reputation: 7375

Since you want to make the other div to take up the full width, you will have to set the display to none. Change to display:none with jQuery and it will work and then when you need it to display, change to display:block

Upvotes: 0

Dave Hogan
Dave Hogan

Reputation: 3221

You don't need the margin-right: 400px

See live demo: http://jsfiddle.net/uxCpy/1/

Upvotes: 3

Blazemonger
Blazemonger

Reputation: 92993

Toggle #right between visibility: hidden and visibility: visible. This will hide the element without removing it from the layout.

JS:

$('#left').on('click',function() {
    $('#right').toggleClass('invisible');
});​

CSS:

.invisible {
    visibility: hidden;
}​

http://jsfiddle.net/mblase75/nkuv4/

Upvotes: 0

Related Questions