CODEWITHSUNDEEP
htmlcss
coiso
coiso

Reputation: 7479

3 columns, pixels and percentages

I want to have 2 columns stuck to the sides, each with an exact width in pixels (30px in this case) and between them another div that fills the remaining space.

|-----------100%-----------|
|30px || remaining  ||30px |

+-----++------------++-----+
|     ||            ||     |
|     ||            ||     |
|   1 ||     2      ||  3  |
|     ||            ||     |
+-----++------------++-----+
  |                     |
  |                     -- float:right
  ---- float:left

How can I achieve this with only pure css?

Upvotes: 0

Views: 1163

Answers (4)

JuninZe
JuninZe

Reputation: 79

Using this table

<table border="1">
    <tr>
        <td class="fixed">
            left
        </td>
        <td class="remaining">
            middle
        </td>
        <td class="fixed">
            right
        </td>
    </tr>
</table>​

Try this CSS

table { width: 100%; }
.fixed { width: 30px; }
.remaining { width: auto; }​

jsFiddle

Upvotes: 1

dognose
dognose

Reputation: 20899

#left { background-color: Red; width: 30px; height: 500px; float: left; }

#middle { background-color: blue; height: 500px; }

#right { background-color: Red; width: 30px; height: 500px; float: right; }

in the html you put the left div, then the right and then then middle div.

Upvotes: 0

Rick Calder
Rick Calder

Reputation: 18705

You really don't have to do anything other than float the right and left divs. Any div you put in between is automatically going to fill the remaining space.

<div class="right"></div>
<div class="left"></div>
<div class="center"></div>​


.right{
float:right;
background-color:yellow;
height:50px;
width:30px;
}
.left{
float:left;
background-color:yellow;
height:50px;
width:30px;
}
.center{background-color:green;height:100%;height:50px;}

Fiddle: http://jsfiddle.net/calder12/55dza/

Upvotes: 1

Rodik
Rodik

Reputation: 4092

your center div can be positioned absolutely, and have an offset of 30px from both sides.

.container{
   position:relative;
   width:600px;
   height: 400px;
}
.center{
    position:absolute;
    left:30px;
    right:30px;
    height: 100%;
}

This will make sure that you have a div that always takes up 100% of the container div, but leaves 30px on each side

Upvotes: 1

Related Questions