How can I make the left div expand and the right div have constant width?


Tags: html,css,html5,css3

Problem :

So as the title says, I want to put two divs right next to each other, and have the left one expand if the window is expanded, while the right one stays at a constant width.

Here is what I've got so far:

<body>
    <div id="content" style="background-color: red">
        <div id="left" style="margin-right: 100px; background-color: blue">
            This</br>is</br>left.
        </div>
        <div id="right" style="float: right; width: 100px; height: 100px; background-color: green">
            This</br>is</br>right.
        </div>
        <div style="clear:both"></div>
    </div>
</bod>

Which produces this:

It is quite sad if you can't see this :(

Ideally, the green square and blue square should have their tops aligned with each other. One solution I found was putting a negative margin-top setting on the green div, which works... but only as long as the blue div never changes in height. Unfortunately, the blue div can in fact change height in my situation.

Any ideas on how I'd fix this? I'm having some difficulty understanding the intricacies of CSS positioning :(



Solution :

If you can use position:absolute, you can do something like this:

<div class="left">This is the left box.</div>
<div class="right">This is the right box.</div>

And the CSS:

.left {
  position: absolute;
  left: 0px;
  right: 100px;
}

.right {
  position: absolute;
  right: 0px;
  width: 100px;
}

http://jsfiddle.net/Q2TKU/


    CSS Howto..

    How to not lose the css while appending html to an element?

    How to apply custom css to split post into multiple page

    How do I detect box-sizing border-box support with Modernizr

    How to animate the movement of inline-block items on page resize (ideally using css)?

    How do I spread out this navbar along with making the links exclusive to the button itself?

    How to put border bottom only on last-child of dropdown menu

    How can I make two divs stack whilst still having my text wrap without media queries

    How can I make a textfield highlight in red only after its input is proven as incorrect?

    How to setup a ASP template

    How to center a span element in CSS? [closed]

    How can I scale element height and width using CSS?

    How to centre a div vertically and horizontallly?

    How to add a 3rd level to my CSS drop down menu?

    How to call image on css?

    How to have a bold header text?

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    How to test CSS selector performance?

    how to display php search engine execution time and number of results before the results

    Click radio button then show submit button

    Amazing CSS Div scrolling effect, cant explain, link provided. This is a web design issue, how to get an effect like this?

    how to open a menu with a button?in html

    How to overlay image with color in CSS?

    How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

    How to trim off Image in CSS?

    iPhone iOS how to send an HTML email with CSS styling?

    How do I horizontally extend the clickable area of an inline span?

    css: how to inherit whole class

    How to make background of table cell transparent

    How to center a banner and keep margin?

    “Best fit” font size - how do I measure a sentence width?