Jump to content

benji8

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About benji8

  • Rank
    Newbie
  1. benji8

    Columns positioning

    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!
×
×
  • Create New...