CODEWITHSUNDEEP
htmlcss
Madhusudan
Madhusudan

Reputation: 4815

Html element is getting displayed outside parent div

I am trying to place multiple formulas inside a parent container. Each formula object should have close button displayed inside it in the top right corner.

But it seems like there is something wrong with my css. Close button is getting displayed outside parent container.

I am not able to figure it out what really went wrong. I never worked in css before. Please help me to figure out what am I doing wrong here.

.formulaObject {
  float: left;
  display: block;
  width: 250px;
  border-radius: 5px;
  border: 2px solid #4c88aa;
  height: 50px;
  line-height: 50px;
  margin: 2px 25px 2px 25px;
  background-color: #D2E9FE;
}

.formulaText {
  font-size: 15px;
  color: #4c88aa;
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
  width: 150px;
}

.closeButton {
  margin-top: 0px;
  margin-right: 5px;
  top: 0;
  right: 0;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 3px;
  width: 10px;
  height: 20px;
  width: -webkit-calc(10px);
}

.formulaDiv {
  width: 300px;
  height: 500px;
  background-color: rgba(119, 136, 153, 0.2);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #4c88aa;
  overflow: auto;
}
<div class="formulaDiv">
  <div class="formulaObject">
    <p class="formulaText">Cost = 0.5 * Weight </p>
    <div class="closeButton">x</div>
    <div>
      <div class="formulaObject">
        <p class="formulaText">Cost = 0.5 * Weight </p>
        <div class="closeButton">x</div>
        <div></div>

Upvotes: 1

Views: 1093

Answers (5)

Super User
Super User

Reputation: 9642

Check updated snippet below:

 .formulaObject{
     float : left;
     display : block;
     width : 250px;
     border-radius: 5px;
     border: 2px solid #4c88aa;
     height : 50px;
     line-height:50px;
     margin : 2px 25px 2px 25px;
     background-color: #D2E9FE;
     position: relative;
     }
     .formulaText{
     font-size:15px;
     color:#4c88aa;
     font-weight: bold;
     text-align:left;
     margin-left:10px;
     width:150px;
     }
     .closeButton{
     margin-top: 0px;
     margin-right: 5px;
     top : 0;
     right: 0;
     background-color: black;
     color: white;
     text-align: center;
     border-radius: 3px;
     width : 10px;
     height: 20px;
     width: -webkit-calc(10px);
     position: absolute;
     line-height: 1;
     }
     .formulaDiv{
     width: 300px;
     height: 500px;
     background-color: rgba(119, 136, 153, 0.2);
 
     border : 1px solid #4c88aa; 
     }
  <div class="formulaDiv">
  <div class="formulaObject">
  <p class="formulaText">Cost = 0.5 * Weight </p>
  <div class="closeButton">x</div>
  </div>

  <div class="formulaObject">
  <p class="formulaText">Cost = 0.5 * Weight </p>
  <div class="closeButton">x</div>
  </div>

Upvotes: 1

FrostyOnion
FrostyOnion

Reputation: 996

First of all you had mulitple element tag validation errors. line-height:50px; was also causing the x's to be out of their little black box. Here is how I fixed it.

    <!DOCTYPE html>
    <html>
    <head>
      <title>Page Title</title>
      <style>
         .formulaObject{
         float : left;
         display : block;
         width : 250px;
         border-radius: 5px;
         border: 2px solid #4c88aa;
         height : 50px;
         margin : 2px 25px 2px 25px;
         background-color: #D2E9FE;
         }
         .formulaText{
         font-size:15px;
         color:#4c88aa;
         font-weight: bold;
         text-align:left;
         margin-left:10px;
         width:150px;
         }
         .closeButton{
         margin-top: 0px;
         margin-right: 5px;
         top : 0;
         right: 0;
         background-color: black;
         color: white;
         text-align: center;
         border-radius: 3px;
         width : 10px;
         height: 20px;
         width: -webkit-calc(10px);
         float: right;
         }
         .formulaDiv{
         width: 300px;
         height: 500px;
         background-color: rgba(119, 136, 153, 0.2);
         overflow-x: hidden;
         overflow-y: auto;
         border : 1px solid #4c88aa;
         overflow:auto;
         }
      </style>
    </head>
    <body>
      <div class="formulaDiv">
      <div class="formulaObject">
      <div class="closeButton">x</div>
      <p class="formulaText">Cost = 0.5 * Weight </p>
      </div>
      <div class="formulaObject">
        <div class="closeButton">x</div>
      <p class="formulaText">Cost = 0.5 * Weight </p>
      </div>
      </div>
    </body>
    </html>

