Question

I have the following code:

<div class="rep_tb0" style="width: 100%">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log</div>
    </div>
</div>

.rep_tb0 {display: table; }
.rep_tb0 {padding: 5px;}
.rep_tb0 {border-collapse:collapse; }
.rep_tr0 {display: table-row;}
.rep_td0 {display: table-cell; padding: 5px; vertical-align:top; }
.rep_td0 {border: 1px solid #666; }

What I would like is for the table that has the word Activity Log to extend horizontally to fill the DIV that contains it. Note that DIV has a width set but it may easily change. As you can see I tried setting the width in three places but none worked.

How can I make it fill the area horizontally without setting the width in pixels.

Please don’t forget I’m using display: table; These are not normal DIVs 🙂

Answer 1

I usually make a container of the size that I want and relative position; and an inner div with absolute values, like so:

<div id="container">
    <div id="content">Content</div>
</div>

Then the css would look something like this:

#container{
    width:70%;
    min-width:600px;
    height: 600px;
    background:#000;
    border:medium;
    border-color:#CCC;
    border-radius:10px;
    display:block;
}
#content{
    position:absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
}