Jump to content

Columns positioning


benji8

Recommended Posts

Hello, 

I am trying to build my web page and it seems I can't get the result I want. I have three boxes, two of them should be on the same line, as shown in the picture below:

blocks-pos.png.16e4e81a4de8ff2479aec9bb36537fce.png

The code I wrote is the following:

<!DOCTYPE html>
<html>
<head>
	<style>
		.wrapper {
			display: grid;
			grid-template-columns: 10% 70%;
		}
		.sidebar {
			background-color: green;
			width: 100px;
			height: 100px;
		}
		
		.archive-loop {
			background-color: red;
			width: 200px;
		}
		
		.footer {
			background-color: blue;
			width: 300px;
		}
	</style>
</head>

<body>
	
	<div class="wrapper">
		<div class="sidebar">Sidebar</div>
		<div class="archive-loop">Loop</div>
	</div>
	
	<div class="footer">Footer</div>
	
</body>
</html>

The problem is that Sidebar and Loop may have a variable length depending on the contents, and I want them to show the length they need to be, meaning that if the sidebar is shorter (or viceversa), I want it to appear shorter, as in the following picture:

desired.png.45708eb86c80b4de76bddef703fe3546.png

How can I achieve this result?  Thank you very much in advance!

Edited by benji8
Link to comment
Share on other sites

Instead of grid, you could use flex box and set align-items to stretch.

.wrapper {
  display: flex;
  align-items: stretch;
}
.sidebar {
  background-color: green;
  width: 10%;
  flex: 1 1 auto;
}

.archive-loop {
  background-color: red;
  width: 70%;
  flex: 1 1 auto;
}
		
		

 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...