Sat, 2016-04-02 22:02
<style> .container{ margin: 20px; max-width:1840px; min-width:840px; margin: 0px auto; margin-top:30px; border:solid 3px #003399; } .container-left{ margin:10px; width:100%; max-width:1280px; min-width:330px; display:inline-block; vertical-align:top; margin:0 auto; background-color:#0C3; height:200px; } .container-right{ margin:0px 10px 10px 10px; width:480px; min-width:480px; display:inline-block; vertical-align:top; background-color:#FF0; height:200px; } </style> <div class="container"> <div class="container-left"></div> <div class="container-right"></div> </div>
Sun, 2016-04-03 22:59
#1
What do you expect it to do?
You've made the left box 100% width, leaving no room for the right-hand box.
Since you haven't provided content or purpose, there's no way to really suggest a sane, robust solution.
cheers,
gary
Mon, 2016-04-04 07:14
#2
Cool. so how can I get the
Cool. so how can I get the left one to fill all the space left so both the fixed with right and flexible left container fill the parent container.
Mon, 2016-04-04 08:17
#3
Try this
.container { border:solid 3px #003399; margin: 20px; min-width:840px; margin-top:30px; overflow: auto;} .container-left { background-color:#0C3; height:200px; margin:10px; min-width:330px; /* may cause problems */ overflow: auto;} .container-right { background-color:#FF0; float: right; height:200px; margin: 10px; width:480px;}
And, the html
<div class="container"> <div class="container-right"> How do you prove AGW? Make a mathematical model restating the hypothesis as 2+2=5. Now adjust the parameters to give a sufficiently large value of 2. </div> <div class="container-left"></div>
cheers,
gary