CSS height and width issues

Question

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

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

The height of <div> is equals to 0:

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

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...

Make a fiddle, or provide some useful code, git repo is not how people want to access your project — theblindprophet, May 25 '16 at 12:01
Always use clear:both after using float. That's why you are getting issue while inspecting them. — Leo the lion, May 25 '16 at 12:03
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. — Pete, May 25 '16 at 12:04
@Pete i think he has added his git link which has code and necessary images.. isn't it enough? — Leo the lion, May 25 '16 at 12:04
As soon as you include height into your .row, your issue gets solve. — frnt, May 25 '16 at 12:18
@Leothelion no, this site is meant to be a resource for people to use in future. If in future, the project is removed from github, then people looking at this question won't know what code caused the initial problem. [See this post on meta](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) and [this showing the question without code is off-topic for this site](http://stackoverflow.com/help/on-topic) — Pete, May 25 '16 at 12:29
@HuyVo, if you don't want to add an extra clearing element, [use a clearfix](http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use). — Pete, May 25 '16 at 12:38

score 0 · Accepted Answer · answered May 25 '16 at 12:06

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).

score 0 · Answer 2 · answered May 25 '16 at 12:10

What you need is clear:both; as you are using float and its almost necesarry to use clear:both after float or else there will be inspect issue or blank space error.

So your updated html will be

<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 class="clr"></div>

    </div>

and add this class in your stylus.css

.clr{clear:both;}

and you are done. Please check your git as i have merged code there too. If you have any issue then let me know. Thank you

Your solution works like a charm, but now I have another for you: in the desktop view (min-width: 992px and above), each of the 3 sections should take up equal amount of space on the screen, but now the min-width is smaller than 992px, so as in the tablet view (between 768px and 991px) and the mobile view (equal to or less than 767px). All of them have min-width lower than the number I declared. — , May 25 '16 at 13:00
Did not get the point. Can you please add in the question with related images?? — Leo the lion, May 25 '16 at 13:15
When I change my screen to below 992px, my site will display in the tablet view (see my @media). But when I test with 990px, it still displays in the desktop view. — , May 25 '16 at 13:19
If your screen resolution is below 992px then it will show 2 div and one big div under those div..what else you need? — Leo the lion, May 25 '16 at 13:22
On my browser in 980px, it still shows 3 section on the same row. — , May 25 '16 at 13:27

score 0 · Answer 3 · answered May 25 '16 at 12:16

The first thing that I like to do when creating a site is do something like this:

    html, body {
         height: 100%;
    }

This helps the page to know that no matter what, your page should always be 100% height. This will also keep divs and styles that are inside your body to keep from becoming '100%' height.

Looking further, I am unsure if your homework requirements but if you wanted the height of the div to be full page height, set it to height: 100%;

As for your h2 tags, I don't know what you are trying to accomplish but if you are worried about the margins/width try something like this and play with the padding:

    h2 {  //remove position: relative and your top and left styles       
      border: 1px solid black;
      font-size: 1.25em;
      width: 30%; //set the width of the h2 to be 30% of the BOX
      text-align: center;
      margin: 0;
      background-color: #808080;
      color: #FFFFFF;
      float: right; //add a float so it goes to the right of the box
}

I hope this helps!

score 0 · Answer 4 · answered May 25 '16 at 15:07

This will help you. https://jsfiddle.net/maheshv13/edq5m3pa/3/

function equalHeight(){
    $(".equalHeight").each(function(){
    var findHeight = $(this).height();
    var maxHeight = Math.max.apply(Math, $(this).map(function(){
    $(this).height('100%');
    return $(this).height();
    }));
    $(".equalHeight").height(maxHeight);
});
}
$(window).resize(function(){
    equalHeight();
}); 
equalHeight();

CSS height and width issues

4 Answers4