Good day.
I can not figure out how to do to put blocks horizontally. There is html

<div class="left"></div> <div class="center"></div> <div class="right"></div>

and styles

 .left,right {float:left; width:50%;height:10px} .center {float:left;width:30px;height:10px;}

How can jQuery make the right and left blocks be “slightly less” 50% (subtracting 30px of the center), so that they fit across the width of the browser window at different resolutions?

Thank you in advance.

    3 answers 3

    CSS:

     .left {float:left; width: 50%; padding-right: -25px; height:10px} .right {float:right; width: 50%;height:10px} .center {width:30px;height:10px;margin: 0 auto} .inside-left{ margin-right: 15px; } .inside-right{ margin-left: 15px; }

    HTML:

     <div class="left"><div class="inside-left"></div></div> <div class="right"><div class="inside-right"></div></div> <div class="center"></div>

    JSFIDDLE:

    http://jsfiddle.net/t7zL6cxj/

    • Thank. Even without jQuery. For myself, I redid it a bit, for it was all the same: .left {float: left; width: 50%; padding-left: -30px; height: 10px} By the way, if the memory of negative padding does not fail me :) - Romancho
    • but it is not needed: accidentally copied the experiment - knes

    There is another option , the most common and simple, I would say:

    HTML (honestly with @Deonis ):

     <div class="wrapper"> <div class="left">1</div> <div class="center">2</div> <div class="right">3</div> </div>

    CSS:

     .wrapper { position: relative; } .wrapper div { position: absolute; text-align:center; } .left { background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; } .center { background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; } .right { background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }

      If there is a wrapper or you can add it, you can do this :

       <div class="wrapper"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>

      CSS

       .wrapper { display: table; width: 100%; table-layout: fixed; } .wrapper > div { display: table-cell; height: 10px; } .center { width: 30px; }
      • It seems to me that with this option the left and right columns will depend on the content and can easily become 70% and 30%, for example. - MasterAlex
      • @MasterAlex, no, here the key property is table-layout: fixed; . [Example] [1] [1]: jsfiddle.net/6vyxqnu9/1 - Deonis
      • hmm, and in the example they write 50% for some reason, an interesting thing, useful in the admin site tables of the site - MasterAlex