Question

<style type="text/css">
html, body {
margin: 0;
padding: 0
}

.column1
{
position:absolute;
left:0;
top:0;
width:100px;
background-color:black;
}
.column2
{
position:absolute;
left:100px;
right:100px;

background-color:gray;
}

.middle {

min-width:900px;
}

.column3
{
position:absolute;
right:0;
top:0;
width:100px;
background-color:black;
}

#container
{

text-align: center; 
width:100%;
}

.clearfix 
{
position:relative;
display: inline-block; 
}
</style>

<div id="container" class="clearfix">
  <div class="column1">left</div>
  <div class="column2">
  <div class="middle">
  middle
  </div>
  </div>
  <div class="column3">right</div>
</div>

I was wondering if it would be possible for the min-width for the center column would make it so the right column would stick to the screen as it does, but up until the center column is 900px. If it is less than that, the resizing of the window smaller horizontally would just cut-off the right column.

Is this possible with css only?

Thanks so much!

Answer 1

Absolutely positioned elements aren’t affected by their neighbors, so you can’t affect the right column with the width of the center.

However, you could easily do this by simply putting min-width:1100px on your #container div.