dynamic left and fixed right column width divs using css

Question

I'm sure this has been answered alot before, but all I can find are solutions that require a fixed column on the left and a dynamic column on the right. My situation is different in that I require a dynamic column on the left, and a fixed column on the right.

I kind of have this working, but as soon as i try to build up additional columns inside the left (dynamic sized) column, it drops below the right (fixed width) column and fills the entire width of the page.

What I actually need is for the dynamic columnto never encroach into the fixed right column.

Additionally, I need to have another set of 3 columns in the left hand dynamic column, where the left and right columns are fixed, but the centre uses 100% of the available remaining space (within the afore mentioned left dynamic colum).

Put simply, I need two columns on the page that between them use 100% of the page width, with the right hand column being fixed width. Inside the left column I also require fixed and dynamic columns that will ignore the outer fixed column.

In my example code below, the div with the black border should be glued to the right hand side of the page and be fixed width. The div with the red border should not go any further right on the page than the div with the black border, and the divs with green and orange borders should be the full width of the red border. The centre div in the div with the green border should use all available space between the left and right columns of the green bordered div.

I've put the code I have below

<div id="Wrapper" style="width: 100%;">
<div id="Container">

    <div id="right" style="border: solid 10px black; width: 300px; margin-left: 50px; float: right;">
        Fixed right hand column
    </div>

    <div id="left"  style="border: solid 10px red;">
        <div>
            <div style="border: solid 10px green; float: left;">
                <div style="border: solid 1px black; text-align: center; width: 150px; margin-right: 10px; float: left;">
                    Left
                </div>
                <div style="border: solid 1px black; text-align: center; width: 150px; margin-left: 10px; float: right;">
                    Right
                </div>
                <div style="border: solid 1px black; text-align: center; width: 100%;">
                    Centre
                </div>
            </div>
            <div style="clear: both;"></div>
            <div style="border: solid 10px orange;">
                <asp:Panel runat="server" ID="DynamicWidthPanelForLeftColumn" BackColor="#6699ff" Height="250px">
                    This panel should use just the left column but instead uses the entire width of the page.
                </asp:Panel>
            </div>
        </div>
    </div>
</div>

Sowmya · Accepted Answer · 2013-03-01 12:22:56Z

3

Remove float:left from the #left's inner div and add display:table-cell for both left and right divs.

<div style="border: solid 10px green; display:table-cell">
....
</div>

DEMO

answered Mar 1, 2013 at 12:22

Sowmya

27k21 gold badges102 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamic left and fixed right column width divs using css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related