folks!
there is a problem layouting my page header :/
i want to place the logo and title on the left, and some usermenu/logout/messages on the right.
html:
<div class="banner">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">foo</div>
<div class="logout">bar</div>
</div>
<div class="content">
Some Content..
</div>
css:
.banner {
height: 50px;
background-color: #feefef;
}
.img, .title, .logout{
vertical-align: text-bottom;
height:100%;
}
.logo {float: left;}
.title {float:left;}
.logout {float:right;}
https://jsfiddle.net/z9gervtm/3/
How do i move those texts to the bottom?
use flexbox to simplify your code
.banner {
height: 50px;
background-color: #feefef;
display: flex;
justify-content: space-between;
align-items: flex-end
}
.left {
display: flex;
align-items: flex-end
}
<div class="banner">
<div class="left">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">foo</div>
</div>
<div class="logout">bar</div>
</div>
<div class="content">
Some Content..
</div>
I would just use flexbox and get rid of the floats. Add divs to have a left and right banner section. Align-items center to make it look nice:
.banner {
display: flex;
justify-content: space-between;
height: 50px;
padding: 0 20px;
background-color: #feefef;
}
.left {
display: flex;
align-items: center;
}
.right {
display: flex;
align-items: center;
}
.left img,
.right div:first-of-type {
margin-right: 10px;
}
<div class="banner">
<div class="left">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">Title</div>
</div>
<div class="right">
<div class="logout">Logout</div>
<div class="messages">Messages</div>
</div>
</div>
<div class="content">
Some Content..
</div>
Related
what i want to make is picture below
and i made it to this far, using stackflow.
but i could't understand about positioning boxes
even though found some infos.
what should i do next?
<!-- html -->
<div class="boxbox">
<div class="box1">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box2">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box3">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
</div>
<!-- css -->
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
This is one of simple approach for fix your layout.
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
img{
width:300px;
height:300px;
}
.box1,.box2{
width:50%
}
.box3{
width:50%;
margin:auto;
}
<div class="boxbox">
<div class="box1">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
<div class="box2">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
<div class="boxbox">
<div class="box3">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
Or using flex
.boxbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box1,
.box2,
.box3 {
flex-basis: 50%;
min-height: 100px;
}
img {
width: 300px;
height: 300px;
}
.box3 {
margin: auto;
}
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I have seen this, question has been asked a lot but I have not really gotten an answer that works. I am trying to create 3 centred divs with multiple rows using (flex box) not grid please. Is it possible and what simple way. it should be center aligned.
I am trying to achieve this.
see as its centrally aligned. but mine is kinda alined to the left and if I use Justify content:center for the wrapper the two boxes go in the middle, like this.
this is my code
<div class="wrapper">
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
.wrapper {
background: #ff0000;
text-align: center;
width: 90%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 5% 0;
justify-content: center;
}
#squares {
background: #00ff00;
width: 30%;
height: 100px;
margin: 10px;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
here's the link to my jfiddle for a clearer picture.
https://jsfiddle.net/9ros2v4j/6/
Thanks to anyone that can explain.
.wrapper {
background: green;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.wrapper-inner {
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.square {
flex: 0 1 33.33%;
}
.square img {
width: 100%;
display: block;
}
.square-inner {
padding: 5px;
}
<div class="wrapper">
<div class="wrapper-inner">
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
</div>
</div>
One requirement is for justify-content: flex-start which would place your last row as per your need.
The second requirement you're asking for is that they should be centered also. For that I think you can use equal padding on both sides to make the rows look as if they are center-aligned.
Or
If you want you can place all your items in another div inside flex-container. Then you can justify-content: center the newly created div.
You can align items to the left with justify-content: flex-start; instead of justify-content: center but in order to center it all, you might need to start playing with margins and screen size.
If you open the below example on a full page, you will be able to see the expected result.
Please also note that you used id in multiple places (#squares) which could cause issues. I replaced it with a class.
.wrapper {
position: relative;
text-align: center;
height: auto;
background: #ff0000;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.squares {
background: #00ff00;
width: 30%;
height: 100px;
flex: 0 31.33%;
margin: 1%;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
<div class="wrapper">
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
I have several columns of images of different sizes. As the sizes are unknown, one column will be the tallest. I now want to stretch out the other (smaller) columns to match that height by increasing the gaps between the images accordingly. Here is an example image:
And here is a jsfiddle of this example that I set up with flexbox.
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
However in my specific case, I cannot use flexbox (as I need to absolute position some children), so I am now looking for a way to achieve the same thing without flexbox. Is there any way to get this vertical "space-between" distribution without flexbox?
Based on the comment regarding absolute positioning:
I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should not be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column.
The solution is to rust wrap the images and captions in a div (or better still a figure) and give that position relative...then position your captions absolutely.
Like so:
#main {
max-width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.holder {
position: relative;
}
.column img {
display: block;
max-width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
text-align: center;
background: rgba(255, 255, 255, 0.5);
width: 100%;
}
<div id="main">
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/300">
</div>
<div class="holder"> <img src="http://placekitten.com/200/300"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/400">
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/200">
<div class="caption">My Caption</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/280"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/250">
<div class="caption">My Caption</div>
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/400">
<div class="caption">Superduper long Caption In Here</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/220"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
</div>
fix image height and use "object-fit:cover;"
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
height:100px;
object-fit: cover;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
I'm trying to hide part of the div underneath another.
https://jsfiddle.net/71obhkzh/7/ shows what I have now.
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
}
#bottom {
height:100px;
width: 120px;
background-color: blue;
margin-top: -40px;
}
In the fiddle I used the negative margin-top to move the blue div up a bit, but it covers the bottom of the red div. I need the red one to be on top of blue one like this https://awwapp.com/b/unzo2gs6g/
Ok, if I add the z index as suggested it works on the fiddle, but in real app the colors are mixed like here
http://i67.tinypic.com/34pets8.png
I'm using bootstrap and the reality is bit more complicated (flex boxes in the top and bottom div with more content). I tried to set opacity on the top div but it did not help
real code (login container is the red one, info the blue one)
<div class="container">
<div class="row justify-content-center login-container">
<div class="col-6 login-box">login form here</div>
<div class="col-4 register-box">register box here</div>
</div>
<div class="d-flex justify-content-center info-container">
<div id="advantages" class="d-flex flex-column justify-content-center align-items-center">
some text
</div>
<div id="image" class="d-flex flex-column justify-content-center align-items-center">
<img src="some image"/>
</div>
</div>
</div>
https://jsfiddle.net/71obhkzh/31/
Make use of z-index.
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
z-index: 2
}
#bottom {
height:100px;
width: 200px;
background-color: blue;
margin-top: -40px;
z-index: 1
}
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
Use z-index to do that:
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
z-index:2;
}
#bottom {
height:100px;
width: 120px;
background-color: blue;
margin-top: -40px;
z-index:1;
}
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
I am trying to achieve the following layout for a navigation bar with Flexbox. I am stuck with the alignment of the divs. This is how it should like:
This is what i build up with Divs and CSS. But i dont know how to align those divs, so that i get the desired result.
Fiddle
* {
box-sizing: border-box;
}
#nav {
display: flex;
}
#logo {
width: 100px;
heigth: 100px;
background-color: black;
margin-left: 24px;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>
I would add a few more flex containers to some of the child divs. I'd also specify the width and flex-direction on the #left_side div and justify the content on the #top_nav div.
Try the snippet below or see this updated fiddle:
* {
box-sizing: border-box;
}
#nav,
#left_side,
#top_nav,
#bottom_nav {
display: flex;
}
#left_side {
flex-direction: column;
width: 100%;
}
#top_nav {
justify-content: space-between;
}
#logo {
width: 100px;
heigth: 100px;
background-color: black;
margin-left: 24px;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>
There are many good guides to flexbox available. This one is very good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Your layout can be achieved by adding the following CSS
fiddle
* {
box-sizing: border-box;
}
#nav {
display: flex;
}
#logo {
width: 100px;
height: 100px;
background-color: black;
margin-left: 24px;
}
#left_side {
display: flex;
flex-direction: column;
flex: 1;
}
#top_nav {
display: flex;
justify-content: space-between;
flex: 1;
}
#bottom_nav {
display: flex;
flex: 1;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>
Flexbox is one way to build the layout. You'll need extra containers to make it work.
However, if you want to keep it really simple, use CSS Grid:
header {
display: grid;
grid-template-columns: 100px 3fr 1fr;
grid-template-rows: 50px 50px;
grid-template-areas: " logo title switch "
" logo nav nav ";
}
#logo { grid-area: logo; }
#title { grid-area: title; }
#menu_switch { grid-area: switch; }
nav { grid-area: nav; display: flex; }
nav > a {
flex: 0 0 75px;
margin: 5px;
border: 2px solid green;
}
/* for demo only */
#logo { background-color: lightgray; }
#title { background-color: pink; }
#menu_switch { background-color: skyblue; }
nav { background-color: lightgreen; }
* { box-sizing: border-box; }
div, a { display: flex; align-items: center; justify-content: center;
text-align: center; }
<header>
<div id="logo">100x100px<br>Logo</div>
<div id="title">Page Title</div>
<div id="menu_switch">Switch</div>
<nav>
<a class="nav_item">Menu 1</a>
<a class="nav_item">Menu 2</a>
<a class="nav_item">Menu 3</a>
<a class="nav_item">Menu 4</a>
</nav>
</header>
jsFiddle demo
For an explanation of the grid rules above and browser support data, see these posts:
CSS-only masonry layout but with elements ordered horizontally
Browser support for CSS Grid