I want to have such a gallery, with the thumbnails having the equal height along the main column, despite the different height of the images.
i tried having a <div> around every picture and setting the height on them. but I didn't get the desired result.
Any idea?
/* PLEASE see the snippet in Full size */
.gallery .gal-ver .gal-ver-border {
border: 1px solid #707070;
border-radius: 10px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
}
.gallery .gal-ver img {
width: 100%;
height: auto;
border-radius: 10px;
display: block;
padding: 5px;
}
.gallery .imgWrap {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #707070;
border-radius: 15px;
}
.gallery .mainimg {
width: 100%;
height: auto;
border-radius: 10px;
margin: 15px 10px;
}
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>[product-name]</title>
</head>
<body>
<div class="gallery d-flex">
<div class="gal-ver">
<div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
</div>
<div class="col-md-12 col-lg-9 imgWrap">
<img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
</div>
</div>
First you should set a fixed height on the parent div .gal-ver-border, this will make sure all the gallery items have the save height
After doing this you will notice that the images aspect-ratio brakes, to solve this just add object-fit: contain; to the images style
in the result the following CSS should be added:
.gallery .gal-ver .gal-ver-border {
height: 290px; /* or any other value */
}
.gallery .gal-ver .gal-ver-border img {
object-fit: contain;
}
Try this:
.gallery .gal-ver .gal-ver-border {
border: 1px solid #707070;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
With this structure, you can use flex-basis so your main img uses up more space, and for the small img u can go with a height of 20% but as you can see I used a calc(20% - 4px) just to explain the 4px, you have a margin of 5px and a border of 1px around the img so to make them even height with the main img, you have to take that in consideration too. Also added a :not(:first-of-type) selector, so the first img doesn't need the top margin.
.gallery .gal-ver .gal-ver-border {
border: 1px solid #707070;
border-radius: 10px;
display: flex;
margin-bottom: 5px;
}
.gallery .gal-ver .gal-ver-border:not(:first-of-type) {
margin-top: 5px;
}
.gal-ver > * {
height: calc(20% - 4px);
}
.gallery .gal-ver img {
object-fit: contain;
width: 100%;
border-radius: 10px;
display: block;
padding: 5px;
}
.gallery .imgWrap {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #707070;
border-radius: 15px;
margin-left: 5px;
flex: 0 0 80%;
}
.gallery .mainimg {
width: 100%;
height: auto;
border-radius: 10px;
margin: 15px 10px;
}
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>[product-name]</title>
</head>
<body>
<div class="gallery d-flex">
<div class="gal-ver">
<div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
<div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
</div>
<div class="col-md-12 col-lg-9 imgWrap">
<img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
</div>
</div>
<!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>Having equal heights in column - sof question 15-May-2022</title>
<style>
.gallery {
display: inline-flex;
/* background-color: lightblue; */
padding: 10px;
}
img:not(.display-img) {
height: 50px;
width: 50px;
margin: 5px;
padding: 5px;
border: 1px solid hsl(0, 0%, 65%);
}
.display-div {
border: 1px solid hsl(0, 0%, 65%);
padding: 10px 20px;
margin: 5px 10px;
}
.display-img {
height: 200px;
width: 200px;
margin-top: 22%;
}
img,
.display-div {
border-radius: 5px;
}
</style>
</head>
<body>
<div class="gallery">
<div class="display-div">
<img class="display-img" src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
</div>
<div class="">
<div class=""><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class=""><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
<div class=""><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
<div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
<div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
</div>
</div>
</body>
</html>
Related
I want to reduce the left and right padding.
The space around the flag is too much and I'd prefer that the parent div immediately surrounds the child div's
That way, I can change the border properties for the parent div but I'm not able to reduce the size of the padding around the 'flag'
.flex {
display: flex;
border-color: black;
border: 5px;
border-style: dashed;
flex-direction: row;
justify-content: center;
padding: 0;
}
.box1 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 40px 0 0 40px;
}
.box2 {
height: 200px;
width: 100px;
background-color: whitesmoke;
}
.box3 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 0 40px 40px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nigerian-flag.css">
<title>nigerian flag</title>
</head>
<body>
<div class="flex">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
It is possible to do that by simply changing display: flex; to display: inline-flex;. Centering the flag can then be done if needed.
.flex {
display: inline-flex;
border-color: black;
border: 5px;
border-style: dashed;
flex-direction: row;
justify-content: center;
padding: 0;
}
.box1 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 40px 0 0 40px;
}
.box2 {
height: 200px;
width: 100px;
background-color: whitesmoke;
}
.box3 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 0 40px 40px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nigerian-flag.css">
<title>Nigerian flag</title>
</head>
<body>
<div class="flex">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
you can add to the flex class style, you can change the width if you want
.flex{ width: 50%; margin: 0 auto;}
Since your flag has a total width of 300px you can easily add "width:300px;" in ".flex"
.flex {
display: flex;
border-color: black;
border: 5px;
border-style: dashed;
flex-direction: row;
justify-content: center;
padding: 0;
width: 300px;
}
.box1 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 40px 0 0 40px;
}
.box2 {
height: 200px;
width: 100px;
background-color: whitesmoke;
}
.box3 {
height: 200px;
width: 100px;
background-color: green;
border-radius: 0 40px 40px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nigerian-flag.css">
<title>nigerian flag</title>
</head>
<body>
<div class="flex">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
I'm trying to create a right floated sidebar in a parent div, with a different background color. The parent has a 3px dashed border, and the sidebar doesn't extend all the way to the edges. Instead, the parent's background color is visible between the dashes.
a view of the body of the site
a closer view of the corner, showing that the background does not meet the edge of the border
I've tried adjusting the positions, changing the order of my elements, changing the height and width, I'm kind of at a loss.
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 675px;
width: 200px;
float: right;
background-color: #FEDA6A;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
You can do something like this with flexbox. Put outline on the parent and use negative margins to move the child to cover up the outline.
.page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 400px;
outline: 5px dashed green;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-items: stretch;
background-color: red;
margin: -5px;
padding: 10px;
}
.column.left {
border-right: 0px;
}
.column.right {
border-left: 0px;
background-color: yellow;
}
<div class='page-wrapper'>
<div class='row'>
<div class='column left'>
Column 1
</div>
<div class='column right'>
Column Two
</div>
</div>
</div>
Try this, is this what you want to achieve?
body {
background-image: url("https://i.lensdump.com/i/Rxu5rz.png");
}
#font-face {
font-family: 'Smalle';
src: url("https://files.catbox.moe/x368w4.ttf");
}
.main {
position: absolute;
width: 650px;
height: 675px;
top: 50%;
left: 50%;
margin-top: -325px;
margin-left: -350px;
border: 3px dashed #456655;
background-color: #fff8e5;
font-family: 'Smalle';
}
.sidebar {
position: relative;
height: 681px;
width: 200px;
float: right;
background-color: #FEDA6A;
top: -3px;
right: -3px;
}
.sidecontent {
text-align: center;
font-family: 'Smalle';
}
.content {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link href="1styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<br>
<div class="sidecontent">
<p>This is where text and links will go... eventually.</p>
</div>
</div>
<div class="content">
<center><span class="title">TITLE</span></center>
<p style="padding: 5px; margin: 6px; width: 425px;">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</body>
</html>
I've been working on this project for awhile, an article that holds multiple items within it. However, when resizing the web page to a smaller size, the "player-summary" class is pushed into the section with the "name" class. This is despite the "name" class having a fixed width of 250px. I'm not quite sure how to fix this so resizing the web page won't bleed into it.
Additionally, when resizing, why does my text overflow out of my container?
html,body{
width: 100%;
height: 100%;
}
.center{
width:90%;
margin: auto;
}
.big-board_inner{
width: 80%;
margin: auto;
background-color: white;
}
article{
border: solid 1px;
border-radius: 10px;
}
.top-info{
display: flex;
flex-direction: row;
width:100%;
height: 100%;
font-size: 15px;
}
.name{
display: block;
width: 250px;
margin: .3em;
padding-right: 3em;
font-size: 20px;
padding-left:.5em;
}
.player-summary{
margin: .5em;
padding-right: 2em;
}
.age{
margin: .5em;
border-left: solid 1px;
padding-left: 1em;
}
.main-info{
width: 50%;
display: flex;
flex-direction: column;
}
.profile img{
width: 250px;
height: auto;
border-radius: 15px;
padding: .5em;
}
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class = "center">
<div class = "big-board_inner">
<article>
<div class="top-info">
<div class = "name">Dustin Harris <br> OF - Tex </div>
<div class="player-summary">Summary: <br>Dustin Harris is as pure as hitter you can find, with a LF fit</div>
<div class="age">Highest Level: A+ <br> Age: 21</div>
<div class="age">Height: 6'1" <br> Weight: 215 lbs</div>
</div>
<div class="main-info">
<div class="profile"> <img src="images/Dustin Harris.jfif"></div>
</div>
</article>
</div>
</div>
</body>
</html>
Use min-width. It would make your element have a minimum-width to maintain no matter the screen size if you set a static value, like in this case, 250px.
As for why your elements overflow out of your container, it's because you don't have any wrapping on your container. You can use flexbox's flex-wrap property to wrap your elements to fit the available space. See the snippet below:
html,
body {
width: 100%;
height: 100%;
}
.center {
width: 90%;
margin: auto;
}
.big-board_inner {
width: 80%;
margin: auto;
background-color: white;
}
article {
border: solid 1px;
border-radius: 10px;
}
.top-info {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 100%;
font-size: 15px;
}
.name {
display: block;
min-width: 250px;
margin: .3em;
padding-right: 3em;
font-size: 20px;
padding-left: .5em;
}
.player-summary {
margin: .5em;
padding-right: 2em;
}
.age {
margin: .5em;
border-left: solid 1px;
padding-left: 1em;
}
.main-info {
width: 50%;
display: flex;
flex-direction: column;
}
.profile img {
width: 250px;
height: auto;
border-radius: 15px;
padding: .5em;
}
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="center">
<div class="big-board_inner">
<article>
<div class="top-info">
<div class="name">Dustin Harris <br> OF - Tex </div>
<div class="player-summary">Summary: <br>Dustin Harris is as pure as hitter you can find, with a LF fit</div>
<div class="age">Highest Level: A+ <br> Age: 21</div>
<div class="age">Height: 6'1" <br> Weight: 215 lbs</div>
</div>
<div class="main-info">
<div class="profile"> <img src="images/Dustin Harris.jfif"></div>
</div>
</article>
</div>
</div>
</body>
</html>
More on flex-wrap here.
If what you're looking for is text-wrapping, then refer here instead.
I've spent hours reviewing flexbox tutorials on youtube and I cannot figure out why I'm not able to center my flexbox item contents.
I have managed to center the images horizontally by using text-align: center; in my flex container.
However this do not affect the list AND it has not centered it vertically, other people seem to use justify-contents or align-items but it's not really working out for me.
Here's the code: https://jsfiddle.net/dL72j5gx/1/
html,
body {
height: 100%;
padding: 0px;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
width: 100%;
display: flex;
border: 5px solid red;
align-items: center;
justify-content: center;
text-align: center;
}
.menu {
width: 50%;
border: 3px solid green;
align-self: center;
height: 100%;
}
.content {
width: 50%;
border: 3px solid blue;
align-self: center;
height: 100%;
}
.MenuLogo {
height: 100%;
border: 3px solid yellow;
}
.ContentArea {
height: 100%;
border: 3px solid purple;
}
.quLogo {
width: 300px;
height: 100px;
}
.quCharacter {
width: 300px;
height: 300px;
}
.myList {
padding: 10px;
width: 30%;
}
.list-group {}
.list-group-item {
outline: 3px solid black;
}
.list-group-item>a {
color: black;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="flex-container">
<div class="menu">
<div class="MenuLogo">
<img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
<div class="myList">
<ul class="list-group">
<li class="list-group-item">Shop</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">About</li>
<li class="list-group-item">Contact</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="ContentArea">
<img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Thanks in advance!
EDIT: Here's a quick image to show what im going for.
Apply flex to parent of element and give flex-direction:column to MenuLogo
html, body {
height: 100%;
padding: 0px;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
width: 100%;
display: flex;
border: 5px solid red;
align-items: center;
justify-content: center;
text-align: center;
}
.menu {
width: 50%;
border: 3px solid green;
align-self: center;
height: 100%;
}
.content {
width: 50%;
border: 3px solid blue;
align-self: center;
height: 100%;
}
.MenuLogo{
height: 100%;
border: 3px solid yellow;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
.ContentArea{
height: 100%;
border: 3px solid purple;
justify-content: center;
align-items: center;
display: flex;
}
.quLogo {
width: 300px;
height: 100px;
}
.quCharacter {
width: 300px;
height: 300px;
}
.myList {
padding: 10px;
width: 30%;
}
.list-group{
}
.list-group-item {
outline: 3px solid black;
}
.list-group-item > a{
color: black;
}
<!doctype html>
<html lang="en">
<html>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial scale = 1">
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div class="flex-container">
<div class="menu">
<div class="MenuLogo">
<img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
<div class="myList">
<ul class="list-group">
<li class="list-group-item">Shop</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">About</li>
<li class="list-group-item">Contact</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="ContentArea">
<img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
When you use flexbox, you normally need to apply the properties to multiple different "containers." You would need to add the following 3 properties to the direct parent of the elements:
display: flex;
justify-content: center;
align-items: center;
In this case, add those 3 properties to the .MenuLogo class and the .ContentArea class.
You can move the table back underneath the image by putting it in a div that is separate from the div class="MenuLogo" div. This div is acting as a container for both items right now, and you would want them to be separate elements.
html,
body {
height: 100%;
padding: 0px;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0px;
}
.flex-container {
height: 100%;
width: 100%;
display: flex;
border: 5px solid red;
align-items: center;
justify-content: center;
text-align: center;
}
.menu {
width: 50%;
border: 3px solid green;
align-self: center;
height: 100%;
}
.content {
width: 50%;
border: 3px solid blue;
align-self: center;
height: 100%;
}
.MenuLogo {
height: 100%;
border: 3px solid yellow;
display: flex;
justify-content: center;
align-items: center;
}
.ContentArea {
height: 100%;
border: 3px solid purple;
display: flex;
justify-content: center;
align-items: center;
}
.quLogo {
width: 300px;
height: 100px;
}
.quCharacter {
width: 300px;
height: 300px;
}
.myList {
padding: 10px;
width: 30%;
}
.list-group {
}
.list-group-item {
outline: 3px solid black;
}
.list-group-item>a {
color: black;
}
<!doctype html>
<html lang="en">
<html>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial scale = 1">
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="flex-container">
<div class="menu">
<div class="MenuLogo">
<img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
<div class="myList">
<ul class="list-group">
<li class="list-group-item">Shop</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">About</li>
<li class="list-group-item">Contact</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="ContentArea">
<img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
Here's the code:
JsFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../test.css">
<title>Test title</title>
</head>
<body>
<nav id="user-nav">
<div id="logo-container">
<img src="img/logo.svg" alt="Loading logo">
<p>This is a site</p>
</div>
<div id="form-container">
<i id="search-icon"></i>
<input type="text" name="search" id="form-search" autocomplete="off" placeholder="Quick search...">
</div>
<div class="links">
Home
Services
About
</div>
<div class="profile-link">
Profile name
<div class="drop-menu">
Switch
Log out
</div>
</div>
</nav>
</body>
</html>
and CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: chocolate;
}
#user-nav {
display: flex;
height: 62px;
position: fixed;
background-color: #333;
width: 100%;
border-bottom: 2px solid #fff;
}
#logo-container img {
width: 96px;
height: 60px;
}
#logo-container {
display: flex;
flex-grow: 2;
}
.profile-link {
flex-grow: 1;
text-align: center;
display: flex;
flex-direction: column;
position: relative;
border-left: 1px solid #fff;
height: 100%;
}
.drop-menu {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
background: #333;
border-left: 1px solid #fff;
width: 100%;
}
I removed all extra css from other elements in navbar because i thought it was affecting the last divs but it didn't affect the misalignment. I tried different display properties for the div that holds profile name even using list instead of div for drop-down-menu, i always get this offset of 1px. I am styling the navbar using flex because i want to make it more responsive, i am not sure is this somehow affecting the issue.