CSS - How to pad an elements width by 50% of itself?


Tags: html,css,padding

Problem :

PLAYGROUND

How to pad an element by 50% of itself?

I want div .B to be 50% the width of its container where .A has a variable width.

HTML

<div class="A">
    <div class="B">SOME TEST TEXT TO CHECK FOR LINE BREAK</div>
</div>

CSS

.A{
    background:#58c;
    min-width:300px;
    padding-right:50%;
    box-sizing:border-box;
    height:300px;
}
.B{
    background:#b88;
    display:block;
    height:100%;
    width:100%;
}

I am unsure why in the demo div .A has padding 50% of its container instead of itself.



Solution :

DEMO

Add a div after .A and before .B to contain all children.

Use margin-right instead of padding to simulate the same effect of 50% padding.

This will work even when .A has a variable width.

HTML

<div class="A">
    <div class="AB">
        <div class="B">SOME TEST TEXT TO CHECK FOR LINE BREAK</div>
    </div>
</div>

CSS

.A{
    background:#58c;
    min-width:300px;
    box-sizing:border-box;
    height:300px;
}
.AB{
    background:#b88;
    display:block;
    height:100%;
    margin-right:50%;
}

    CSS Howto..

    How change css using variables to make an animation

    How to set css class 'active' by using C#?

    How to Automatically Close Alerts using Twitter Bootstrap

    How can we cache inline SVG in Browsers?

    how to get a css that does not cause overflow of words beyond box [closed]

    How to match an element's background colour with 2 semi-transparent element background colours

    How to vertically align html radio buttons with CSS-only in this code?

    Getting an class to show when item is clicked

    How to click CSS with a space using Selenium Webdriver

    How to rotate image in relation to mouse position?

    How to apply css animation to angular view when the view is called

    How to have responsive widths for labels and inputs using css

    How to make dot-dash underline

    Meeting Calendar | How to take care of the overlapping meetings to show in the calendar?

    How to remove css class with some effect using jQuery?

    How do I get these boxes to align in either jquery or css

    How can I achieve the mouseover effect like on wikipedia?

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    How to position these images in CSS?

    How to get Susy going with a CSS only toggle navigation

    How do I fix the navigation menu in Firefox and Internet Explorer?

    How to resize content area with CSS dynamically and no javascript

    How to add css class on every third post in wordpress?

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How Do I Get A Border From YUI GRID Tool?

    How to show only a portion of an image just by using the img tag?

    How to make my css webkit animation stop changing

    How can I convert an absolute file path to one CSS can use?

    how to make div background image responsive

    How to remove the BG image on jQueryUI autocomplete combo (select)