Hello.

Help please deal with the positioning in the center. There is a block, the exact width of which is not known, is specified by the content. Along the edges should be framed by two pictures, they also have to move apart.

Example here

I used folates for merging and expanding, and it is impossible to level such a unit in the center.

It does not leave the feeling that something did wrong, it seems that it can be easier, but I can not find the right option.

    3 answers 3

    Option with CSS3 (multiple backgrounds)

    The outer div takes up the entire width and centers. Content sits in `display: inline-block 'so that it expands under the content. Pictures are drawn with backgrounds in the background of the side padding.

    • OGRAOOOOOOOMNOE Thank you !!!!!!! Your advice helped a lot !!!!!!!!!!!!!!!!!!! Here is the full page of what happened, both blocks in the center are aligned in this way. biactors.ru/interior.html - easy

    If arranged with Jquery, then something like this probably ...

    HTML

     <div id="text"> <div class="text">Text text text text text text text text</div> </div>

    CSS

     #text { max-width: 600px; } .text { display: -moz-inline-stack; /* ← Firefox 2 backwards compatibility */ display: inline-block; /* ↓ IE6 & IE7 «hasLayout» voodoo */ zoom: 1; *display: inline; text-align: center; }

    Jquery

     $(document).ready(function(){ var widthDiv = $('.text').width(); $('#text').css({'width' : widthDiv, 'margin' : '0 auto'}); });

    I checked, but without the right and left blocks, everything works. I think with the blocks on the sides also work.

    • And if the author does not want a limit of 600 px? What if the customer doesn't have a 15 inch screen? Don't get me wrong, your decision is taking place, but where do you get the number 600 and why should you center the text? - Gena Tsarinny
    • The author of the question in the example has max-width and text in the middle ... - zhekonya
    • I apologize for 600px, this is one of the samples. - easy

    How are you going to center on what is unlimited in width? under this condition, the text will be as wide as the viewport.

    • This is just an attempt to make the box stretch and be in the center and there were two pictures. - easy
    • I can not imagine what you want to do. How can you center a block that has no width restrictions? - Gena Tsarinnyy
    • and if using jquery to find out its width and then add the value of css width and margin to it? - zhekonya