1290 1290 - 3 years ago 79
CSS Question

Div is not expanding with text



.row {
display: flex;
}

.col {
flex: 1;
}

.container {
display: flex;
align-items: center;
background-color: blue;
font-size: 12px;
color: #87909A;
width: 275px;
margin-top: 20px;
margin-left: 20px;
height: 70px;
}

.textview {
height: 50px;
line-height: 35px;
padding-left: 13px;
position: relative;
border-bottom: 1px solid #CFD4D9;
background-color: #FFF;
color: #5C6570;
padding-right: 13px;
margin-left: 20px;
vertical-align: middle;
display: inline-block;
}

.middle {
vertical-align: middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>

<body>
<div class="row">
<div class=".col">
<img src="map.png" style="height: 300px; width: 300px; margin-top: 20px;">
</div>
<div class=".col">
<div class="container">
<div class="textview">
<span class="middle">Some text</span>
</div>
<div class="textview">
<span class="middle">Some text</span>
</div>
</div>
</div>
</div>
</body>
</html>





I want to create a view like this but I have something like that above? Can someone let me know how I can center the white container view in the blue background and how to center a text within the white container view.

Also can you give me general feedback if this is the correct way to achieve the layout below? I want to create side by side views where the map is 70% and the right hand side takes up 30%.

enter image description here

LKG LKG
Answer Source

just add following css changes and remove . from col class in html.

if you need that map will occupy 70% then use two separate divs like col-1 and col-2 and assign them .col-1 {flex:1 0 70%;} and col-2 {flex:1 0 30%;} I added fiddle to better understand.

Fiddle link

.container {
        display: flex;
        align-items: center;
        justify-content:center; /* Added */
        background-color: blue;
        font-size: 12px;
        color: #87909A;
        width: 275px;
        margin-top: 20px;
        margin-left: 20px;
        height: 70px;
    }

    .textview {
        height: 50px;
        line-height: 35px;
        padding-left: 13px;
        position: relative;
        border-bottom: 1px solid #CFD4D9;
        background-color: #FFF;
        color: #5C6570;
        padding-right: 13px;
        margin-left: 20px;
        vertical-align: middle;
        display: inline-flex; /* Added */
        justify-content:center; /* Added */
        align-items:center; /* Added */
    }

.row {
  display: flex;
}

.col {
  flex: 1;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  font-size: 12px;
  color: #87909A;
  width: 275px;
  margin-top: 20px;
  margin-left: 20px;
  height: 70px;
}

.textview {
  height: 50px;
  line-height: 35px;
  padding-left: 13px;
  position: relative;
  border-bottom: 1px solid #CFD4D9;
  background-color: #FFF;
  color: #5C6570;
  padding-right: 13px;
  margin-left: 20px;
  vertical-align: middle;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.middle {
  vertical-align: middle;
}
<div class="row">
  <div class="col">
    <img src="map.png" style="height: 300px; width: 300px; margin-top: 20px;">
  </div>
  <div class="col">
    <div class="container">
      <div class="textview">
        <span class="middle">Some text</span>
      </div>
      <div class="textview">
        <span class="middle">Some text</span>
      </div>
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download