CODEWITHSUNDEEP
htmlcss
pufAmuf
pufAmuf

Reputation: 7805

Make Div on right side fill out all available space

I want to create two divs beside each other, however I want the one on the left side to be 300px, and the right one to take up the remaining amount on the screen. How would that be possible? Thanks!

Upvotes: 0

Views: 2260

Answers (5)

Salman Arshad
Salman Arshad

Reputation: 272266

This should be sufficient:

<div style="overflow: hidden;">
    <div style="width: 300px; float: left;"></div>
    <div style="margin-left: 300px;"></div>
</div>
  • overflow: hidden will stretch the container div to accommodate the tallest child element
  • float: left floats the element left (doh!)
  • width: 300px and margin-left: 300px together assures that if the right column is taller than left it will not flow below the left floated div; it will maintain a 300x gap from the left edge of container div

Tip: change to margin-left: 320px to add a 20px gutter

Here is a nice little DEMO

Upvotes: 1

Blender
Blender

Reputation: 298392

Here's something for newer browsers (not IE):

CSS:

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

​HTML:

<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>​

Demo: http://jsfiddle.net/N5zhH/1/

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49218

The most straight-forward (and I would say correct) way is to use display: table:

#wrapper {
    display: table;
    width: 100%;
}
#left, #right {
    display: table-cell;
    color: white;
}
#left {
    background: blue;
    width: 300px;
}
#right {
    background: red;
}

<section id="wrapper">
    <aside id="left">Left 300px</aside>
    <div id="right">Right the rest</div>
</section>

http://jsfiddle.net/YbLZE/1/

Try resizing the bottom right frame.

Updated with HTML5 elements section and aside, which you should use if you have an HTML5 doctype. I have to remember to use those...

Upvotes: 2

Chris
Chris

Reputation: 26898

One solution is to float: left; the left div that's 300px wide, and then apply overflow: hidden; to your right div. Here's the basic outline:

HTML:

<div class = "left">
    Glee is awesome!
</div>
<div class = "right">
    Glee is awesome!
</div>

CSS:

.left {
    width: 300px;
    float: left;
}
.right {
    overflow: hidden;
}

And a little demo: little link.

Upvotes: 1

Michael
Michael

Reputation: 1267

This is the working example: http://jsfiddle.net/tnm62/

Explenation:
1. Place both elements in one container.
2. Position your left element absolute, set its width to 300px.
3. Set left margin to your right element to 300px.

Upvotes: 1

Related Questions