CODEWITHSUNDEEP
htmlcsswebstyles
strangeQuirks
strangeQuirks

Reputation: 5920

Placing 2 divs next to each other with the left filling the space

How can I place two divs right next to each other (left and right) in order that the left div auto sizes depending on how wide the right div is.

So for example if the right container is 100px wide and the right div in the container is 10px wide ,then the left div is 90px wide. OR if the right div is 40px wide then the left is 60px wide.

Thanks

Upvotes: 0

Views: 1091

Answers (2)

NickD
NickD

Reputation: 351

I agree with the comment above. Just make sure that you float: right; the div that you want to the right side of the screen. I would have left this as an additional comment, but do not have enough rep to do so. 

<style>
    .left {
        width: auto;
    }

    .right {
        width: 100px;
        float: right;
    }
</style>

Upvotes: -1

NoPyGod
NoPyGod

Reputation: 5067

This is a trick I use a lot

<style>
    .sidebar {
        width: 600px;
        float: left;
        background: #00ff00;
    }

    .content {
        margin-left: 610px;
        background: #ff0000;
    }
</style>

<div class="sidebar">
    sidebar
</div>

<div class="content">
    content
</div>

You set the width of one element and float it, then you force the element you want to sit beside it into the gap by putting a margin on it the same width as the floating element.

Word of warning: In this example, the sidebar element MUST appear first in your source code.

You can adjust the width of the columns dynamically by changing the width of one element and the margin of the other element.

Save the source to an html file on your destop and have a play around with it to figure out how it works.

Upvotes: 3

Related Questions