user3599534 user3599534 - 1 month ago 7
CSS Question

HTML CSS DIV Panels

I want to make something like this:
enter image description here

What I do so far:

enter image description here

Can anyone tell me how I achieve this...

Thanks! In Advance...

See jsFiddle






Code Is As Follows:

HTML:

<div class="panel panel1">Panel 1x</div>
<div class="panel panel1">Panel 1x</div>
<br>
<div class="panel panel2">Panel 2x</div>


CSS:

body {
background: #eeeeee;
}
.panel {
display: inline-block;
background: #ffffff;
min-height: 100px;
height: 100px;
box-shadow:0px 0px 5px 5px #C9C9C9;
-webkit-box-shadow:2px 2px 5px 5x #C9C9C9;
-moz-box-shadow:2px 2px 5px 5px #C9C9C9;
margin: 10px;
padding: 10px;
}
.panel1 {
min-width: 100px;
width: 100px;
}
.panel2 {
min-width: 245px;
width: 245px;
}

Answer

Make the height of the div to the right smaller than the left one, and have no margin on top/bottom. This would produce the result you are looking for

body {
  background: #eeeeee;
}
.panel {
  display: inline-block;
  background: #ffffff;
  min-height: 100px;
  height: 100px;
  padding: 10px;
}
.panel1 {
  min-width: 100px;
  width: 100px;
}
.small {
  margin-left: 10px;
  width: 111px;
  height: 90px;
  min-height: 90px;
}
.panel2 {
  min-width: 245px;
  width: 245px;
}
<div class="panel panel1">Panel 1x</div>
<div class="panel panel1 small">Panel 1x</div>
<br>
<div class="panel panel2">Panel 2x</div>

Comments