Jump to content

Columns positioning


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 post
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 post
Share on other sites

Yes, you're right, I missed that. In that case, the only change necessary is to set align-items to flex-start.

  • Thanks 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...