Customer requirement is having something an outdented bio box within a two-column layout.
First approach:
<html>
<head>
<style type="text/css">
.content {
column-count: 2;
text-align: justify;
margin-bottom: 2em;
font-family: Verdana, Arial;
}
#author-box {
font-size: 8px;
font-style: italic;
border: 1px solid red;
width: 4cm;
margin: -2cm;
float: left;
}
</style>
</head>
<body>
<div class="content"> <!--lorem-->
<div id="author-box">
<img src="maulwurfn2.jpg" style="width: 3cm" />
<div>
Autor des Artikels ist der ältliche debile Maulwurfn.
Autor des Artikels ist der ältliche debile Maulwurfn.
Autor des Artikels ist der ältliche debile Maulwurfn.
Autor des Artikels ist der ältliche debile Maulwurfn.
</div>
</div>
<p>Curabitur urna tellus, aliquam vitae, ultrices eget, vehicula nec, diam.
Integer elementum, felis non faucibus euismod, erat massa dictum eros, eu
ornare ligula tortor et mauris. Cras molestie magna in nibh. Aenean et tellus.
Fusce adipiscing commodo erat. In eu justo. Nulla dictum, erat sed blandit
venenatis, arcu dolor molestie dolor, vitae congue orci risus a nulla.
Pellentesque sit amet arcu. In mattis laoreet enim. Pellentesque id augue et
arcu blandit tincidunt. Pellentesque elit ante, rhoncus quis, dapibus sit amet,
tincidunt eu, nibh. In imperdiet. Nunc lectus neque, commodo eget, porttitor
quis, fringilla quis, purus.</p>
</body>
</html>
The text won't flow around the box....is this somehow doable?
First approach:
<html>
<head>
<style type="text/css">
.content {
column-count: 2;
text-align: justify;
margin-bottom: 2em;
font-family: Verdana, Arial;
}
#author-box {
font-size: 8px;
font-style: italic;
border: 1px solid red;
width: 4cm;
margin: -2cm;
float: left;
}
</style>
</head>
<body>
<div class="content"> <!--lorem-->
<div id="author-box">
<img src="maulwurfn2.jpg" style="width: 3cm" />
<div>
Autor des Artikels ist der ältliche debile Maulwurfn.
Autor des Artikels ist der ältliche debile Maulwurfn.
Autor des Artikels ist der ältliche debile Maulwurfn.
Autor des Artikels ist der ältliche debile Maulwurfn.
</div>
</div>
<p>Curabitur urna tellus, aliquam vitae, ultrices eget, vehicula nec, diam.
Integer elementum, felis non faucibus euismod, erat massa dictum eros, eu
ornare ligula tortor et mauris. Cras molestie magna in nibh. Aenean et tellus.
Fusce adipiscing commodo erat. In eu justo. Nulla dictum, erat sed blandit
venenatis, arcu dolor molestie dolor, vitae congue orci risus a nulla.
Pellentesque sit amet arcu. In mattis laoreet enim. Pellentesque id augue et
arcu blandit tincidunt. Pellentesque elit ante, rhoncus quis, dapibus sit amet,
tincidunt eu, nibh. In imperdiet. Nunc lectus neque, commodo eget, porttitor
quis, fringilla quis, purus.</p>
</body>
</html>
The text won't flow around the box....is this somehow doable?
