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

yoju4n · Accepted Answer · 2014-11-19 03:41:12Z

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/

answered Nov 19, 2014 at 3:41

yoju4n

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

SasuQie · Accepted Answer · 2014-11-19 01:47:39Z

0

try this one:

#dad {
   width: 1000px;
}

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

answered Nov 19, 2014 at 1:47

SasuQie

9

1 Comment

Broda Noel Over a year ago

No... This is "30%" on child-one... I need 300px on child-one. Remember: Static row (child-one) and Dinamic row (child-two)

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related