Why doesn't this make a column?

HTML-CSS
1 
<!DOCTYPE html>
<style>
.flex-container {
	display: flex;
	background-color: LightGreen;
	justify-content: center;
}
.flex-container > div {
  margin: 10px;
  padding: 20px;
  font-size: 20px;
}
.left-bar {
	display: flex;
	flex-direction: column;
	background-color: LightGreen;
}
</style>
<html>
	<nav class="flex-container">
		<div>
			Home
		</div>
		<div>
			Recipes
		</div>
		<div>
			Gluten Free Recipes
		</div>
		<div>
			Paleo Recipes
		</div>
	</nav>
	<div class="left-bar">
	</div>
	<body>
	</body>
	<div class="right-bar">
	</div>
</html>

my .left-bar doesn’t seem to do anything.

2

You haven’t given it anything to do. What were you expecting?

As an aside, your nav and div elements belong inside the body tags.

I made a quick pen that may be showing what you’re expecting

3

Alright, I’m trying to make a 3 column layout with flexbox, how do I get my div to become a vertical column on the left side of the page?

4

I could type a lot but I’m not going to do that. :slightly_smiling_face:

A good resource to use while you experiment is CSS Tricks. Their guide to flexbox should answer your questions.

5

I was actually using that. What I don’t get is why div, when defined as a flex column with a background color of light green, shows nothing at all, I would have expected a light green column taking up 100% of the page.

Edit: Basically I don’t understand how to apply what I’ve read to what I’m trying to do.

6

That was the point of the quick pen I linked to (since deleted). There’s nothing in your div element to give a background color to.

1 Like
7

Alright, I’m starting to get it. It won’t show a column without content. Is flexbox the right tool for making an empty vertical column in css? Do I need to use grid? Or if I can use flexbox, one thing that I’m finding difficult is how to put the columns side by side, though I believe I saw a tutorial for that.