3 replies [Last post]
kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 1 year 48 weeks ago
Timezone: GMT+13
Joined: 2009-03-07
Posts: 65
Points: 102

<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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 24 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 1 year 48 weeks ago
Timezone: GMT+13
Joined: 2009-03-07
Posts: 65
Points: 102

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 24 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.