ansaurus

Question

How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

Answer 1

+1 A:

This seems to accomplish what you're going for.

<html>

<head>
 <title>This is My Page's Title</title>
 <style type="text/css">
  #left {
   float:left;
   width:180px;
   background-color:#ff0000;
  }
  #right {
   width: 100%;
   background-color:#00FF00;
  }
 </style>
</head>

<body>
 <div>
  <div id="left">
   left
  </div>
  <div id="right">
   right
  </div>
 </div>
</body>

 </html>

Boushley 2009-06-23 14:35:14

You have to remove the width: 100% on the right div though to make it work.

Johan Leino 2009-06-23 14:39:50

I just copy and pasted that code out of a page i tested it on... the 100% works.

Boushley 2009-06-23 14:59:07

At least in chrome it does.

Boushley 2009-06-23 15:01:26

thanks!! in never used %s before i think they are the key for flexibility

janoChen 2009-06-23 17:43:59

Answer 2

A:

@Boushley

I'm pretty sure the design suggested by Boushley breaks down if #right is higher than #left. Try inserting:

<p>right</p>
<p>right</p>
<p>right</p>

As the contents of #right to see what I mean.

( I'm told there is no way to comment directly on Boushley's answer which is what I would have preferred. )

Peter V. Mørch 2010-05-20 04:37:55

There is a way to comment... if you read the very thread you linked to.

Jimmy Cuadra 2010-05-20 04:44:56

Could you please let me know how? Remember, I have a reputation of 1 at the moment... I've read the thread again, and can't find the answer given my reputation.

Peter V. Mørch 2010-06-08 06:55:14

ansaurus

tags:

views:

answers:

How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

related questions