CODEWITHSUNDEEP
htmlcss
Dendory
Dendory

Reputation: 630

DIV not shrinking when resizing

So I have a site with a simple two DIV panes: a content area left and a fixed 300px menu right, both of them going to a max of 1200px. I want users to be able to resize the window and have the LEFT pane shrink with the right menu staying fixed. But right now I can't find any way to do this, everything looks good at max size, but the left pane doesn't shrink if I resize the window, instead the right menu just wraps to the bottom of the screen. This would be easy with a left menu but the menu is on the right. Here is what I have so far:

#main
{
 max-width: 1200px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0;
 display: block;
 padding: 0;
}
#left
{
 max-width: 890px;
 float: left;
 padding-right: 10px;
}
#right
{
 width: 290px;
 top: 0;
 float: right;
 padding-right: 10px;
 padding-left: 10px;
}

Upvotes: 3

Views: 14213

Answers (2)

jmore009
jmore009

Reputation: 12923

you can use CSS calc() to adjust the width of the left container.

OPTION 1 FIDDLE

HTML

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

CSS

#main{
  width: 100%; //set to 100% since you're capping it at 1200 anyways
  max-width: 1200px;
  /* margin-right: auto;
  margin-left: auto;
  margin-top: 0; */ condense these to the following:
  margin: 0 auto;
  /*display: block;*/ already a block element so not necessary 
  padding: 0;
  overflow: hidden; //add to correct floating elements
}

#left{
  background: red; //just for my test
  height: 100px; //just for my test
  width: calc(100% - 300px); //readjusts based on screen size
  float: left;
  padding-right: 10px;
  -moz-box-sizing: border-box;  //if you use padding add these lines to fix issue of padding adding to width 
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

 #right{
   background: black; //just for my test
   height: 100px; //just for my test
   width: 300px;
   /*top: 0;*/ //dont need, not doing anything
   float: right;
   /*padding-right: 10px;
   padding-left: 10px;*/ //can condense to following:
   padding: 0 10px;
   -moz-box-sizing: border-box; //see padding explanation above
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

OR

If you are worried about older browsers you can do this with display: table and display: table-cell like so:

OPTION 2 FIDDLE

CSS

#main{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  padding: 0;
  display: table; //add
  table-layout: fixed; //add
}

#left{
  display: table-cell; //use instead of float
  background: red;
  height: 100px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#right{
  display: table-cell; //use instead of float
  background: black;
  height: 100px;
  width: 300px;
  padding: 0 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Upvotes: 4

Brent L
Brent L

Reputation: 801

Instead of floating the divs, try display: inline-block on the left and right panes, or CSS3 flexbox (depends on how far back you support legacy browsers).

Flexbox example: http://jsfiddle.net/571k3gx2/

Upvotes: 1

Related Questions