I often run in the following problem, I have a web page with the

Question

0

Editorial Team

Asked: May 24, 20262026-05-24T02:32:15+00:00 2026-05-24T02:32:15+00:00

I often run in the following problem, I have a web page with the

0

I often run in the following problem, I have a web page with the following divs:

header
sidebar
content
footer

sidebar and content are both float left with a break afterwards.

I want content to expand to the right edge of the browser, no matter how wide or narrow the browser width.

However, no matter what I try, I am face with two choices:

content must be a fixed width
content is not a fixed with (no width property) but resizing the browser pops the content down under the sidebar

The site I’m working on has many more divs than these four so it’s hard to post CSS code that is not convoluted, but does anyone have a general strategy to enable content to expand out to the browser’s right edge while never popping under sidebar if browser width is made too small?

My current solution is: table.

enter image description here

Addendum 1

Thanks Hristo, your solution works except that sidebar and content can’t have fixed heights, which causes the footer to appear in the middle. Since you aren’t using floats, how do you make the footer come after both of them?

enter image description here