Huy Vo Huy Vo - 6 months ago 14
CSS Question

CSS height and width issues

So I made a homework about creating a website with some simple CSS boxes. I found that I got 3 issues with my site:


  1. The height of
    <body>
    is equals to the height of
    <h1>
    :



enter image description here


  1. The height of
    <div>
    is equals to 0:



enter image description here


  1. The width of
    <h2>
    is equals to the width of its
    section
    :



enter image description here

I did nothing to change or override those height and width. They are default except for the width of
<h2>
, I set it to 30% width but it's still 100%.

My
html
:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML/CSS/JavaScript</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>HTML/CSS/JavaScript</h1>

<div class="row">

<section id="sec1" class="col-lg-4 col-md-6 col-xs-12">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<section id="sec2" class="col-lg-4 col-md-6 col-xs-12">
<h2>CSS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<section id="sec3" class="col-lg-4 col-md-6 col-xs-12">
<h2>JavaScript</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

</div>
</body>
</html>


css
:

/* Font family */
body {
font-family: Helvetica;
}

/* Simple Responsive Framework. */
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}

/********** Base styles **********/
* {
box-sizing: border-box;
}

section {
dispay: block;
color: #FFFFFF;
border: 1px solid black;
margin: 1%;
}

#sec1 {
background-color: #ff471a;
}

#sec2 {
background-color: #3399ff;
}

#sec3 {
background-color: #ffad33;
}

p {
padding: 5px;
margin: 5px;
}

h1 {
font-size: 1.75em;
display: block;
text-align: center;
margin-top: 60px;
margin-bottom: 100px;
}

h2 {
position: relative;
top: 0;
left: 70%;
display: block;
border: 1px solid black;
font-size: 1.25em;
width: 30%;
text-align: center;
margin: 0;
background-color: #808080;
color: #FFFFFF;
}

/********** Desktop view **********/
@media (min-width: 992px) {
.col-lg-4 {
float: left;
width: 31.33%;
}
}

/********** Tablet view **********/
@media (min-width: 768px) and (max-width: 991px) {
#sec1, #sec2 {
float: left;
width: 48%;
}
#sec3 {
float: left;
width: 98%;
}
}

/********** Mobile view **********/
@media (max-width: 767px) {
.col-xs-12 {
float: left;
width: 98%;
}
}


I am totally have no idea why my css are so wrong, please help...

Answer

1. Height of the body

The height of the body is related to the height of it's own content. Because the big blocks are float: left;, the parent loses is relation to the child and the height collapses. This can be fixed by adding display: inline-block to your .col class.

2. Height of div

Actually the same as above. The body doesn't take this into account either because you only have margins, and they are added outside of the box.

3. Width of h2

If you change your h2 CSS into:

h2 {
    display: block;
    border: 1px solid black;
    font-size: 1.25em;
    width: 30%;
    text-align: center;
    margin: 0 0 0 auto;
    background-color: #808080;
    color: #FFFFFF;
}

Small explanation: by removing the positioning and the top and left properties, you lose the part where a block element wants to take up 100% of the width.

The margin: 0 0 0 auto rule is to align your block to the right. By setting the left margin to auto, CSS knows he needs to align right (and the other way around).

Comments