How to simulate a html table with a static width row and a dynamic width row

Question

I need to create something like the old html tables, but with css.

Look this structure:

<div id="dad">
    <div id="child-one"></div>
    <div id="child-two"></div>
</div>

• "dad" should have "width: 100%"
• "child-one" should have "width: 300px" (the static width row)
• "child-two" should have all the next width. (the dinamic width row)

So, if "dad" have 1000px (but, remember this is 100%, not 1000px. Let's supouse that the user have a 1000px of resolution), so:

• "child-one" should have 300px (for ever! and never change), and:
• "child-two" should have 700px (but, changing dinamically if dad change the width).

How can I do that? Currently, "child-two" get the width of its content. Example: If into child-two there is an IMG with width:50px, "child-two" will have only 50px... BUT I NEED 700px!!!

Here the best solution: Dynamic width DIV next to a static width DIV

Answer 1

maybe this is what you are looking for

.dad{
    border: 2px solid #000;
    background-color: black;
    width: 100%;
    height: 200px;
    display: table;
}

.child-one{
    background-color: blue;
    width: 300px;
    height: 200px;
    display: block;
}

.child-two{
    background-color: red;
    width: 100%;
    height: 200px;
    display: table-cell;
}

http://jsfiddle.net/j4ngerxb/

Answer 2

try this one:

#dad {
   width: 1000px;
}

#child-one {
   width: 30%;
}
#child-two {
   width: 70%;
}