We would like to know how to create 3-Column Layout with tall header.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--from ww w . ja v a 2s.c o m-->
padding: 0;
margin: 0;
}
div {
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid #eee;
-webkit-column-count: 2;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #eee;
-moz-column-count: 2;
-ms-column-width: 20em;
-ms-column-gap: 2em;
-ms-column-rule: 1px solid #eee;
-ms-column-count: 3;
column-width: 20em;
column-gap: 2em;
column-rule: 1px solid #eee;
column-count: 3;
padding: 5px;
}
.double {
margin: 10px 0 0 0;
height: 20px;
border: 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.single {
border: 0;
border-top: 1px solid #ddd;
padding: 0; margin: 0;
}
p {
padding: 0;
margin: 0;
text-align: justify;
line-height: 20px;
}
img {
border-radius: 5px;
max-width: 20em;
float: left;
margin: 0 20px 10px 0;
border: 1px solid #999;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
span {
display: block;
background: #eee;
padding: 10px;
}
p {
padding: 0 0 15px 0;
}
#header {
background: #000;
padding: 20px ;
color: #fff;
margin-bottom: 20px;
height: 150px;
}
#header a {
opacity: 1 !important;
color: #fff;
margin: 0; padding: 0;
text-decoration: none;
}
</style>
</head>
<body>
<div id="header">
<h1> CSS3 Column Layout </h1>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur mauris sit amet felis tincidunt vel auctor velit hendrerit. Fusce at libero vitae lectus placerat lacinia sit amet non sem. Proin malesuada consequat tortor, nec placerat ante mollis vitae. Mauris nec ante orci. Nullam interdum molestie lorem sed fringilla. Integer scelerisque felis et tortor porta fermentum. Morbi pharetra purus quis nulla posuere sed suscipit ligula blandit. Suspendisse risus urna, hendrerit sed aliquam eget, egestas vitae elit.
</p>
<h1>
Lorem Ipsum!
</h1>
<p>
Mauris viverra porta sollicitudin. Sed semper, metus sagittis congue ultricies, mi neque dapibus nisl, non placerat sapien mauris vitae libero. Vestibulum fringilla aliquet diam, sit amet dapibus urna interdum eget. Duis laoreet sapien ut elit tempor ac lobortis nibh commodo.
</p>
<p>
Mauris viverra porta sollicitudin. Sed semper, metus sagittis congue ultricies, mi neque dapibus nisl, non placerat sapien mauris vitae libero. Vestibulum fringilla aliquet diam, sit amet dapibus urna interdum eget. Duis laoreet sapien ut elit tempor ac lobortis nibh commodo.
</p>
<hr class="single" />
<h2>Dolor Sit Amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur mauris sit amet felis tincidunt vel auctor velit hendrerit. Fusce at libero vitae lectus placerat lacinia sit amet non sem. Proin malesuada consequat tortor, nec placerat ante mollis vitae. Mauris nec ante orci. Nullam interdum molestie lorem sed fringilla. Integer scelerisque felis et tortor porta fermentum. Morbi pharetra purus quis nulla posuere sed suscipit ligula blandit. Suspendisse risus urna, hendrerit sed aliquam eget, egestas vitae elit.
</p>
<p>
Mauris viverra porta sollicitudin. Sed semper, metus sagittis congue ultricies, mi neque dapibus nisl, non placerat sapien mauris vitae libero. Vestibulum fringilla aliquet diam, sit amet dapibus urna interdum eget. Duis laoreet sapien ut elit tempor ac lobortis nibh commodo.
</p>
<hr class="single" />
<h2>Consectetur Elit</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur mauris sit amet felis tincidunt vel auctor velit hendrerit. Fusce at libero vitae lectus placerat lacinia sit amet non sem. Proin malesuada consequat tortor, nec placerat ante mollis vitae. Mauris nec ante orci. Nullam interdum molestie lorem sed fringilla. Integer scelerisque felis et tortor porta fermentum. Morbi pharetra purus quis nulla posuere sed suscipit ligula blandit. Suspendisse risus urna, hendrerit sed aliquam eget, egestas vitae elit.
</p>
</div>
</body>
</html>
The code above is rendered as follows: