ansaurus

Question

How to have 2 divs next to each other and have one dynamically resize without dropping down.

Answer 1

A:

try this:

.video {
 display: table;
 width: 100%;
}
.video .left,
.video .right { 
 display: table-cell;
}
.video .left { 
 width: 100px;
}

antpaw 2009-12-15 18:44:44

Answer 2

+1 A:

Remove the float from the right div and give it a margin-left with the width of the left div.

Here's an SSCCE, the background color is purely presentational, the remaining are the minimum required styles.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1909473</title>
        <style>
            .video {
                width: 100%;  
                height: 75px;
                border-bottom: 1px solid #c9c9c9;
            }

            .video .left { 
                float: left; 
                width: 116px;
                height: 74px;
                background: #fee;
            }

            .video .right { 
                margin-left: 116px;
                height: 74px;
                background: #efe;
            }
        </style>
    </head>
    <body>
        <div class="video">
            <div class="left">left stuff</div>
            <div class="right">right stuff</div>
        </div>
    </body>
</html>

Only ensure that you're using strict doctype, otherwise IE will go faulty.

BalusC 2009-12-15 18:49:20

ansaurus

tags:

views:

answers:

How to have 2 divs next to each other and have one dynamically resize without dropping down.

related questions