I need to center a main div and append a fixed menu to the right of that item. I need the main div to stay in the center and the right menu to "fix" to the centered div.
Currently, I'm using flex to center the div, but this is resulting in both items centering (meaning the main div is not truly in the center).
This is the desired layout:
Current layout:
The code appears as below (I'm using React with styled components):
Container:
const DivContainer = styled.div`
display: flex;
justify-content: center;
position: relative;
z-index: 60;
width: 100%;
`;
Main Div:
const MainDiv = styled.div`
width: 300px;
padding: 35px 15px;
`;
Menu div:
const MenuDiv = styled.div`
display: flex;
cursor: pointer;
flex-shrink: 0;
flex-direction: column;
margin-top: 85px;
order: 10;
`;
This is rendered as the below:
<DivContainer>
<MainDiv />
<MenuDiv />
</DivContainer>
You could put the sidebar inside the container and push it out with a negative margin right
body,
html {
height: 100%;
margin: 0;
}
.container {
height: 100%;
width: 100%;
border: 2px solid yellow;
border-radius: 5px;
box-sizing: border-box;
margin: 5px;
display: grid;
place-items: center;
}
.center {
width: 200px;
height: 200px;
border: 2px solid yellow;
border-radius: 5px;
}
.sidebar {
width: 50px;
height: 200px;
outline: 2px solid magenta;
border-radius: 5px;
/* important */
float: right;
margin-right: -50px;
}
<div class="container">
<div class="center">
content
<div class="sidebar">
sidebar
</div>
</div>
</div>
ps: for the snippet click full page
You could just wrap it in a zero width div, with overflow visible:
#wrapper {
display: flex;
border: solid 3px green;
justify-content: center;
}
#main {
border: solid 2px orange;
width: 50%;
}
#no-width {
width: 0;
overflow: visible;
}
#menu {
width: 100px;
border: solid red 2px;
}
<body>
<div id="wrapper">
<div id="main">
Centered
</div>
<div id="no-width">
<div id="menu">
"Zero" width div, so doesn't affect centering
</div>
</div>
</div>
</body>
Wrap it in another div with same width as main div and set min-width for its child
.wrapper {
display: flex;
width: 300px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.main {
width: 300px;
min-width: 300px;
min-height: 200px;
background-color: aquamarine;
}
.menu {
width: 80px;
min-width: 80px;
min-height: 200px;
background-color: cadetblue;
position: relative;
}
<div class="container">
<div class="wrapper">
<div class="main"></div>
<div class="menu"></div>
</div>
</div>
Related
I have a centered flexbox parent div, #con, with % width, which has an image(s)-containing div (.block) sandwiched between two padded text divs (#info and #links). How can I force .block img to be a square with side length equal to #con's width with JS or CSS? .block could contain 1x1=1 images, 2x2=4 images, etc; thus, background-image is not an option. Imitating the solution here only seems to work if I replace con.width() in the JS with a specific value (e.g. 300px, as shown here with this placeholder image), which is unideal.
var con = $("#con");
$(".block").css("height", con.width(), "width", con.width());
body {
font-size:1rem;
text-align:center;
margin:0;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
#con {
width:50%;
max-width:300px;
display:flex;
flex-flow:row wrap;
justify-content:center;
margin:5rem auto;
border:1px solid black;
}
.block {width:100%; overflow:hidden; background:black;}
.block img {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>
You don't need JS for this: just use aspect-ratio: 1 to force a square aspect ratio. You might want to add display: block to ensure the <img> is not displayed inline (which is the default) as well. See proof-of-concept below:
body {
font-size: 1rem;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#con {
width: 50%;
max-width: 300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5rem auto;
border: 1px solid black;
}
.block {
width: 100%;
overflow: hidden;
background: black;
}
.block img {
display: block;
object-fit: cover;
width: 100%;
aspect-ratio: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>
If you want to support browsers that do not have aspect-ratio support, you can use a combination of a pseudo-element + padding-bottom hack to set a fixed aspect ratio instead:
body {
font-size: 1rem;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#con {
width: 50%;
max-width: 300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5rem auto;
border: 1px solid black;
}
.block {
width: 100%;
overflow: hidden;
background: black;
position: relative;
}
.block::before {
width: 100%;
padding-bottom: 100%;
content: '';
display: block;
}
.block img {
display: block;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>
enter image description here
Hi, I was working on a school project I needed to create a canvas that fills all the remaining width but upon creating the flex box container my chat div wont join/enter the flexbox.
#Right-Box-Wrapper{
display: flex;
position: fixed;
width: 320px;
min-width: 320px;
height: 100% !important;
right: 0px;
top: 0px;
border: 8px solid black;
border-radius: 10px;
background-color: #484848;
}
#Input-Wrapper{
display: flex;
justify-content: center;
}
#mwrap{
width: 100%;
display: flex;
justify-content: center;
}
#message-wrapper::-webkit-scrollbar{
width: 5px;
}
#message-wrapper::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#message-wrapper::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#message-wrapper{
top: 12px;
position: absolute;
height: 80%;
width: 95%;
background-color: #333333;
border: 3px solid black;
overflow: auto;
overflow-wrap: break-word;
}
#a{
position: fixed;
height: 100%;
width: 10px;
background-color: #262626;
top: 0px;
right: 0px;
}
#inpbox{
background-color: #333333;
position: absolute;
width: 95%;
height: 50%;
top: 80px;
text-align: left;
color: whitesmoke;
border: 3px black solid;
font-family: sans-serif;
font-size: 13px;
resize: none;
}
#inpbox::-webkit-scrollbar{
width: 5px;
}
#inpbox::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#inpbox::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#inpbox:focus{
outline: none;
}
#Chat-Wrapper{
position: absolute;
bottom: 0px;
right: 0px;
z-index: 50;
width: 100%;
height: 25%;
}
.Inputs{
color: whitesmoke;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.Tlc{
color:red;
font-weight: 1000;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.dice_roll{
color:greenyellow;
font-weight: 1250;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top:greenyellow solid 2px;
border-bottom: greenyellow solid 2px;
font-family: sans-serif;
}
#canvas-wrapper{
justify-content: center;
display: flex;
min-width: 350px;
height: 400px;
background-color: rgb(112, 112, 78);
}
#screen-wrap{
display: flex;
flex-direction: row;
}
body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
}
#flxt{
display: flex;
flex-direction: row;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id = "screen-wrap">
<div id = "canvas-wrapper">
<canvas id = "canv">
</canvas>
</div>
<div style="background-color: aqua;width: 100px;height: 100px;">
<canvas id = "canv">
</canvas>
</div>
<div id = "Right-Box-Wrapper">
<div id = "mwrap">
<div id = "message-wrapper">
</div>
</div>
<div id = "Chat-Wrapper">
<div id = "Input-Wrapper">
<textarea placeholder="Type here...." id = "inpbox"></textarea>
</div>
</div>
</div>
</div>
<div id = "flxt">
<div style="padding: 10px;background-color: aqua;">
asdasdasd
</div>
<div style="padding: 10px;background-color: aqua;">
asdasdasdasdasd
</div>
</div>
<script src="site.js"></script>
</body>
</html>
I have no idea what is wrong with this but this is my first time using flex box I couldn't find anyone else with a similar problem
From what I can see you have a lot of positioning going on that is somewhat unneeded when using flexbox. Ill give you a basic example. First I set all objects to box sizing border-box to help when using percentages. Position your container with position fixed and place it on the top right (you already have this done). Make it display flex and give it a flex direction of column so the objects stack on top of each other. Give it a height and width. I use vh(viewport height) and vw(viewport width). Next your message area will have a property called flex-grow that is set to 1. This allows it to take up all the remaining available space. Next set the height on your chat container I set mine to 25 viewport height. This means your message area will take up all but 25% of the viewport height. Then I just set the height and width of the chat textarea to 100% and since it now uses border-box box sizing it will just fill the container.
Flexbox and Grid are there to help you position objects while keeping them in the flow of the document so be careful when using position absolute when trying to move objects around. Here is a really good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here is more information on positioning. Take a good look at how absolute moves objects out of the normal flow of the document https://developer.mozilla.org/en-US/docs/Web/CSS/position
* {
box-sizing: border-box;
}
.chat-container {
position: fixed;
right: 0;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
width: 40vh;
}
.message {
flex-grow: 1;
background-color: #808080;
border: 4px solid #000;
border-bottom: 2px solid #000;
border-radius: 10px 10px 0 0;
}
.chat {
height: 25vh;
border: 4px solid #000;
border-top: 2px solid #000;
border-radius: 0 0 10px 10px;
}
.chat-area {
width: 100%;
height: 100%;
background-color: #808080;
border-radius: 0 0 5px 5px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #fff;
}
<div class="chat-container">
<div class="message"></div>
<div class="chat">
<textarea placeholder="input message here" class="chat-area"></textarea>
</div>
</div>
Incase the first answer does not help Ill give you an example on how to position objects using flexbox. This keeps objects in the flow of the document and manipulates their position using display flex, flex direction and flex grow.
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100vh;
width: 100vw;
}
.remaining-area {
flex-grow: 1;
background-color: #f2f2f2;
}
.chat-area {
width: 30vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.message {
flex-grow: 1;
background-color: #ccc;
}
.chat {
height: 25vh;
}
<div class="wrapper">
<div class="remaining-area">
<p>this area is left empty</p>
</div>
<div class="chat-area">
<div class="message">
<p>message area</p>
</div>
<div class="chat">
<p>chat area</p>
</div>
</div>
</div>
I have a chat nav bar with divs for different users in which there is a photo of the user. I want the photo to be a circle. I am doing it with padding-bottom and width, but the problem comes when the width:height ratio of the screen gets bigger the circle gets larger than the nav , because of the padding-bottom being calculated by the width. What is best approach to make this responsive for all screens?https://jsfiddle.net/n386ejzf/
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.chats{
height: 20%;
width: 100%;
background: red;
}
.chat{
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img{
width: 10%;
padding-bottom: 10%;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
Use viewport height units.
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
.chats {
height: 20%;
width: 100%;
background: red;
}
.chat {
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img {
margin: auto;
width: 10vh;
height: 10vh;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
Is it possible to center the content (icon + text) within the container horizontally and vertically, if the text happens to wrap? It seems that CSS engine does not calculate a visible width of the wrapped text and my current solution does not work... Please look at this https://jsfiddle.net/wabrm1st/
html:
<a href=# class="box">
<span class="icon"></span>
<span class="text">How can I center when_it_wrapped?</span>
</a>
css:
* { box-sizing: border-box; }
.box {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 100px;
text-decoration: none;
padding: 0 30px;
border: 1px solid red;
}
.icon {
height: 40px;
min-width: 40px;
background: #edc;
margin-right: 10px;
}
Maybe, it is possible to calculate the width of the wrapped text in JavaScript?
Here is a quick workup of the solution I mentioned earlier. I'll see if I can clean it up and make it more optimal later. If you want to avoid using flexbox you can use position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;. Again, I'll see if I can send you that solution later as well.
.container {
width: 220px;
height: 100px;
display: flex;
margin: 0 auto;
background: #ccc;
justify-content: center;
align-items: center;
}
.box{
width: 80%;
text-decoration: none;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
height: 40%;
width: 20%;
float: left;
background: #000;
margin-right: 5%;
}
.text {
text-decoration: none;
border: 1px solid red;
text-align: center;
}
<body>
<div class="container">
<a href="#" class="box">
<span class="icon"></span>
<span class="text">How can I center when_it_wrapped?</span>
</a>
</div>
</body>
I want to create container div that has width between 800px to 1000px.
Inside, it has two div and want to fix left div to 250px.
For the right div I want it make width-resize automatically
jsfiddle examle
HTML
<div style="width: 100%;">
<div class="container">
<div class="left">
Left div<br />(fixed to 250px)
</div>
<div class="right">
Right div<br />(width fit to blue area left)
</div>
</div>
</div>
CSS
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
float: left;
}
This will do it. It uses calc (http://jsfiddle.net/vn84nm30/6/)
.right {
width: calc(100% - 250px);
background-color: #F00;
height: 200px;
float: left;
}
You could simply add display: flex to the parent, .container element:
Updated Example
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
display: flex;
}
Alternatively, you could set the display of the parent, .container element to table, and then set the children elements to display: table-cell. If you want the children elements to respect the width, set table-layout: fixed on the parent element:
Alternative Example Here
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
display: table;
table-layout: fixed;
}
.left {
width: 250px;
height: 200px;
background-color: #0F0;
display: table-cell;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
display: table-cell;
}
Solution
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width:100%;
background-color: #F00;
height: 200px;
}
<div style="width: 100%; display: table; border-collapse: collapse; width: 100%; min-width: 800px; max-width: 1100px;">
<div class="container">
<div class="left">Left div
<br />(fixed to 250px)</div>
<div class="right">Right div
<br />(width fit to blue area left)</div>
</div>
</div>
You can try to remove float:right on the red div :D or
Maybe like this: http://jsfiddle.net/vn84nm30/8/
Used table features ;)
top div : display: table;
container : display: table-row
removed float left
the height is decided by parent :D
Remove float: left from the right element.
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
}
<div style="width: 100%;">
<div class="container">
<div class="left">
Left div<br />(fixed to 250px)
</div>
<div class="right">
Right div<br />(width fit to blue area left)
</div>
</div>
</div>