cssresponsive-designskeleton-css-boilerplate

different column height in a row

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>

Solution

  • 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>