CSS properties for a class affecting other elements

Question

I have some css code that targets objects with the class "foo". However, it is also affecting other elements. Here is my code:

#leftDiv {
  background-color: yellow;
  display: inline-block;
  height: 75vh;
  width: 20vw;
}

#centreDiv {
  background-color: blue;
  display: inline-block;
  height: 75vh;
  width: 31vw;
}

#rightDiv {
  background-color: red;
  display: inline-block;
  height: 75vh;
  width: 31vw;
}

.foo {
  margin-top: 71vh;
}

<div id="division" class="holder">
    <div id="leftDiv" class="part">
      Welcome to this website!
    </div>
    <div id="centreDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
    <div id="rightDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
  </div>

My aim in using the margin-top is to align the input boxes to the bottom of the divs. So, if there is any better way, it would be appreciated. I simply can't figure out why the leftDiv is also getting affected...

VXp · Accepted Answer · 2018-09-03 22:18:23Z

You can do it with the Flexbox and positioning:

body {margin: 0}

#division {
  display: flex; /* displays flex-items (children) inline */
}

#leftDiv {
  background-color: yellow;
  height: 75vh;
  width: 20vw;
}

#centreDiv {
  background-color: blue;
  height: 75vh;
  width: 31vw;
}

#rightDiv {
  background-color: red;
  height: 75vh;
  width: 31vw;
}

/* added */

#centreDiv,
#rightDiv {
  position: relative;
}

.foo {
  position: absolute;
  bottom: 0;
  left: 0;
}

.textWrapper {
  overflow: auto;
  height: 100%;
  width: 100%;
}

<div id="division" class="holder">
  <div id="leftDiv" class="part">
    Welcome to this website!
  </div>
  <div id="centreDiv" class="part">
    <div class="textWrapper">
       <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>
       <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>
       <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>
       <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>
       <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>
       <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>
    </div>
    <input type="text" class="foo" placeholder="Enter your message here...">
  </div>
  <div id="rightDiv" class="part">
    <div class="textWrapper">
       <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>
       <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>
       <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>
       <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>
       <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>
       <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>
    </div>
    <input type="text" class="foo" placeholder="Enter your message here...">
  </div>
</div>

</body>
</html>

Nofar Eliasi · Accepted Answer · 2017-10-22 14:05:02Z

0

#leftDiv {
  background-color: yellow;
  display: block;
  height: 75vh;
  width: 20vw;
  float:left;
}

#centreDiv {
  background-color: blue;
  display: block;
  height: 75vh;
  width: 31vw;
  float:left;
}

#rightDiv {
  background-color: red;
  display:block;
  height: 75vh;
  width: 31vw;
  float:left;
}

.foo {
  margin-top: 71vh;
}

<div id="division" class="holder">
    <div id="leftDiv" class="part">
      Welcome to this website!
    </div>
    <div id="centreDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
    <div id="rightDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
  </div>

answered Oct 22, 2017 at 14:05

Nofar Eliasi

1095 bronze badges

1 Comment

aravk33 Over a year ago

Well, using floats isn't exactly the solution, I actually switched to inline-block after seeing this. So, any other solution will be greatly accepted!

Collectives™ on Stack Overflow

CSS properties for a class affecting other elements

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related