Semi Fluid Layout CSS / HTML

I have a two-column layout in which I have a static width for the right column of 350 pixels, and for the left column the width should be such that it fills the rest of the page. Or at least that's what I want, but unfortunately it is not.

Here is a look at my css / html: http://jsfiddle.net/CmJ7P/ . Any help you could offer on how to do this would be greatly appreciated.

Edit: I would prefer a solution in IE6 if you can

+2
source share
2 answers

I just updated your fiddle - http://jsfiddle.net/CmJ7P/1/ . Basically you need to remove the float from the left column and put the right column first in the HTML.

Link Adams also has a solution.

+5
source

I know that someone will advise this, but I think the best way to achieve this is with staff. Sort of:

<frameset cols="*,350px"> <frame src="a.html" /> <frame src="b.html" /> </frameset> 

This will create two frames: left and right. The left one will take the whole page minus 350 pixels.

Alternatively, you can use javascript to get the width of the entire document, subtract 350 from the total, and bind a window resize event to update the width of your liquid element (the one that occupies the rest of the page). jQuery will make this pretty easy. I'm not too sure about browser compatibility.

-2
source

Source: https://habr.com/ru/post/892098/


All Articles