different column height in a row

Question

I do not have much experiences in CSS, and I want to achieve a layout illustrated as below:

A has a corresponding side div B, C has a corresponding side div D. B and D both are hided, only when click on A, bring out B, click on C bring out D.

The top of A and B, C and D are aligned, B and D have different height than A and C.

enter image description here

What I have tried is like below, it doesn't work, I don't have to put them inside the same row, but I want to keep the html structure, anyone could help me to point out the direction to go?

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>

<style>
  .debug {
  border: solid;
  border-color: red;
  }  
</style>

<div class="row">
  <div class="six columns debug" style="height: 100px;">A</div>
  <div class="six columns debug" style="height: 300px;">B</div>
</div>

<div class="row">
  <div class="six columns debug" style="height: 100px;">C</div>
  <div class="six columns debug" style="height: 300px; display:none;">D</div>
</div>

@WolfgangVogl I didn't try that, I don't know how to use float here. — Sawyer, May 11 '15 at 11:46
I don't think it works with this structure, you can trick around by using a table (changes html structure and is ugly) or with absolute positions.... or the most "elegant" solution is to use float left and float right.... — Wolfgang, May 11 '15 at 12:18

AleshaOleg · Answer 1 · 2015-05-11T12:41:29.283

1

Firstly your need to create, two divs: left and right (watch an attachment image). Left div will be 150px and right 100px (it's about width). Next step is position of this divs one-by-one. To right div you need set float: left to both blocks. Next one is position your blocks in right, also I hide "#hidden" block And the last step will be - fill your blocks. Here is my JSFiddle.

HTML

<div id="main">
    <div id="left">
        <div class="ac">
            <div class="a"></div>
            <div class="c"></div>
        </div>
        <div id="second" class="ac">
            <div class="a"></div>
            <div class="c"></div>
        </div>
    </div>
    <div id="right">
        <div class="b"></div>
        <div id="hidden"></div>
        <div class="b"></div>
    </div>
</div>

CSS

#main {
    width: 280px;
    height: auto;
}

#left {
    width: 150px;
    float: left;
    height: auto;
}

#right {
    width: 100px;
    height: auto;
    margin-left: 30px;
    float: left;
}

.ac {
    height: 120px;
}

.a, .c {
    height: 50px;
    background-color: #3F86CE;
}

.c {
    margin-top: 20px;
}

#second { // You also can do this, with pseudo selector :ntn-child;
    margin-top: 150px;    
}

.b {
    height: 150px;
    background-color: #3F86CE;
}

#hidden {
    height: 150px;
    background-color: #fff;
    margin-top: 20px;
    visibility: hidden;
}

enter image description here

edited May 11 '15 at 12:41

answered May 11 '15 at 11:56

AleshaOleg

2,171
1
15
29

is it possible to keep my original html structure, it's impossible or a lot harder to generate this kind of html in my real case, both `B` and `D` contains contextual information for `A` and `C`, so `B` belongs to `A` structurally, and `D` belongs to `C`. – Sawyer May 11 '15 at 12:10
@Sawyer yep, wait please. – AleshaOleg May 11 '15 at 12:32
@Sawyer your problem is: you don't understand difference between display/visibility: hidden and display: none. When I prepare code - please read [this](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) one. – AleshaOleg May 11 '15 at 12:38
@Sawyer [here](http://jsfiddle.net/AleshaOleg/rcsuqow9) it is. Is that? To use float in this situation you need one general div, which contain both of them. – AleshaOleg May 11 '15 at 12:47
thanks, `B` and `A` should in the same level structurally, that's how can I generate the html, but your answer helps. – Sawyer May 11 '15 at 13:06

score 0 · Accepted Answer · answered May 11 '15 at 12:36

I think something like this should work - it's not really "nice" but should work...

<html>
<head>
 <script>
  function switch_it(obj_id) { if (obj = document.getElementById(obj_id)) {if (obj.style.display != "none") { obj.style.display = "none"; }else { obj.style.display = "block"; }}}
  function switch_B() {
   if (obj = document.getElementById("B")) {
    if (obj.style.display != "none") {
     obj.style.display = "none";
     if (obj = document.getElementById("C")) { obj.style.cssFloat = "none"; }
    } else {
     obj.style.display = "block";
     if (obj = document.getElementById("C")) { obj.style.cssFloat = "left"; }
    }
   }
  }
 </script>
 <style>
  html, body, div { margin: 0; padding: 0; }
  .debug {
   border: 1px solid red;
  }
  #AB { margin-top: 20px;}
  #A, #B, #C, #D {
   font-size: 3em;
   text-align: center;
   width: 48%;
  }

  #A, #C { height: 100px; }
  #B, #D { height: 300px; }

  #A {
   height: 100px; display: block; background-color: rgba(50,50,100,.5);   color: rgba(50,50,100,.5);
   float: left;
  }
  #B {
   height: 300px; display: block; background-color: rgba(150,50,100,.5);  color: rgba(150,50,100,.5);
   float: right;
  }
  #C {
   height: 100px; display: block; background-color: rgba(200,200,100,.5);  color: rgba(200,200,100,.5);
   float: left;
  }
  #D {
   height: 300px; display: block; background-color: rgba(100,100,100,.5); color: rgba(100,100,100,.5);
   clear: right;
   float: right;
  }
 </style>
</head>
<body>
 <div id='AB'>
  <div id='A' class="six columns debug" onclick='switch_B()'>A</div>
  <div id='B' class="six columns debug">B</div>
 </div>
 <div id='CD'>
  <div id='C' class="six columns debug" onclick='switch_it("D")'>C</div>
  <div id='D' class="six columns debug">D</div>
 </div>
</body>

please mark it as the correct answer if it fits your needs, thanks! — Wolfgang, May 11 '15 at 13:51

different column height in a row

2 Answers2