CODEWITHSUNDEEP
htmlcssasp.net
user2653652
user2653652

Reputation: 57

How do I do this in with css or do I use a table?

I want to have 2 divs next to each other on the 100% with of the page and one div under the 2 with 100 with of the page. Like:

   ----------------
   | 1 |     2     |
   -----------------
   |       3       |
   -----------------

But here is the catch

when typing this i thought maybe better to use a table to store the divs inside?

would like to hear how i can do this or if its better to use a table.

EDIT

Forgot to say i prefer not to use float becouse it messes allot with other stylings inside the divs.

Upvotes: 0

Views: 47

Answers (4)

Stickers
Stickers

Reputation: 78706

You could do it as CSS table, see the follows.

.wrap {
    display: table;
    width: 100%; /*full length*/
}
.d1, .d2 {
    display: table-cell;
    white-space: nowrap; /*no wrap in the cells*/
}
.d2 {
    width: 100%; /*it always receives all the remain length*/
}

/*demo purpose only follows*/
.d1 { background: red; }
.d2 { background: green; }
.d3 { background: blue; }
<div class="wrap">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
<div class="d3">3</div>

Fiddle Demo: http://jsfiddle.net/t0sL1dck/

Upvotes: 1

Quentin
Quentin

Reputation: 943769

Use flexible boxes. Set one to shrink and two to grow to fill the remaining space.

#container {
    display: flex;
}
#one {
    flex: 0 1 auto;
    background: white;
}
#two {
    flex: 1 0 auto;
    background: red;
}
#three {
    background: green;
}
<div id="container">
    <div id="one">one</div>
    <div id="two">two</div>
</div>
<div id="three">three</div>

Use of prefixed properties and JavaScript shims for compatibility with older browsers left as an exercise for the reader.

Upvotes: 0

petroni
petroni

Reputation: 776

The best I can think of right now is two tables, one for the top part and one for the bottom. The important thing is to set 

width:1%;
white-space:nowrap;

for the table cell that should change size for its content (Number 1) and colspan="2" for the cell that should take up the whole width.

You can try it and change the "Variable Text" to something longer and shorter:

JSFiddle (After you change it you'll need to click on "Run")

HTML:

<table>
    <tr>
        <td id="custom">Variable Text</td>
        <td>This takes up the rest</td>
    </tr>
    <tr><td colspan="2">This takes up the rest</td></tr>
</table>

CSS:

table {
    width:100%;
    text-align:center;
}
td {
    border:1px solid #000;
    padding:20px;
}
#custom{
    width:1%;
    white-space:nowrap;
}

Upvotes: 1

renakre
renakre

Reputation: 8291

I provided a solution, in this solution you will need to provide a maximum width for the second div:

<div style='float:left;'>div1</div>
<div style='float:right;max-width:100px;'>div2</div>
<div style='clear:both;width:100%'>div3</div

Upvotes: -1

Related Questions