L
L
Lici2014-06-15 23:03:44
css
Lici, 2014-06-15 23:03:44

How to make 2 div: fixed + rubber together?

Here is the page: tkstour.com/about_tkstour for example
There are 2 blocks, left <div class="sitebar">and right <div class="rt_main">.
The left should be a fixed width width: 240px;
The right one should fill the entire central part of the site (div class="block"), which, in turn, changes depending on the width of the browser window.
I have already played with overflow: hidden, with different floats, with min-width and max-width, with display, with everything I know or googled. Even tried display table.
Almost what you need is obtained if you make a sitebar, for example, width=30%, and rt_main width=70%. And then they are both rubber and stay in place.
But I need a sidebar - fixed, and the main block - rubber. And now, just when the window is reduced so that this block has less space than in max-width - it jumps down, under the sidebar block.
Made up not from scratch and already regretted it, such oddities drag on through the whole process.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
H
Hakyna, 2014-06-16
@hakyna

oldschool )
codepen.io/anon/pen/Ggkoh

L
Lisonok, 2014-06-16
@Lisonok

You can set their common parent element
width: 100%;
display:table;
And the blocks themselves
display: table-cell;
You set the width for the left block and the right one will automatically take up all the free space.
PS If the text should be pressed to the top, then add vertical-align: top;
The second way
For the left block, set width:240px;
And for the right one width:calc(100% - 240px)
And either set both float:left or display: inline-block
BUT!!! IE8 and below does not support calc()

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question