CODEWITHSUNDEEP
htmlcss
xxxProgrammerxxx
xxxProgrammerxxx

Reputation: 41

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

Im tryin to get two divs on a page next to each other. The one on the left has to be 100px wide and the one on the right has to take up the remainder of the page, and I want the tect in that div to wrap in it.

I have tried (HTML):

<div class="video">
    <div class="left">
       left stuff
    </div>
    <div class="right" >right stuff</div>
</div>

(CSS):

.video 
{
    width: 100%;  
    height:75px;
    border-bottom:Solid 1px #c9c9c9;
    position:relative;

}

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

.video .right 
{ 
    height:74px; 
    float:left; 
    position:relative; 
    width:180px;

}

Bu this causes the div on the right to drip to the line below. How can I get it to stay on the same line and just occupy the rest of the space that the the left div is not using?

Cheers

Upvotes: 4

Views: 6036

Answers (2)

BalusC
BalusC

Reputation: 1109655

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.

Upvotes: 4

antpaw
antpaw

Reputation: 16015

try this:

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

Upvotes: 1

Related Questions