Hi all
I have a simple demo here to illustrate my problem.
http://www.ttmt.org.uk/forum/index.html
It’s a responsive layout of div’s that are floated to create 3 columns.
The div’s have different heights so when a div comes after a div that is taller
it is pushed down on the next column Eg. Header3 and Header4.
Is it possible to have div’s with different heights fit together.
I have am image here to illustrate the desired layout. The order of the div’s
doesn’t matter as long as they fit together.
Thanks in advance for ant help.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:10px 'Source Sans Pro', sans-serif;
font-size:100%;
font-size:1.02em;
color:#555;
}
#pageWrap{
max-width:1135px;
margin:0 auto;
border-left:40px solid white;
border-right:40px solid white;
}
/*---------------------
sec-sevice
----------------------*/
#sec-service{
padding:0 0 230px 3.52422907488987%;
margin:30px 0 0 0;
}
#sec-service .service{
float:left;
width:29.68036529680365%;
background:#ccc;
margin:0 3.65296803652968% 6px 0;
}
.service h3{
font-weight:700;
font-size:1.1em;
padding:10px 0;
}
.service p{
padding:0 0 10px 0;
margin:0 0 10px 0;
}
/*---------------------
Media queries
----------------------*/
@media only screen and (max-width:880px){
#sec-intro p,
#sec-service .service{
width:100%;
float:none;
}
}
</style>
</head>
<body>
<div id="pageWrap">
<section id="sec-service" class="group">
<div id="serviceText" class="group">
<div class="service">
<h3>Heading 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</p>
</div>
<div class="service">
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</p>
</div>
<div class="service">
<h3>Heading 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 5</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 6</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="service">
<h3>Heading 7</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
</p>
</div>
</div>
</section>
</div><!-- #pageWrap -->
</body>
</html>
