Jump to content

benji8

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by benji8

    Columns positioning

    in CSS

    Posted · Edited by benji8

    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!

×
×
  • Create New...