CODEWITHSUNDEEP
javascriptcsshtml
Salman Sarray
Salman Sarray

Reputation: 1437

Adding padding to the header pushes the header to the right, solution?

This is my code. I'm still a beginner in CSS that's why I'm asking this question please help me i've tried everything. the problem is when ever i add padding to the header it seem like its pushing all the elements in the header to the right am I missing something here?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>To do list app</title>

    <style type="text/css">
        header {
    width: 100%;
    height: 80px;
    position: fixed;
    padding: 15px;
    top: 0;
    left: 0;
    z-index: 5;
    background: #25b99a;
    box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

}

header input {
    width: 100%;
    height: 50px;
    float: left;
    background: rgba(255,255,255, 0.2);
    border-radius: 5px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    border: 0px;
    box-shadow: none;
    outline: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

    </style>
</head>
<body>

    <header>
    <input type="text" placeholder="Enter an activity..">
    </header>

</body>
</html>

Upvotes: 0

Views: 3014

Answers (4)

Luka S
Luka S

Reputation: 36

You could try adding a style of box-sizing: border-box to the header. This will mean that the width of the header (100%) is calculated including the padding. The end result will be that width + padding will add up to 100%. The box-sizing style is also well supported in all browsers.

Upvotes: 2

Leonardi Perez
Leonardi Perez

Reputation: 1

You can just set the padding on top and down if you don't need the sides. And your header is moving because it has to move 15px to it right to make space for the padding in it left.

padding-top:15px
padding-down:15px

Upvotes: 0

CodeSmith
CodeSmith

Reputation: 3197

Problem is when you add the padding you break the 100% width and add a padding to it making it 100% + 2*padding. Even when the borders are not there problem persists, only you don't notice it, try typing as many letters so input fills up and notice how right side will still be bad.

In modern browsers only For header:

display: flex;

For input:

align-items: stretch;

Flex display should take everything into account.

Upvotes: 1

Julio Feferman
Julio Feferman

Reputation: 2676

Subtract the left and right padding from the header width using:

width: calc(100vw - 30px);

Here's the snippet:

header {
    width: calc(100vw - 30px);
    height: 80px;
    position: fixed;
    padding: 15px;
    top: 0;
    left: 0;
    z-index: 5;
    background: #25b99a;
    box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

}

header input {
    width: 100%;
    height: 50px;
    float: left;
    background: rgba(255,255,255, 0.2);
    border-radius: 5px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    border: 0px;
    box-shadow: none;
    outline: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
    <header>
    <input type="text" placeholder="Enter an activity..">
    </header>

Upvotes: 2

Related Questions