I am struggling to make my .centerIt divs be centered vertically, and to have the .div1 stay scrollable after I add more .centerIt divs into the column.
The .centerIt divs have to keep their height: 20px and not squeeze after I add more of them.
JSFiddle example
.container {
display: flex;
background: red;
width: 300px;
height: 300px;
}
.div1 {
background: yellow;
height: 90%;
width: 27%;
margin: 5px;
overflow-y: scroll;
}
.div2 {
background: blue;
height: 90%;
width: 74%;
margin: 5px;
}
.centerIt {
background: green;
width: 100%;
border: solid 1px black;
height: 20px;
color: green;
}
<div class="container">
<div class="div1">
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
</div>
<div class="div2"></div>
</div>
Just try to add min-height: 20px to .centerIt instead of height and
display: flex;
flex-direction: column;
justify-content: center;
to .div1 styles, should do it.
JSFiddle fork
Related
I've a simple DIV-Container for the main-content of the webpage. I.E
#main { width: 50%; margin: 0 auto; }
Now I would like to fix another container, right and fixed at the top of the #main-Container. See Screenshot:
You can do something like the following using CSS Flex:
.flex-container {
display: flex;
width: calc(66.66% - 20px);
float: right;
}
.main {
flex: 1;
color: white;
text-align: center;
margin-right: 33.33%;
}
.main:first-child {
width: 50%;
margin: 0 auto;
margin-right: 10px;
}
.red {
background-color: red;
height: 200px;
line-height: 200px;
}
.green {
background-color: green;
height: 100px;
line-height: 100px;
max-width: 15%;
}
<div class="flex-container">
<div class="main red">
Main content
</div>
<div class="main green">
?
</div>
</div>
Add the green div inside the centered div and style it.
<div id="main" style="position:relative;">
<div id="green_div" style="position:absolute; left:100%; margin-left:20px; background:green;">
<div>
</div>
My goal: A responsive navbar where the logo is always in the middle and an element
is always on the left. Depending on the context (page dependent), buttons can be
displayed in the right area or not.
My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).
The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.
Question: What other possibilities are there and what possibilities would resolve this "width" dependency?
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
width:20%;
background: green;
}
.header-middle {
width:34%;
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
width:46%;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
flex-grow: 1;
background: green;
}
.header-middle {
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
flex-grow: 1;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn :
Centering brand logo in Bootstrap Navbar
Based on your comments, I would suggest the following code as a simple solution.
I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.
#app {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
header {
height: 80px;
display: flex;
justify-content: space-between;
}
.header-left {
width: 20%;
background: green;
}
.header-middle {
width: 34%;
background: gray;
display: flex;
justify-content: flex-end;
}
.header-right {
width: 46%;
background: green;
}
.logo {
background-color: red;
width: 80px;
height: 80px;
text-align: center;
font-size: 70px;
max-width: 80px;
}
.controller {
width: 50%;
background: black;
color: white;
text-align: center;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div class="controller">Controller Div 50%</div>
</div>
</div>
A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.
* {
margin: 0;
padding: 0;
}
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
.header {
display: flex;
justify-content: space-between;
height: 80px;
background: yellow;
position: relative;
}
.header-left {
background-color: green;
width: 20%
}
.header-right {
background-color: green;
width: 44%;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;
font-size:70px;
position: absolute;
left: calc(50% - calc(80px / 2));
}
<div id="app">
<div class="header">
<div class="header-left">left</div>
<div class="logo">X</div>
<div class="header-right">right</div>
</div>
<div style="width:50%; background: black;">Controller Div 50%</div>
</div>
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
I want to make two div inside other div. But the second(green) div is passing the size of the main(black). I tried to set the height to 100%, but something happens that is going beyond the size of the main box, does anyone have any solutions?
.block {
width: 300px;
height: 200px;
background: black;
}
.box1 {
width: 200px;
height: 50px;
background: red;
vertical-align: top;
margin: auto;
}
.box2 {
width: 200px;
height: 100%;
background: green;
margin: auto
}
<div class="block">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
If you set child's height to 100% then the height of the parent will be inherited. If you are looking for an option where the 2nd box (green) fill the remaining space leftover by 1st box(red)
.block {
width: 300px;
height: 200px;
background: black;
display: flex;
flex-direction: column;
align-items: center;
}
.box1 {
width: 200px;
height: 50px;
background: red;
vertical-align: top;
}
.box2 {
flex: 1;
width: 200px;
background: green;
}
<div class="block">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
I am using Flex and there is no need to use overflow: hidden
You should add the overflow: hidden; to the main black box, just like the below snippet. This will make the overflow clipped.
.block {
width: 300px;
height: 200px;
background: black;
overflow: hidden;
}
.box1 {
width: 200px;
height: 50px;
background: red;
margin: auto;
}
.box2 {
width: 200px;
height: 100%;
background: green;
margin: auto;
}
<div class="block">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
But if you don't want to get rid of the remaining piece of the second box, you can do it with flexbox also. This will not trim the green box but instead, it will resize it to make sure the green box will remain in the parent black box.
.block {
width: 300px;
height: 200px;
background: black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box1 {
width: 200px;
height: 50px;
background: red;
}
.box2 {
width: 200px;
height: 100%;
background: green;
}
<div class="block">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
NOTE: In the flexbox version, you also won't need to use margin: auto; in the child boxes, because in the flexbox column direction align-items: center; will take care of child positions with the available attributes it gave to us.
I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.
I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.
Simplified version of my HTML:
<body>
<div class="container">
<div class="main">
<h1>This is the main content area</h1>
</div>
<div class="right pull-right">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
</body>
The CSS:
body,html {
height: 100%;
background-color: #aaa;
}
body {
position: relative;
}
.main {
display: inline-block;
}
.container {
height: 100%;
}
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: 100%;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
.content {
height: 300px;
min-height: 300px;
margin: 10px 10px;
background-color: #ccc;
border: 1px solid #000;
}
Change your .right class to have height: auto;
It will size itself to fit with its content.
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: auto;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
http://codepen.io/smlariviere/pen/WrWgxQ