CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 9001

position:absolute h1 element overflowing right

I have a container that has all of the following CSS rules (taken from the Chrome dev toolbar):

border-bottom-color: rgb(85, 85, 85);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(85, 85, 85);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(85, 85, 85);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(85, 85, 85);
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: rgb(85, 85, 85);
display: block;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 100;
height: 680px;
line-height: 25.9200000762939px;
margin-bottom: 0px;
margin-left: 411.5px;
margin-right: 411.5px;
margin-top: 0px;
max-width: 1080px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
padding-top: 40px;
position: relative;
text-shadow: none;
vertical-align: baseline;
width: 1080px;

There is a child h1 element with these CSS rules:

h1 {
    font-size: 42px;
    line-height: 42px;
    position: absolute;
    top: 50%;
    top: calc(50% - 21px);
    right: 0;
    text-align: right;
    margin: 0;
    padding: 0;
}

However, the text overspills to the right of the container:

screenshot 1

screenshot 2

How can I ensure that the h1 element snaps to the right hand side of the parent element, without overspilling?

EDIT: The other element, with the iPad image, has the following CSS code:

.ipad {
    width: 251px;
    height: 600px;
    background-image: url(../img/ipad.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: absolute;
    left: 0; top: 0;
}

The HTML is as follows:

<div class="canvas">

    <div class="wrapper normal referrals">

        <div style="position: relative;">

            <div class="referrals fade ipad" data-order="1"></div>

            <h1>Referrals</h1>

        </div>

    </div>

</div>

How is it that the h1 element ignores the parent element's padding, but the other element does not?

Upvotes: 0

Views: 1727

Answers (4)

timo
timo

Reputation: 2169

The reason your other element is not overflowing the padding is because it has DISPLAY: absolute in stead of POSITION: absolute;

Create a new div .container with position:relative; inside your div .wrapper.

HTML

<div class="wrapper normal referrals">
    <div class="container">
        <div class="referrals fade ipad" data-order="1"></div>
        <h1>Referrals</h1>
    </div>
</div>

CSS

.container {
    position:relative;
}

Upvotes: 1

DMande
DMande

Reputation: 341

you could use right:60px (containers padding-right) or you can create another wrapper inside the first container with position relative

Upvotes: 1

Christina
Christina

Reputation: 3732

Your h1 tag has position: absolute; right:0 which means that it will be rendered at the rightmost end of the container, which is exactly what happens. If I understand correctly your problem is that you also want to account for the container's padding, in which case you should use right: 60px; (since the container's padding is 60px). Alternatively you can use float:right; instead of absolute positioning, although how well that would work also depends on the rest of your markup.

Upvotes: 2

TheFrozenOne
TheFrozenOne

Reputation: 1715

The h1 element has position: absolute; so it does not care if the parent has padding or not. You could solve it like this.

right: 60px; where 60px is the containers padding-right.

Upvotes: 2

Related Questions