Hello.

There was such a problem: the site has two columns. One - sitebar - fix. size (254px), and the second - dynamic size (max-width: 1100px min-width: 668px). Help to implement (in general).

What I did myself:

#sitebar { position: relative; width: 254px; float: left; } #content-right-part { float: right; max-width: 1100px; width: 100%; min-width: 668px; }

In this situation, the right column slightly decreases, and then jumps to the next line. Trying to solve this problem, did the following:

 content { display: block; width: 1400px; /*max size*/ white-space: nowrap; } content section { display: inline-block; }

However, the problem is that adaptability is missing. That is, it just appears scrolling. Help me please.

  • width: 1400px -? And how will adaptability be here? - soledar10
  • Thanks for the answer. As I wrote above: I did this so that the blocks are not transferred. + width: 1400px - for the parent. And the children can be adaptive (or am I mistaken? ..) - PostMix
  • Well, maybe you are right. But then how to prevent blocks (<section>) from moving to the next line? A little more detail about the problem: with the dynamic size of the right block, it (the content) is not rapidly decreasing. That is, the first "two" px are normal, and then there is not enough space for him, and he jumps to the next line ... - PostMix

1 answer 1

No need to set the width of the main content. The minimum width can be set with small resolutions. It is better to use the class rather than id where it is possible.

 <main> <h1>Responsive columns</h1> <section class="main_sidebar"> Sidebar </section> <section class="main_content"> Main content </section> </main> h1 { font-family:Arial, san-serif; font-size:24px; color:rgba(0,0,0,0.54); text-align:center; } main, .main_content, .main_sidebar { position:relative; display:block; } main { width:100%; max-width:1024px; margin-top:50px; overflow:hidden; } .main_sidebar { float:left; width: 100px; height:auto; background:red; } .main_content { background:green; margin-left:100px; }

jsfiddle

  • Thank you. Helped :) - PostMix