I contacted such a problem during layout. On the left there is a small slider, and on the right there should be a menu and it (its background) should be stretched depending on the screen resolution. I tried to set the width: 100% , but it immediately jumps to another line.

  • Try setting the slider float: left. - systemiv
  • From the very beginning I put it. - Arteom
  • Should the menu stretch or its background? Can I see the layout? - ling

4 answers 4

 <div class="wrapper" style="background:url(image.jpg) right center repeat-x;"> <div class="slider" style="float:left"></div> <div class="menu" style="float:right"></div> <div class="clear" style="clear:both"></div> </div>

put the background on the div.wrapper, the slider on the left, the menu on the right

  • I need, so to speak, several menu floors. - Arteom pm
  • so what's the problem? div.menu can act as a container for menus - deamondz
 <div class="wrapper"> <div class="slaider"></div> <div class="menu"></div> </div> 
 .slaider { float: left; width: 400px; /* ширина слайдера */ } .menu { position: relative; margin-left: 410px; /* ширина слайдера + отступ если нужно (минимум - ширина слайдера) */ }

So the menu is obliged to stretch the rest of the width of the screen.

 <div class="wrapper"> <div class="slaider"></div> <div class="menu"></div> <div class="clear"></div> </div> .clear{clear: both; font-size: 0; height: 0; overflow: hidden;}

This will help to avoid some problems with the elements below the float, but the option with float + margin-left is in itself incorrect.

    Does absolute positioning mean anything to you?