How to add fixed div width next to auto div width?

Question

I currently have a div with a width: auto to fill the entire width of the screen, but I want to put a sidebar on the right side. When I float in width: automatically div to the left and fixed width div to the right, it goes instead. I'm basically looking for something similar to the fact that reddit has a search bar there on the right width of the content, automatically adjusted to the width of the page. Thanks

Answer 1

You can do it as follows:

Suppose you have two divs inside a parent container that expands to fit the page:

<div id="container"> <div id="autowidth">text expands her...</div> <div id="fixed">This is a fixed column</div> </div> 

In your CSS:

 #container { width:100%; border:1px solid black; padding-right:200px; } #autowidth{ width:100%; background-color:red; float:left; } #fixed{ width:200px; background-color:green; float:right; margin-right:-200px; } 

Basically, the parent container holds everything together. It has a 200px registration (width of the right column), so that its contents do not go beyond this point. In turn, the right column has an edge of -200px, so that it forces the boundaries imposed by the parent addition and always puts itself first. The other div, in fact, now only has the spaces provided by the parent container, restrained by its filling, so its 100% will be, in fact, (100% - (parent addition)). You can see the working result of this here: jsfiddle.

I am sure there may be more elegant solutions, so bare with me.

if you want to specify a background, for example, 2 cols, you can go to the classic focal column (see the example list separately )

Answer 2

You do not need a div container. I made css inline for short.

 <div style="float:right; width:14em; background-color:#CCC;"> <p>This div is fixed-width.</p> </div> <div style="background-color:#EEE; margin-right:14.5em;"> <p>This div is auto-width.</p> </div> 

Answer 3

The answer does not work for me, I think it is out of date. Now you need to specify the size of the window: border-box to fill to count to width, but thanks for the inspiration. This is my decision.

 #autowidth { float:left; width:100%; padding-right:200px; box-sizing:border-box; } #fixed { float:right; width:200px; margin-left:-200px; }