This question already has answers here:
How to align a div to the top of its parent but keeping its inline-block behaviour?
(5 answers)
Closed 6 years ago.
I got 3 divs displayed in inline-block way. Each of them has a simple list with links. The thing is second list has only one item.
The way it looks:
The way it should look:
Thanks for any advice!
.column_links{
display: inline-block;
width:28%;
margin-right:60px;
}
.column_social{
width:29%;
display: inline-block;
margin-right:60px;
}
.column_new{
display: inline-block;
}
Use need to set vertical-align:top for display:inline-block.
Because default value is vertical-align:baseline. So, that your div goes to the bottom.
.column_new,
.column_social,
.column_new{
vertical-align: top;
}
Here is Demo Link
use vertical-align:top
Try this Jsfiddle
.column_new,
.column_social,
.column_new{
vertical-align: top;
}
.column_links {
display: inline-block;
width: 28%;
margin-right: 60px;
}
.column_social {
width: 29%;
display: inline-block;
margin-right: 60px;
vertical-align: top;
}
.column_new {
display: inline-block;
}
<div class="column_links">
<h3>
LINKS
</h3>
<hr>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ul>
</div>
<div class="column_social">
<h3>
FIND ME
</h3>
<hr>
<ul>
<li>list 1</li>
</ul>
</div>
<div class="column_new">
<h3>
NEW
</h3>
<hr>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ul>
</div>
here is jsfiddle: demo
Related
I am trying to create a full screen vertical navigation overlay.
I would like to make the ul container the full height of the page and then equally space each li. This list is not a fixed amount so looking for something that will dynamically resize.
Is FlexBox the way to go?
https://jsfiddle.net/w3hppLss/
html, body{margin:0;padding:0;}
ul{list-style:none;height:100vh;}
li{background:grey;margin-bottom:5px;}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
use flexbox with flex-direction:column in ul and flex:1 in li
html,
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
height: 100vh;
background: red;
margin: 0;
padding: 0;
display: flex;
flex-direction: column
}
li {
flex: 1;
background:gray;
margin: 5px
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
I'm currently working on a menu consisting of two parts (see image). On mobile, I'd like to show these menu items stacked from top to bottom, but starting with the bottom menu and ending with the top menu. Is there any (clean) way to do this with CSS or will I have to create two menus and show the correct one depending on page width?
EDIT: To clarify, the image is just to show an example of what I mean. I'm wondering in a more general sense if it's possible to somehow reverse the divs in CSS (without absolute positioning etc).
EDIT 2: Apologies for not adding any code. Here's a small pen that shows the situation: https://codepen.io/anon/pen/GWwrMW
<div class="nav">
<ul class="nav__top">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
<ul class="nav__primary">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
.nav__top,
.nav__primary {
list-style: none;
margin: 0 0 20px 0;
text-align: right;
li {
display: inline-block;
padding: 10px;
background-color: #ccc;
}
}
On mobile, I want the sub items to be displayed underneath the main items.
You can do this with flex and flex-direction: column-reverse, or for more control, using the order property on flex children. But with your example, flex-direction: column-reverse would work.
.nav__top li,
.nav__primary li {
display: inline-block;
padding: 10px;
background-color: #ccc;
}
#media (max-width: 420px) {
.nav {
display: flex;
flex-direction: column-reverse;
}
.nav li {
display: list-item;
}
}
<div class="nav">
<ul class="nav__top">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
<ul class="nav__primary">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
This added CSS will reverse the order in the second menu:
.nav__primary {
display: flex;
flex-direction: row-reverse;
}
You can put it in a media query.
https://codepen.io/anon/pen/ryQjdg
ADDITION: I overread the wish of it to be stacked horizontally. In this case you need
.nav__primary {
display: flex;
flex-direction: column-reverse;
}
If you want responsive nav bar you have to use media queries. Something like this
#media screen and (max-width: 600px){
ul.topnav li {float: none;}}
This will work if your menu was built by list.
Figured it out. Since I only need to support mobile browsers I can use Flexbox:
.nav {
display: flex;
flex-direction: column-reverse;
}
I have a two column layout. Column 1 is a heading. Column 2 is a list.
I want the columns to fit to content. (e.g. Column 1 should be as wide as it's contents)
I also want the list to be horizontal.
I want to use Flexbox, so I can change items in the list and have the layout adapt accordingly.
E.g. So it looks like this:
How can I do this?
Here is my code (Codepen is here):
<div class="wrapper">
<nav class="topics">
<span class="unit unit-header">Topics: </span>
<ul id="list" class="list unit">
<li>All</li>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
<li>Topic 5</li>
<li>Topic 5</li>
</ul>
</nav>
</div>
.wrapper {
width: 960px;
margin: auto;
padding-top:20px;
}
.topics {
display: flex;
}
.unit {
flex: 1 auto;
}
.list {
display:flex;
}
.list li {
flex: 1 auto;
}
If I add the following code, it works:
.unit-header {
display: table;
padding-right: 5%;
}
However, mixing table with flex-box seems a bit hacky to me. Is there a better way?
Have you tried using this instead?
.unit-header {
flex: 0 1 auto;
}
The above shorthand property means:
flex-grow: 0
flex-shrink: 1
flex-basis: auto
With a simple html list like in the example below, how do I get the list items to center when it goes onto a second line?
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
.container{max-width:500px;}
li{display:block;float:left;background:grey;}
http://jsfiddle.net/hzazvwte/
When the container is shrunk and the menu items start dropping into the line below, I would like them to be centered. How can I achieve this?
You have to remove float, set text-align: center; to the container, inline-block to items, reset margin / padding and eliminate white spacing between elements.
.container {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
/* float: left; */
background: grey;
margin: 0;
}
Fiddle: http://jsfiddle.net/hzazvwte/4/
Do you mean the text in the li items?
.container{max-width:300px;}
li{
display:block;
float:left;
background:grey;
width: 100px;
text-align: center;
}
I use isotope to layout some items. Each item includes a popup menu. Because isotope uses translate3d in order to layout and animate the items the stacking order of the menus us all messed up. A later item hides the menu of a former one, even though the items have z-index: 1 and the menus have z-index: 2. Is there any way to solve this?
Here is an example that shows the behavior (jsfiddle):
CSS:
.items {
position: relative;
}
.item {
position: absolute;
z-index: 1;
width: 90px;
height: 90px;
background: lightgray;
padding: 5px;
}
.menubutton {
position: relative;
}
.menu {
position: absolute;
z-index: 2;
top: 100%;
left: 0px;
list-style: none;
margin: 0;
padding: 5px;
background: yellow;
}
.menubutton .menu {
display: none;
}
.menubutton:hover .menu {
display: block;
}
HTML:
<div class="items">
<div class="item" style="-webkit-transform: translate3d(10px,10px,0px); transform: translate3d(10px,10px,0px);">
<div class="menubutton">
<div class="label">menu</div>
<ul class="menu">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
...
</div>
<div class="item" style="-webkit-transform: translate3d(10px,120px,0px); transform: translate3d(10px,120px,0px);">
<div class="menubutton">
<div class="label">menu</div>
<ul class="menu">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
...
</div>
</div>
I just got an idea how to solve it. I just added this style:
.item:hover {
z-index: 2;
}
This way the currently hovered item is always in front of all the others.
See: http://jsfiddle.net/paskQ/5/
It looks like each .item has the same z-index, so each subsequent .item is being stacked on top of the previous, despite having the same z-index. The parent z-index is then what is being compared, instead of the z-index on .menu.
I am not familiar with isotope, so this may not be a viable solution, but if you are able to add some jQuery, you could dynamically set the z-index values after and fix the issue with something like
var total = $(".item").length;
$(".item").each(function(){
$(this).css("z-index", total);
total--;
});
Here is a fiddle http://jsfiddle.net/paskQ/4/
Let me know if that doesn't work and maybe I can find an alternate solution, or if you have any questions.