Issue
I want the "content" of my navbar to have a maximum size. Let me explain, my navbar has a width of 100% but the content inside does not, I do not want it to have that size of 100%, I need the navbar to have the same size as the content of my page (in this case is an 800px example) as found in my main article.
I am creating my navbar with flexbox property
The containers:
<div class="item">
// Content A
</div>
<div class="item">
// Content B
</div>
<div class="item">
// Content C
</div>
represent an ul li a menu, another is a logo, and the other is a button
How can I do that effect?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
nav {
width: 100%;
max-height: 60px;
background-color: black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #ccc;
}
main {
max-width: 800px;
background-color: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
}
</style>
</head>
<body>
<nav>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</nav>
<main>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
</main>
</body>
</html>Updated
Ok, but the content of a div is not centered, it is left justified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
nav {
width: 100%;
max-height: 60px;
background-color: black;
}
.item {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #ccc;
}
main {
max-width: 800px;
background-color: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
}
.container{
max-width: 800px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</nav>
<main>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
</main>
</body>
</html>Solution
If you just want a 100% width div with the actual divs inside to be 800px Simply keep the nav at 100% width, and wrap the three divs inside in another div with a width of 800px.
<nav>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</nav>
<style>
.container {
width: 800px;
}
</style>
Answered By - WHWatlington
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.