There is this form

.b-input-field { position: relative; text-align: left; width: 200px; } .b-input-field__help-block { display: none; color: white; max-width: 310px; position: absolute; background: #F6744B; opacity: 0.85; z-index: 3; border-radius: 3px; padding: 20px 16px; left: 50%; transform: translate(-50%, 12px); } .b-input-field__help-block:before { display: block; content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%, -8px); z-index: 10; border-color: transparent transparent rgba(246, 116, 75, 1) transparent; border-style: solid; border-width: 0 8px 8px 8px; width: 0; height: 0; } .b-input-field:hover .b-input-field__help-block { display: block; } 
 <div class="b-input-field"> <div> <label class="b-input-field__label">Label</label> <div class="b-input-field__input-wrap"> <input type="text" class="b-input-field__input " autocomplete="off" name="name" value=""> </div> <p class="b-input-field__help-block">Какой-Ρ‚ΠΎ тСкст Π² Π±Π»ΠΎΠΊΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ</p> </div> </div>

The left property, which is applied to a text container, centers it, but decreases width by the value described in this property (50% in this case), but the container needs to be width depending on the content, but not wider than 310px, which described by the max-width property. How to achieve this?

    2 answers 2

    I am usually helped by the task left: 0; right: 0; left: 0; right: 0; to align the absolute block en the entire width of the content (parent):

     .b-input-field { position: relative; text-align: left; width: 200px; } .b-input-field__help-block { display: none; color: white; max-width: 310px; position: absolute; background: #F6744B; opacity: 0.85; z-index: 3; border-radius: 3px; padding: 20px 16px; left: 0; right: 0; transform: translate(0%, 12px); } .b-input-field__help-block:before { display: block; content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%, -8px); z-index: 10; border-color: transparent transparent rgba(246, 116, 75, 1) transparent; border-style: solid; border-width: 0 8px 8px 8px; width: 0; height: 0; } .b-input-field:hover .b-input-field__help-block { display: block; } 
     <div class="b-input-field"> <div> <label class="b-input-field__label">Label</label> <div class="b-input-field__input-wrap"> <input type="text" class="b-input-field__input " autocomplete="off" name="name" value=""> </div> <p class="b-input-field__help-block">Какой-Ρ‚ΠΎ тСкст Π² Π±Π»ΠΎΠΊΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ</p> </div> </div>

    PS: Why does block narrowing occur in your example -

     max-width: 310px; width: 100%;

    It is necessary to specify the width for the absolute block.

      Set the container parameter width for example width: 80%;

       .b-input-field { position: relative; text-align: left; width: 200px; } .b-input-field__help-block { display: none; color: white; width: 80%; // Π·Π°Π΄Π°Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΡƒ max-width: 310px; position: absolute; background: #F6744B; opacity: 0.85; z-index: 3; border-radius: 3px; padding: 20px 16px; left: 50%; transform: translate(-50%, 12px); } .b-input-field__help-block:before { display: block; content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%, -8px); z-index: 10; border-color: transparent transparent rgba(246, 116, 75, 1) transparent; border-style: solid; border-width: 0 8px 8px 8px; width: 0; height: 0; } .b-input-field:hover .b-input-field__help-block { display: block; } 
       <div class="b-input-field"> <div> <label class="b-input-field__label">Label</label> <div class="b-input-field__input-wrap"> <input type="text" class="b-input-field__input " autocomplete="off" name="name" value=""> </div> <p class="b-input-field__help-block">Какой-Ρ‚ΠΎ тСкст Π² Π±Π»ΠΎΠΊΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ</p> </div> </div>