Question:
Can someone tell me how I can get a div (and its content) to sit to the right of a flex container with its direction set to column?
Details:
I am teaching myself how to use css flex.
At this point, I am using flex for the title bar and also for the navigation bar on my page.
The title bar should go along the top of the screen, and the navigation bar should reside on the left.
The content should appear below the title bar, and to the right of the navigation bar.
However, I have not (yet) been able to figure out how to get the content to appear to the right of the navigation bar (it wants to go on the next line below it).
Here is my html:
<html>
<head>
<link rel="stylesheet" href="flex-2.css">
</head>
<body>
<div class="flex-container-1">
<div class="flex-body-1">Home</div>
<div class="flex-body-1">About</div>
<div class="flex-body-1">Contact</div>
</div>
<div class="content-body">
<div class="nav-container">
<div class="nav-items">Item 1</div>
<div class="nav-items">Item 2</div>
<div class="nav-items">Item 3</div>
<div class="nav-items">Item 4</div>
<div class="nav-items">Item 5</div>
</div>
<div>
<h1>Main content</h1>
<p>This is the main page of information that I want to display on my page.</p>
<p>IT should sit to the right of the nav elements which should go along the left side of the page.</p>
</div>
</div>
</body>
</html>
And here is my css:
.flex-container-1 {
display:flex;
background-color: skyblue;
color: white;
}
.flex-body-1 {
padding: 1em;
}
.content-body {
background-color: skyblue;
color: white;
}
.flex-body-1:hover {
background-color: white;
color: skyblue;
}
.flex-container-2 {
display: flex;
width: min(90%, 100em); /* have a width which is the lesser of these two compared to viewport */
margin-inline: auto;
padding: max(1em, 2vh); /* choose whichever is bigger- 2% of viewport height, or 1em */
}
.nav-container {
display: flex;
flex-direction: column;
width: 10em;
}
.nav-items {
width: 10em;
}
.nav-items:hover {
background-color: white;
color: skyblue;
}
}
Thoughts?
Thanks heaps 🙂
>Solution :
Hey if I understood your problem correctly, here is the solution.
You just need to make the ‘content-body’ a flex container and use the property ‘justify-content:space-between’ (also try ‘justify-content:space-around’ may suit you better). And I also recommend you to set default margin and padding 0 at the top of your css to make sure that the ugly margin and padding on the heading and 2 paragraphs on doesnt mess up the design.
Here’s the modified css:
* {
margin: 0;
padding: 0;
}
.content-body {
background-color: skyblue;
color: white;
display: flex;
justify-content: space-between;
}