Hello. There is an interesting task.

<div class="slider"> <div class="1s">1st slide</div> <div class="2s">2nd slide</div> <div class="3s">3d slide</div> </div>

CSS:

 .1s { float: left; } .2s { margin: 0 auto; } .3s { float: right; } .slider div { width: 200px; }

The essence of the problem: 1st div align on the left side, 3rd - on the right, and central in the center. The text in each block is aligned to the left. The central block has a minimum indent of 150 pixels from both blocks.

I get in this way that slide 3 slides down, I can not figure out how to make it inline

  • And what's the reason? - soledar10
  • he is rubbery The second block should always be in the center and at the narrowing should have a minimum indent of 150 pixels - redfcv
  • And the sizes of the first and third ones Little info. - vkovalchuk88
  • corrected a little condition to make it clearer - redfcv

1 answer 1

Since I do not do floats, I present my decision:

  .slider { position:relative; } .s1 { left:0; top:0; width:200px; position:absolute; } .s2 { right:0; top:0; width:200px; position:absolute; } .s3 { padding: 0 215px; }
  • everything is good only if I need the center column to be 200 pixels wide? - redfcv
  • Hmm, then what kind of tires? - vkovalchuk88
  • one
    The 1st and 3rd slides are attached to the left and right border, and the 2nd slide is always in the middle. But I came up with a decision in principle, with your aiming, thanks. - redfcv