CODEWITHSUNDEEP
htmlcss
user2622950
user2622950

Reputation: 9

Height of panel CSS

please I have this problem. I have two divs side by side, but the first panel is first and height of container is not good from second panel. I know I badly writing but I dont know better. Thank you for help.

#container {
  font-family: "Roboto", sans-serif;
  width: 1000px;
  border-radius: 1px;
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  padding: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
   margin-top : 50px;

}

#narrow {
    position: relative;
    width: 200px; //may be variable h    
}

#wide {
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 220px;
    margin-left: -150px; // half the width
    width: 300px; // must be fixed
}

PHOTO WEBSITE

Upvotes: 0

Views: 110

Answers (2)

Beni Sinca
Beni Sinca

Reputation: 384

You have many options but here are 2 of them:
The option 1 

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */      
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

The option 2 

 

  
.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: black;
    padding-bottom: 100%;
    color: white;
    margin-bottom: -100%;
}
<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Little content
    </div>

</div>

Upvotes: 1

PMA
PMA

Reputation: 89

I think you should put both boxes inside a parent div with enough space for the 2 children divs, like for example: 550px. Then you add a float left attribute to both children . Please don't use absolute position attribute on the children, otherwise it won't work.

To each child div you can give 240 px of width and to the second one 10 px of margin to the left (to separate them). It is important that they share same attributes.

Same explanation in code: 

.parentDiv {
width: 550px; 
}

.childRight {
float: left;
width: 240px;    
}

.childLeft {
float: left;
width: 240px;
}

Upvotes: 0

Related Questions