I'm working on a navigation bar that needs to display multiple divs side by side. But the parent div doesn't have a fixed width. Just some padding. So the question is how can I achieve this?
.nav {
width: 100%;
height: 50px;
}
.nav ul {
width: 100%;
height: 50px;
}
.nav ul li {
display: inline;
list-style-type: none;
background: gray;
padding: 10px 30px;
margin: 0 10px;
height: 100%;
position: relative;
}
#container {
position: absolute;
left: 0;
top: 100%;
background: black;
padding: 10px;
}
#container .category {
position: relative;
display: inline-block;
width: 50px;
height: 80px;
}
<div class="nav">
<ul>
<li>AB
<div id="container">
<div class="category" style="background: #4285f4;"></div>
<div class="category" style="background: #ea4335;"></div>
<div class="category" style="background: #fbbc05;"></div>
<div class="category" style="background: #34a853;"></div>
</div>
</li>
<li>CD</li>
<li>EF</li>
<li>GH</li>
</ul>
</div>
Those four colored divs must be inline.
You can use display: flex on the #container element. The default direction for the elements inside a container with display set to flex is row. So the elements go from left to right.
.nav {
width: 100%;
height: 50px;
}
.nav ul {
width: 100%;
height: 50px;
}
.nav ul li {
display: inline;
list-style-type: none;
background: gray;
padding: 10px 30px;
margin: 0 10px;
height: 100%;
position: relative;
}
#container {
position: absolute;
left: 0;
top: 100%;
background: black;
padding: 10px;
display: none;
}
.nav li:hover > #container {
display: flex;
}
#container .category {
position: relative;
display: inline-block;
width: 50px;
height: 80px;
}
<div class="nav">
<ul>
<li>AB
<div id="container">
<div class="category" style="background: #4285f4;"></div>
<div class="category" style="background: #ea4335;"></div>
<div class="category" style="background: #fbbc05;"></div>
<div class="category" style="background: #34a853;"></div>
</div>
</li>
<li>CD</li>
<li>EF</li>
<li>GH</li>
</ul>
</div>
Related
I have a sticky sidebar that I'm trying to keep inside parent class. That is staying inside the .inner box.
Currently, it is overflowing into the .outside box.
Here is the JSFiddle with an example - https://jsfiddle.net/dky2eb3m/10/
HTML:
<div class="parent">
<div class="other">
</div>
<div class="inner">
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
<div class="content">
One
</div>
<div class="content two">
TWO
</div>
<div class="content three">
Three
</div>
</div>
</div>
<div class="outside">
</div>
SCSS
.content {
height: 400px;
background: red;
&.two {
background: green;
}
&.three {
background: grey;
}
}
.other {
height: 300px;
background: yellow;
}
.parent {
//overflow: hidden;
}
nav {
position: sticky;
top: 25%;
left: 100%;
height: 0;
ul {
display: flex;
flex-direction: column;
li {
list-style: none;
position: relative;
background: white;
width: 80px;
height: 80px;
display: block;
border-radius: 10px;
color: #f47324;
}
}
}
.outside {
height: 400px;
background: orange;
}
You want your nav to be inside then you can do that like this.
* {
box-sizing: border-box;
}
body {
height: 3000px;
}
.content-parent {
background: purple;
width: 100%;
}
.sidebar {
float: left;
position: sticky;
top: 30px;
}
nav ul {
display: flex;
flex-direction: column;
}
nav ul li {
list-style: none;
/* order: 999; */
position: relative;
background: white;
width: 80px;
height: 80px;
display: block;
border-radius: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #f47324;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.outside {
height: 400px;
background: orange;
}
.content {
height: 400px;
background: red;
}
.content.two {
background: green;
}
.content.three {
background: grey;
}
.other {
height: 300px;
background: yellow;
}
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</div>
<div class="content-parent">
<div class="content">
One
</div>
<div class="content two">
TWO
</div>
<div class="content three">
Three
</div>
</div>
</div>
<div class="outside">
</div>
I'm quite new to HTML and CSS. I have a list that serves as a navigation bar for a website, which is inside the div "inner header." I was able to align the "nav" container (in teal) to the right edge of the "inner header" container, but I am struggling to do the same for the items within nav (in red).
Containers Appearance
Essentially, I would like the text to align with the teal on the right side, but I noticed no matter what I do, the red will not expand. I've tried changing width to 100%, but that causes each word to separate into three rows (possible due to the display type?).
If I add width: 98px, it gets closer to my desired outcome, but it doesn't perfectly align with the teal.
Close to desired outcome
Any advice is appreciated!
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #8ecae6;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
float: right;
height: 100%;
width: 70%;
background-color: teal;
text-align: right;
}
.nav a {
height: 100%;
display: table;
table-layout: fixed;
float: left;
padding: 0px 20px;
background-color: red;
overflow: hidden;
width: 98px;
}
.nav a:last-child {
padding-right: 0px;
}
.nav a li {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Montserrat';
font-weight: 300;
}
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src=".png">
<img src=".jpeg">
</div>
<p>Text <br> Text</p>
<ul class="nav">
<a>
<li>Home</li>
</a>
<a>
<li>Data</li>
</a>
<a>
<li>Tool</li>
</a>
</ul>
</div>
</div>
I still don't understand what you wanted, I'm just taking a guess here and tried to get the result closer to your screenshot and based on what you explained.
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #8ecae6;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
float: right;
height: 100%;
width: 70%;
display: table;
background-color: teal;
text-align: right;
padding:0;
}
.nav a {
height: 100%;
display: table-cell;
padding: 0px 20px;
background-color: red;
overflow: hidden;
width: auto;
}
.nav a:last-child {
padding-right: 0px;
}
.nav a li {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Montserrat';
font-weight: 300;
}
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src=".png">
<img src=".jpeg">
</div>
<p>Text <br> Text</p>
<ul class="nav">
<a>
<li>Home</li>
</a>
<a>
<li>Data</li>
</a>
<a>
<li>Tool</li>
</a>
</ul>
</div>
</div>
At the beginning I want to say that I just study frontend so I need to help with something.
I want to prepare some tab slider.
I have something in left and right so my tab slider will be on center.
My tab slider have two buttons: < and > (slide to left; slide to right).
In my tab slider are a lot of elements which sum of widths exceeds a max-width of parent div (it has "content" class).
I want to hide all elements which are out of parent div bounds so I try to use
overflow: hidden;
but unfortunately those elements fell to second row.
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
<li>i-13</li>
<li>i-14</li>
<li>i-15</li>
<li>i-16</li>
</ul>
<i>></i>
</div>
</div>
<div class="right">something in right</div>
</div>
What I'm doing wrong?
I expect that if I use overflow and max-height my exceeds elements will be hide (on right - on one row) and not will be fall to second row.
There is my example.
Will you help me with that?
You need to use white-space: nowrap in .flex so that all items remains in the same line
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
white-space: nowrap;
position: relative;
}
ul {
padding-left: 10px;
padding-right: 10px;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
.flex i {
position: absolute;
top: 10px;
}
.flex i.prev {
left: 0;
}
.flex i.next {
right: 0;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i class="prev"><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
</ul>
<i class="next">></i>
</div>
</div>
<div class="right">something in right</div>
</div>
What I have
A header that is fixed
Inside the header is a piece of text in the top right
When I click on the text an absolute positioned div appears underneath it with some 'options'
In the main content I also have a column on the right that's fixed with a button inside
The Issue
When clicking the text to display the absolute position div 'overlay', the button appears 'on top' of it.
Question
How do I ensure that when I click the text and the additional panel appears, that it appears on top of everything else?
Some quick code to demonstrate
If you click on the text in the top right, you'll see the issue.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
<div class="text">
<span> Some text </span>
<div class="dropdown">
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
Set your z-index of your header class lets say 1001 and then set z-index:1000 action class.
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
z-index:1001;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
z-index:1000; /* less then the header*/
}
Hope this helps.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
z-index:100;
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header" style="z-index:199;">
<div class="text">
<span> Some text </span>
<div class="dropdown" >
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
<div class="header" style="z-index:199;">
I have a div with its content (list inside),
<div id="container">
<ul id="list">
<li>
<div class="title">
something
</div>
<div class="text">
something again
</div>
</li>
<li>
<div class="title">
something
</div>
<div class="text">
something again
</div>
</li>
</ul>
</div>
And my items from list are displayed float:left, and I want to the div container expand in height as its content.
#container{
position: relative;
width: 100%;
padding-bottom: 30px;
}
#list{
position: relative;
padding-top: 80px;
width: 95%;
/*height: 100%;*/
padding-bottom: 10px;
}
#list li{
position: relative;
float: left;
list-style: none outside none;
width: 20%;
height: 170px;
/*border:1px solid black;*/
}
You have several options:
Clearfix on the container:
#container:after {
clear: both;
content: "";
display: table;
}
The use of overflow:
#container {
overflow: hidden; /* or: auto | scroll */
}
Float the container:
#container {
float: left;
}
Using inline-block instead of float for the list items:
#container ul li {
display: inline-block;
float: none;
}
Try this approach...
li {
display: inline-block;
float: none; /* only if you have this set as you mentioned in your post */
}
#container {
height: auto;
}