Space in div is too much

user_13087044 0
Viewed 59

I tried to make two columns as follows, however, I could not change the space of the left div.

.half50 {
  width: 50%;
  display: table-cell;
  height: fit-content;
  align-content: flex-start;
}
<div class="half50" style="margin: 1px; border: solid 1px;background: red; height: 50px;">
  <h2> CONTACT INFORMATION </h2>
  <p>
    Department of Mathematics <br> University of xx <br> xx. <br>
    <strong>Office:</strong> xx
    <strong>E-mail:</strong> <code>xx</code> <br>
  </p>
</div>

<div class="half50">
  <p>
    <img src="https://images.unsplash.com/photo-1583433713740-6b3f35a3d232?      crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTIyMjEwNw&ixlib=rb-1.2.1&q=85" alt="wave2" width="400" height="150">
  </p>

css html
2 Answers

Use the modern flexbox layout mode for this:

  • Avoid using inline styles, try and separate styling from markup
  • Avoid setting explicit heights that cause elements to overflow

body {
  display: flex;
}

.contact {
  margin: 1px;
  border: solid 1px;
  background: red;
  /* height: 50px; Avoid setting explicit heights like this */
}
<div class="contact">
  <h2>CONTACT INFORMATION</h2>
  <p>
    Department of Mathematics <br> University of xx <br> xx. <br>
    <strong>Office:</strong> xx
    <strong>E-mail:</strong> <code>xx</code> <br>
  </p>
</div>
<div class="image">
  <p>
    <img src="https://images.unsplash.com/photo-1583433713740-6b3f35a3d232?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTIyMjEwNw&ixlib=rb-1.2.1&q=85" alt="wave2" width="400" height="150">
  </p>
</div>

Have you decided what's going to happen when the screen isn't wide enough to have both elements next to each other?

body {
  display: flex;
  /* If I can't fit my children on one line at the size they want to be, wrap onto a new line */
  flex-wrap: wrap;
}

.contact { 
  flex-grow: 1;
  /* Grow at a rate of 1 if there is room for me to do so */
  margin: 1px;
  border: solid 1px;
  background: red;
}

.image {
  min-width: 500px;
  flex-grow: 1;
}

img {
  width: 100%;
  height: auto;
}
<div class="contact">
  <h2>CONTACT INFORMATION</h2>
  <p>
    Department of Mathematics <br> University of xx <br> xx. <br>
    <strong>Office:</strong> xx
    <strong>E-mail:</strong> <code>xx</code> <br>
  </p>
</div>
<div class="image">
  <img src="https://images.unsplash.com/photo-1583433713740-6b3f35a3d232?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTIyMjEwNw&ixlib=rb-1.2.1&q=85" alt="wave2" width="400" height="150">
</div>

user_141905430

Used a wrapper div which contains a flex with direction row containing both the child divs.

.half50 {
  width:50%;
  display: table-cell;
  height: fit-content;
  align-content: flex-start;
}
.wrapper {
  display:flex;
  align-items:center;
}
<div class="wrapper">
<div class="half50" style="margin: 1px; border: solid 1px;background: red; ">
  <h2> CONTACT INFORMATION </h2>
  <p>
    Department of Mathematics <br> University of xx <br> xx. <br>
    <strong>Office:</strong> xx
    <strong>E-mail:</strong> <code>xx</code> <br>
  </p>
</div>

<div class="half50">
  <p>
    <img src="https://images.unsplash.com/photo-1583433713740-6b3f35a3d232?      crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTIyMjEwNw&ixlib=rb-1.2.1&q=85" alt="wave2" width="400" height="150">
  </p>
</div>
</div>

EDIT 1

If you want to remove the horizontal sc rolling and extra space of left child, just remove width:50% from the .half50 class

Admin1
Related