parent element not following child element

Question

When we set up a parent element, and increment the contents of the child elements, shouldn't the size of the parents automatically scale to fit the child?

In contrast, the parent having applied the css properties, such as background given to it, does not scale for the parent. Here is my attempt to creating a 3 column simple layout, and the parent not scaling, and hence the border bottom is not being applied:

REPL.IT

As you can see, the contents are overflowing the parent and everything is not enclosed within the parent. How should I fix this?

First of all, please go read [ask]. Relevant code belongs directly into your question, so please edit it accordingly. — CBroe, Aug 24 '17 at 09:01
And then, you want to go research how to _enclose floated elements_. — CBroe, Aug 24 '17 at 09:02
@lumio, do you know how to select an element by id within an element by id? Ex: a div with id "x" is enclosing a div with an element 'y', and I want to get ahold of 'y' by ID. How do I do that? (I didn't want to make another post) — mathmaniage, Aug 24 '17 at 09:27
Better make another post though :) but why not giving y a class or id? — lumio, Aug 24 '17 at 09:29

lumio · Accepted Answer · 2017-08-24T09:51:52.383

5

What you need is a clearfix on your #bodytext because all your content floats.

Add the following line to your #bodytext:

#bodytext{
  overflow: auto;
}

For a better understanding, why you need a clearfix, read this answer.

edited Aug 24 '17 at 09:51

answered Aug 24 '17 at 09:04

lumio

7,428
4
40
56

1

I added a link with some further explanation to it :) – lumio Aug 24 '17 at 09:05
that's great. (It appears I can only accept the answer after 8 min.) – mathmaniage Aug 24 '17 at 09:07
1

No worries haha :D but thanks if you are going to accept it. – lumio Aug 24 '17 at 09:07
1

@kukkuz just did :) – lumio Aug 24 '17 at 09:52

score 1 · Answer 2 · answered Aug 24 '17 at 09:06

You have not properly cleared the floats - add overflow: hidden to bodyText or add an after element that uses clear: left:

#bodytext:after{
  clear: left;
  content: '';
  display: block;
}

See demo below:

@font-face {
  font-family: "handlee";
  src: url("handlee.ttf");
}

@font-face {
  font-family: "berkshirestyle";
  src: url("berkshire.ttf");
}

body {
  background-image: url("glass.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

#FirstHeader {
  float: left;
  clear: left;
  padding-left: 100px;
  color: white;
  font-size: 70px;
  color: rgb(122, 38, 0);
  text-decoration: underline;
  font-family: handlee;
  font-style: italic;
}

#bodytext {
  padding: 30px;
  font-family: berkshirestyle, cursive;
  font-size: 1em;
  color: #BCBCBC;
  overflow: hidden;
}

#bodytext:after{
  clear: left;
  content: '';
  display: block;
}

#bodytext {
  clear: left;
  margin-left: 30px;
  margin-bottom: 50px;
  border-bottom: 10px solid red;
  background-color: red;
}

#bodytext div {
  display: inline-block;
  width: 30%;
  margin-right: 20px;
  float: left;
}

form {
  clear: both;
}

<h1 id="FirstHeader">Coffes here</h1>
<img src="coffee.png" id="Coffee" alt="coffee image" width="100" height="125" />


<div id="bodytext">

  <div id="FirstParagraph">
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis
    maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus
    vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non
    vel arcu.<br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed
    nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim
    a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus
    ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac.
    Mauris cursus sed nulla in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla
    dignissim a sem. Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula
    faucibus ligula auctor pretium non vel arcu.
  </div>


  <div id="SecondParagraph">
    purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra. Duis
    maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus
    vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium non
    vel arcu.
    <br/> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
    risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
    non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla
    in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem.
    Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula
    auctor pretium non vel arcu.
  </div>

  <div id="ThirdParagraph">
    eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
    risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
    non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla
    in viverra. Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem.
    Duis eget risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula
    auctor pretium non vel arcu.
    <br> purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa. Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
    Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper, purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget
    risus vel est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante. Vestibulum sit amet ligula faucibus ligula auctor pretium
    non vel arcu.
  </div>

</div>

<form id="MainForm">

  <label for="Name">Name: </label>
  <input type="text" id="Name" placeholder="e.g nirajan basnet" required/>

  <label for="Email">Email</label>
  <input type="email" id="Email" placeholder="sth@sthmail.com" required/>

  <label for="Comment">Your comment: </label>
  <br>
  <textarea maxlength="100" id="Comment" placeholder="What do you think about the site?"></textarea>
</form>

score 0 · Answer 3 · answered Aug 24 '17 at 09:05

0

You can use display:inline-block:

#bodytext {

    display:inline-block;

}

answered Aug 24 '17 at 09:05

Ivan

34,531
8
55
100

score 0 · Answer 4 · edited Aug 24 '17 at 09:08

0

You need to do two things: First give css overflow:hidden to #bodytext and second after all 3 div i.e FirstParagraph , SecondParagraph ,ThirdParagraph you put <div class="clear"></div> and css for clear class clear:both.

edited Aug 24 '17 at 09:08

lumio

7,428
4
40
56

answered Aug 24 '17 at 09:05

ankita patel

4,201
1
13
28

score 0 · Answer 5 · answered Aug 24 '17 at 09:05

Just use float:left in #bodytext div to resolve this issue, check snippet below..

@font-face{
    font-family: "handlee";
    src : url("handlee.ttf");
}
@font-face{
    font-family:"berkshirestyle";
    src: url("berkshire.ttf");
}
body{

    background-image: url("glass.jpg");
    background-attachment: fixed;
    background-repeat:no-repeat;
    background-size:cover;

}
#FirstHeader{
    float:left;
    clear:left;
    padding-left:100px;
    color:white;
    font-size: 70px;
    color: rgb(122, 38, 0);
    text-decoration: underline;
    font-family: handlee;
    font-style: italic;
}

#bodytext{
    padding: 30px;
    font-family: berkshirestyle, cursive;
    font-size: 1em;
    color: #BCBCBC;
    float: left;
}



#bodytext{
    clear:left;
    margin-left: 30px;
    margin-bottom: 50px;
    border-bottom: 10px solid red;
    background-color: red;

}

#bodytext div{
    display: inline-block; 
    width: 30%;
    margin-right: 20px;
    float: left;

}


form{
    clear:both;

}

<h1 id = "FirstHeader">Coffes here</h1>
<img src="coffee.png"  id = "Coffee" alt="coffee image" width="100" height="125"/>


<div id = "bodytext">

    <div id = "FirstParagraph">
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.<br>
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
    </div>


    <div id = "SecondParagraph">
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
        <br/>
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
    </div>

    <div id = "ThirdParagraph">
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
        <br>
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        Vivamus ut mi orci. Donec ut ipsum in nisl elementum posuere mollis id massa.
        Cras mattis felis est, a varius nisl euismod ac. Mauris cursus sed nulla in viverra.
        Duis maximus enim in vestibulum posuere. Nullam tempor, est in rutrum ullamcorper,
        purus purus sodales purus, sit amet imperdiet urna velit id velit. Proin vel dapibus
        est. Nulla vel tortor id ligula consequat fringilla dignissim a sem. Duis eget risus vel
        est ullamcorper auctor. Aliquam vel ex in leo suscipit condimentum sed vitae leo. In porta
        eget augue eu porta. Pellentesque tellus eros, consequat vel aliquet id, consectetur a ante.
        Vestibulum sit amet ligula faucibus ligula auctor pretium non vel arcu.
    </div>
</div>

<form id = "MainForm">

    <label for = "Name">Name: </label>
    <input type="text" id = "Name" placeholder = "e.g nirajan basnet" required/>

    <label for= "Email">Email</label>
    <input type="email" id = "Email"  placeholder="sth@sthmail.com" required/>

    <label for = "Comment">Your comment: </label>
    <br>
    <textarea maxlength="100" id = "Comment" placeholder="What do you think about the site?"></textarea>
</form>

parent element not following child element

5 Answers5