CSS width properties not working correctly

Question

I write a html page containing a header on top, following by a section part and an aside part, and then a footer part, and write some CSS codes for styling. here is the html and CSS code:

body{
    width: 80%;
    margin: 0 auto;
    background-color: peachpuff;
}


header, section, aside, footer, article{
    margin: 10px;
    padding: 10px;
    text-align: center;
    background-color: aliceblue;
    border: 1px solid cadetblue;
    font-size: 2rem;
    width: 100%;
    box-sizing: border-box;
}
header>h1{

    height: 100px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 2px red;
}
article {
    width: 85%;
    margin: 0 auto;
}
section{
    width: 60%;
    height: 300px;
    margin-right:3px;
display: inline-block;
    /*float:left;*/
}

aside{
    width: 37%;
    margin-left:3px;
    height: 300px;
    float: right;
    display: inline-block;
}

footer{
    display: block;
    width: 100%;
    background-color: aliceblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<header>
    <h1>This is header.</h1>
</header>

<section>
    this is section.
    <article>this is article.</article>
</section>

<aside>aside part.</aside>

<footer>this is footer.</footer>

</body>
</html>

I set width:100% for header and footer, and it should make then to stretch so fill all the body width, as body is their parent node. but I notice that it cause header and footer that go beyond the body width at right side! if I comment that, every thing will be fine, but why it doesn't work as expected?

and second question, I want section and aside to be located next to each other, and by setting float:right; for aside tag they are, but if I set float:left; for section element too, while they still are next to each other, footer become their background too! why that happens?

thanks.

@ Ramon de Vries - but i set box-sizing: border-box; so it margin couldn't cause that, isn't it? — feel free
– feel free, Commented Dec 21, 2018 at 8:37
The default is width auto because they are block level elements. No need to set width to 100%. — vsync
– vsync, Commented Dec 21, 2018 at 8:40
@vsync - you're right, but why setting width cause this issue? actually it should has no effect, but it has! — feel free
– feel free, Commented Dec 21, 2018 at 8:43

Ramon de Vries · Accepted Answer · 2018-12-21 08:36:52Z

3

The margin:10px; will push the header out of the body, remove the margin from the header and it works fine.

body{
    width: 80%;
    margin: 0 auto;
    background-color: peachpuff;
}


header, section, aside, footer, article{
    padding: 10px;
    text-align: center;
    background-color: aliceblue;
    border: 1px solid cadetblue;
    font-size: 2rem;
    width: 100%;
    box-sizing: border-box;
}
header>h1{

    height: 100px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 2px red;
}
article {
    width: 85%;
    margin: 0 auto;
}
section{
    width: 60%;
    height: 300px;
    margin-right:3px;
display: inline-block;
    /*float:left;*/
}

aside{
    width: 37%;
    margin-left:3px;
    height: 300px;
    float: right;
    display: inline-block;
}

footer{
    display: block;
    width: 100%;
    background-color: aliceblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<header>
    <h1>This is header.</h1>
</header>

<section>
    this is section.
    <article>this is article.</article>
</section>

<aside>aside part.</aside>

<footer>this is footer.</footer>

</body>
</html>

answered Dec 21, 2018 at 8:36

Ramon de Vries

1,3428 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

feel free Over a year ago

yes, it works, but i set box-sizing: border-box for all elements, so why still margin change the dimensions of the boxes?

Ramon de Vries Over a year ago

@feelfree, https://www.w3schools.com/css/css3_box-sizing.asp box-sizing will only affect the padding on elements, not the margin

Gaurav Pipaliya · Accepted Answer · 2018-12-21 09:45:28Z

1

body{
    width: 80%;
    margin: 0 auto;
    background-color: peachpuff;
}


header, section, aside, footer, article{
    margin: 10px 0 0 0;
    padding: 10px;
    text-align: center;
    background-color: aliceblue;
    border: 1px solid cadetblue;
    font-size: 2rem;
    width: 100%;
    box-sizing: border-box;
}
header>h1{

    height: 100px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 2px red;
}
article {
    width: 85%;
    margin: 0 auto;
}
section{
    width: 60%;
    height: 300px;
    margin-right:3px;
display: inline-block;
    /*float:left;*/
}

aside{
    width: 37%;
    margin-left:3px;
    height: 300px;
    float: right;
    display: inline-block;
}

footer{
    display: block;
    width: 100%;
    background-color: aliceblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<header>
    <h1>This is header.</h1>
</header>

<section>
    this is section.
    <article>this is article.</article>
</section>

<aside>aside part.</aside>

<footer>this is footer.</footer>

</body>
</html>

answered Dec 21, 2018 at 9:45

Gaurav Pipaliya

193 bronze badges

1 Comment

Gaurav Pipaliya Over a year ago

do you want like this?

Collectives™ on Stack Overflow

CSS width properties not working correctly

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related