CODEWITHSUNDEEP
javascripthtmlcss
jmasterx
jmasterx

Reputation: 54193

Side Panel in CSS

I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.

I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?

If it is possible, is there an example? I googled it but nothing like what I want came up. The side-panel can be hidden and shown by click a button so adding padding will not work.

Here is an idea of what I mean: The days part is #calendar, and the Unscheduled part is the side panel of 150px.

I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.

enter image description here Thanks

Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden. http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html

Result of float: enter image description here

Upvotes: 1

Views: 2038

Answers (2)

Andrew Tibbetts
Andrew Tibbetts

Reputation: 3072

All major browsers and IE10 support flexbox. Not supported < IE10.

Upvotes: 0

Barney
Barney

Reputation: 16466

Got a working solution for you here.

The code to get this working basically hinges on the following structure:

<div class="sideBar">
  ...
</div>
<div class="tableWrapper">
  <table>
    ...
  </table>
</div>

Next, make sure the elements have these significant CSS properties:

.sideBar {
  float: right;
}

.tableWrapper {
  overflow: hidden;
}

table {
  width: 100%;
}

What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.

Click the button in the demo to see the table automatically resize.

Upvotes: 3

Related Questions