Upvotes: 0

athi
athi

Reputation: 1683

.formulaObject {
  float: left;
  display: block;
  width: 250px;
  border-radius: 5px;
  border: 2px solid #4c88aa;
  height: 50px;
  line-height: 50px;
  margin: 2px 25px 2px 25px;
  background-color: #D2E9FE;
}

.formulaText {
  font-size: 15px;
  color: #4c88aa;
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
  display: inline-block;
  margin-top: 0;
}

.closeButton {
  margin-top: 0;
  margin-right: 5px;
  display: inline;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 3px;
  width: -webkit-calc(10px);
}

.formulaDiv {
  width: 300px;
  height: 500px;
  background-color: rgba(119, 136, 153, 0.2);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #4c88aa;
  overflow: auto;
}
<div class="formulaDiv">
  <div class="formulaObject">
    <p class="formulaText">Cost = 0.5 * Weight </p>
    <div class="closeButton">x</div>
    <div>
      <div class="formulaObject">
        <p class="formulaText">Cost = 0.5 * Weight </p>
        <div class="closeButton">x</div>
      </div>
    </div>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Improved formatting of your HTML, div wasn't closing properly and use positioning to position close button.

.formulaObject {
    float: left;
    display: block;
    width: 250px;
    border-radius: 5px;
    border: 2px solid #4c88aa;
    height: 50px;
    line-height: 50px;
    margin: 2px 25px 2px 25px;
    background-color: #D2E9FE;
    position: relative;
}

.formulaText {
  font-size: 15px;
  color: #4c88aa;
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
  width: 150px;
}

.closeButton {
    margin-top: 0px;
    margin-right: 5px;
    top: 0;
    right: 0;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 3px;
    width: 10px;
    height: 20px;
    line-height: 20px;
    position: absolute;
}

.formulaDiv {
  width: 300px;
  height: 500px;
  background-color: rgba(119, 136, 153, 0.2);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #4c88aa;
  overflow: auto;
}
<div class="formulaDiv">
  <div class="formulaObject">
    <p class="formulaText">Cost = 0.5 * Weight </p>
    <div class="closeButton">x</div>
  </div>
  <div class="formulaObject">
    <p class="formulaText">Cost = 0.5 * Weight </p>
    <div class="closeButton">x</div>
  </div>
</div>

Upvotes: 1

Karin
Karin

Reputation: 8600

The problem is that your line height for .formulaObject is set to 50px and inherited by the button text, but you set the height of the black button to 20px. You can fix this by setting the line height within that button to 20px as well.

.formulaObject {
  float: left;
  display: block;
  width: 250 px;
  border - radius: 5 px;
  border: 2 px solid #4c88aa;
  height: 50px;
  line-height: 50px;
  margin: 2px 25px 2px 25px;
  background-color: # D2E9FE;
}

.formulaText {
  font-size: 15 px;
  color: #4c88aa;
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
  width: 150px;
}

.closeButton {
  margin-top: 0px;
  margin-right: 5px;
  top: 0;
  right: 0;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 3px;
  width: 10px;
  height: 20px;
  line-height: 20px;
  width: -webkit-calc(10px);
}

.formulaDiv {
  width: 300px;
  height: 500px;
  background-color: rgba(119, 136, 153, 0.2);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid # 4 c88aa;
  overflow: auto;
}
<div class="formulaDiv">
  <div class="formulaObject">
    <p class="formulaText">Cost = 0.5 * Weight </p>
    <div class="closeButton">x</div>
    <div>
      <div class="formulaObject">
        <p class="formulaText">Cost = 0.5 * Weight </p>
        <div class="closeButton">x</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions