Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

left div fill remaining horizontal space?

Tags:

css

I have two divs

#left, and #right.

the right div has a fixed width.

How can i cause the left div to take up all remaining horizontal space?

like image 538
Hailwood Avatar asked Aug 25 '10 08:08

Hailwood


People also ask

How do you make a div fill a remaining horizontal space?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent.


2 Answers

Float the #right div within #left, and leave #left without a float. Add right-padding to #left of the width of #right, if you wish for the space below the floated #right to be empty.

You may also need to add a negative right margin to the #right element equal to the right-padding of left to pull it up to the right edge of #left too. Alternatively to using a negative margin you could set #left with position: relative and add position: absolute to #right to the top left of #left (also with the padding on #left).

like image 55
pharalia Avatar answered Oct 25 '22 19:10

pharalia


How about using a table, or the CSS display:table-cell; property?

like image 45
Rolf Avatar answered Oct 25 '22 19:10

Rolf