SelectThat SelectThat - 2 months ago 10
CSS Question

trying to make a 3x2 grid someone help plz

we have this right now but it has to be like this:

https://postimg.org/image/cw2e572zh/

can someone help?

im doing this for school and i cant figure it out the coloms keep being 2x3 and not 3x2

http://prntscr.com/crc7ln



<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>HTML CSS exercise - create a CSS Grid</title>
<style>
.row {
float: left;
position: relative;
box-sizing: border-box;
width: 24%;
padding-left: 10px;
}


.col1 {
left: 5px;
border: 2px solid black;
margin-bottom: 10px;
}

.col2 {
left: 15px;
border: 2px solid black;
margin-bottom: 20px;
}

.col3 {
left: 25px;
border: 2px solid black;
}

body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="row">
<div class="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>

</body>
</html>




Answer

Here you go, try to avoid floats as they seem to mess up the way your div's flow sometimes. I've applied the 24% on the columns rather than the row, also I took out the repetitive declaration of styles. I'd suggest putting the same class on the columns rather than col1, col2 and col3

<!DOCTYPE HTML>  
<html>
<head>  
<meta charset=utf-8>  
<title>HTML CSS exercise - create a CSS Grid</title>  
<style>
	.row {
		box-sizing: border-box;
		padding-left: 10px;
	}

	
	.col1, .col2, .col3 {
		left: 5px;
		border: 2px solid black;
		margin-bottom: 10px;
		display: inline-block;
		padding: 5px;
		width: 24%;
	}
  
	body {
		border-width: 0px;
		padding: 0px;
		margin: 0px;
		font-size: 90%;
		background-color: #e7e7de
}
</style>  
</head>  
<body>  
<div class="container">  
	<div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
	<div class="row">  
		<div class="col1">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col2">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
		<div class="col3">  
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
		</div>  
	</div>  
</div>  

</body>  
</html>