DIV Positionierung

by Norbert Wilms

HTML

<h1>Contenteditable</h1>
<div contenteditable>
	<p>Alles innerhalb dieses divs kann angeklickt und verändert werden. Viel Spaß!</p>
<div class="two-colum">
<div class="box">Label1</div>
<div id=d1 class="box"><input></div><div class="box1"></div>
<div class="box">Label2</div>
<div id=d2 class="box"><input></div><div></div><div class="box1"></div>
<div class="box">Label3</div>
<div id=d3 class="box">aaaa3</div><div></div><div class="box1"></div>
<div class="box">Label4</div>
<div id=d4 class="box">aaaa4</div><div class="box1"></div>
<div class="box">Label5</div>
<div id=d5 class="box1">aaaaa</div>
</div>  
<span>Label6:<input></span>
<button id=b1 onclick="doit();">Do it</button>
</div>

CSS

[contenteditable] {
	padding: 1em;
	padding-left: 3em;
	margin: 1em;
	outline: 2px dashed #CCC;
	position: relative;
}

[contenteditable]:after {
	position: absolute;
	content: '✏';
	left: 0em;
	top: 0em;
	font-size: 3em;
	transform: rotate(45deg);
}

[contenteditable]:hover {
	outline: 2px dashed #c32e04;
}

.box {
  float: left;
  width: 20%;
  margin: 1em;
}
.box1 {
  clear: left;
  width: 20%;
  margin: 1em;
  border: 2px;
  border-color: #e7c157;
}
.two-column {
  padding: 1em;
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;
}

JavaScript

function doit() {
alert($("#d2").html())
}