Issue
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).
.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;
}<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>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;
}
Answered By - ayus_98
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.