Combination of width, min-width and max-width

0
votes

I want to achieve the following: A design with two columns of the same width, covering the whole width of the document, or a fixed width of pixels, whichever is smaller. When they are resized to a certain width, they should be moved underneath each other and take up at most 100% of the width of the screen (exactly 100% would be nice, but is not necessary).

I came up with the following code, but the max-width of 100% does not get applied.

Can i combine a width in percent and a max-width in percent like this?
Is this possible without another layer of divs?
Is this possible at all?

    #head {
      background-color: #00FF00;
    }
    body {
      text-align: center;
    }
    #container {
      margin: 0 auto;
      width: 100%;
      max-width: 500px;
      text-align: center;
    }
    #left {
      background-color: #FF0000;
      float: left;
      width: 50%;
      min-width: 150px;
      max-width: 100%;
    }
    #right {
      background-color: #0000FF;
      float: left;
      width: 50%;
      min-width: 150px;
      max-width: 100%;
    }
<div id="head">
  foo
</div>
<div id="container">
  <div id="left">
    bar
  </div>
  <div id="right">
    baz
  </div>
</div>
2
htmlcss
You just need to remove your max-width under the #container tag in your CSS. Check out this jsFiddle too, it's an incredible tool for practicing. – Danielson
no Javascript necessary, just some media queries in CSS – Johannes
@Johannes flex and min-width can spare the mediaqueries ;) codepen.io/anon/pen/JXNMgd – G-Cyrillus
might be, but definitely no JS necessary – Johannes
thanks a lot everyone, and wow this was quick. – snaut

2 Answers

0
votes

I think you need media queries. You can set the width for different viewports.

#head {
    background-color:#00FF00;
}
body {
    text-align:center;
}
#container{
    margin: 0 auto;
    width:100%;
    max-width:500px;
    text-align:center;
}
#left {
    background-color:#FF0000;
    float: left;
    width: 50%;
    min-width: 150px;
    max-width: 100%;
}
#right {
    background-color:#0000FF;
    float: left;
    width: 50%;
    min-width: 150px;
    max-width: 100%;
}

@media (max-width: 500px) {
    #left { width: 100%;}
    #right { width: 100%;}
}
<html>
    <head>
    </head>
    <body>
        <div id="head">
            foo
        </div>
        <div id="container">
            <div id="left">
                bar
            </div>
            <div id="right">
                baz
            </div>
        </div>
    </body>
</html>
0
votes

you may use flex and min-width: http://codepen.io/anon/pen/JXNMgd

 /* added */
 #container {
   display: flex;
   flex-wrap: wrap;
 }
 #left,
 #right {
   flex: 1;
 }


 /* your css cleared a bit */
 #head {
   background-color: #00FF00;
 }
 body {
   text-align: center;
 }
 #container {
   margin: 0 auto;
   max-width: 500px;
   text-align: center;
 }
 #left,
 #right {
   background-color: #FF0000;
   min-width: 150px;
 }
 #right {
   background-color: #0000FF;
 }
<div id="head">
  foo
</div>
<div id="container">
  <div id="left">
    bar
  </div>
  <div id="right">
    baz
  </div>
</div>