CSS
--
Questions
--
Followers
Top Experts
stack divs vertical and horizontal
Is it possible to stack divs of different heights horizontally then vertically. Â I want to fill in all the gaps when the divs are displayed. Â Hard to explain but i want to stack them like this.
1 2
3 4
But 2 is shorter than 1.
Or you can stack them
12
43
I just need to fill in the gaps.
thanks
1 2
3 4
But 2 is shorter than 1.
Or you can stack them
12
43
I just need to fill in the gaps.
thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#column {
width: 605px;
border: 1px solid #000000;
float: left;
}
.column_item {
background-color: #00BFFF;
width: 270px;
padding: 15px;
float: left;
}
.column_item_clear{
background-color: #00BFFF;
width: 270px;
padding: 15px;
float: left;
}
-->
</style>
</head>
<body>
<div id="column">
<div class="column_item">
#1 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
Locals had heard several small explosions a few days beforehand, he said.
With a diameter of 35 centimetres (14 inches), the ball has a rough surface and appears to consist of "two halves welded together".
It was made of a "metal alloy known to man" and weighed six kilogrammes (13 pounds), said Ludik.
</div>
<div class="column_item">
#2 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
</div>
<div class="column_item">
#3 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
Locals had heard several small explosions a few days beforehand, he said.
With a diameter of 35 centimetres (14 inches), the ball has a rough surface and appears to consist of "two halves welded together".
It was made of a "metal alloy known to man" and weighed six kilogrammes (13 pounds), said Ludik.
</div>
<div class="column_item">
#4 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
Locals had heard several small explosions a few days beforehand, he said.
With a diameter of 35 centimetres (14 inches), the ball has a rough surface and appears to consist of "two halves welded together".
It was made of a "metal alloy known to man" and weighed six kilogrammes (13 pounds), said Ludik.
</div>
</div><!--end #column -->
</body>
</html>Zero AI Policy
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
ASKER CERTIFIED SOLUTION
membership
Log in or create a free account to see answer.
Signing up is free and takes 30 seconds. No credit card required.
Or you can wrap each "row" in a div and clear the div so it wraps around the longest one then give your column a background color.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#column {
background-color: #00BFFF;
width: 605px;
border: 1px solid #000000;
float: left;
}
.column_item {
background-color: #00BFFF;
width: 270px;
padding: 15px;
float: left;
}
.column_item_clear{
background-color: #00BFFF;
width: 270px;
padding: 15px;
float: left;
}
.row { float: left; clear: left; }
-->
</style>
</head>
<body>
<div id="column">
<div class="row">
<div class="column_item">
#1 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
Locals had heard several small explosions a few days beforehand, he said.
With a diameter of 35 centimetres (14 inches), the ball has a rough surface and appears to consist of "two halves welded together".
It was made of a "metal alloy known to man" and weighed six kilogrammes (13 pounds), said Ludik.
</div>
<div class="column_item">
#2 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
</div>
</div><!-- row -->
<div class="row">
<div class="column_item">
#3 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
Locals had heard several small explosions a few days beforehand, he said.
With a diameter of 35 centimetres (14 inches), the ball has a rough surface and appears to consist of "two halves welded together".
It was made of a "metal alloy known to man" and weighed six kilogrammes (13 pounds), said Ludik.
</div>
<div class="column_item">
#4 The hollow ball with a circumference of 1.1 metres (43 inches) was found near a village in the north of the country some 750 kilometres (480 miles) from the capital Windhoek, according to police forensics director Paul Ludik.
Locals had heard several small explosions a few days beforehand, he said.
With a diameter of 35 centimetres (14 inches), the ball has a rough surface and appears to consist of "two halves welded together".
It was made of a "metal alloy known to man" and weighed six kilogrammes (13 pounds), said Ludik.
</div>
</div><!-- row -->
</div>
</div><!--end #column -->
</body>
</html>
Pretty much the conclusion I had come to as well. Â Just hoping. Â It is dynamic content that others are creating so I have to make it all fill in with odd heights. Â The order is what is causing my problems because i need the most recent entered at the top. Â I guess I will have to work on the php to make it work. Â Thanks for your help.
Thanks for the insight Danielle but I have to eliminate the space.
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
CSS
--
Questions
--
Followers
Top Experts
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.