benji8 Posted March 27, 2020 Share Posted March 27, 2020 (edited) 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: 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: How can I achieve this result? Thank you very much in advance! Edited March 27, 2020 by benji8 Link to comment Share on other sites More sharing options...
Ingolme Posted March 27, 2020 Share Posted March 27, 2020 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; } 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted March 27, 2020 Share Posted March 27, 2020 As far as I can make out reading the post made, he wants the opposite. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2020 Share Posted March 28, 2020 Yes, you're right, I missed that. In that case, the only change necessary is to set align-items to flex-start. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now