I have a layout which uses flexbox to position a main content section and a sidebar element beside each other, with justify-content: space-between for consistent spacing within a container, however I need the sidebar on the right to also scroll down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
Example pen: https://codepen.io/StyleMeLikeOneOfYourFrenchGirls/pen/BazQOLj
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
/*position: fixed;*/
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
I understand that fixed removes the element from document flow, and thus eliminates the simplicity of the flex layout and the ability to 'contain' something within it's parent element.
I've been able to achieve something close to what I want, but it requires specific values for different viewport widths (e.g. using Bootstrap's offset classes, transform: translateX() or various combinations of margins). These methods are messy though, and don't provide a consistent solution to keeping the sidebar aligned with the edge of the parent container.
Is there a simpler/more elegant solution to this problem?
You can use position: sticky;. It respects the flex and has a fixed purpose.
DEMO:
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
position: -webkit-sticky;
position: sticky;
top: 0;
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
Please have a look...
body {
margin: 0;
}
.container {
width: 1000px;
display: block;
margin: 0 auto;
}
.content {
background: #999;
height: 100vh;
overflow: auto;
display: flex;
}
.leftContent {
display: flex;
width: calc( 100% - 300px );
}
.rightSidebar {
position: absolute;
right: calc(50% - 500px);
background: #666;
height: 100vh;
width: 300px;
overflow: auto;
}
<div class="container">
<div class="content">
<div class="leftContent">
a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a a a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a aa<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<div class="rightSidebar">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
</div>
</div>
</div>
Here is a try with minimum impact on your code.
The setup you have limits a bit the options you have, but I think below Pen would be a nice workaround.
.left-content {
height: 1000px;
width: 100%;
max-width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 100%;
max-width: 15%;
background-color: yellow;
position: fixed;
right: 20%;
}
CodePen
Sidebar on the right hand side scrolls down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
Related
I'm a complete noob at css and I'm trying to learn, but I've hit a wall. I have a div container with 2 divs inside of it. I want to be able to make the left div resize slower than the right div.
EX: Fullscreen
----|--------
EX: window shrunk
---|-----
I'd like the right div to shrink to a minimum of 200px before the left div starts to shrink.
Here's what I have so far but It's not working
.container{
position: relative;
border: 3px solid black;
border-radius: 10px;
height: 60px;
max-width: 900px;
min-width: 400px;
margin: 10px;
}
.left{
position: absolute;
height: inherit;
max-width: 200px;
min-width: 100;
float: left;
}
.right{
position: absolute;
height: inherit;
max-width: 900px;
min-width: 400px;
left: 200px;
}
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
I think the best way to do this is using flexbox and adding max-width on your left div and min-width on your right.
This is a great guide for all things flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and the MDN link for full specs.
.container {
display: flex;
width: 100%;
}
.left {
flex: 1 1 0;
height: 50px;
background: green;
max-width: 200px;
}
.right {
flex: 1 1 0;
height: 50px;
background: red;
min-width: 200px;
}
<div class='container'>
<div class='left'></div>
<div class='right'></div>
</div>
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I have a current issue in my current project, where i have an area in which i want to center some text. This text can be different from each use of the area.
This part i have fully understood, but i want to place another piece of text, exactly in the center of the remaining space between the end of the first text and the end of the area.
How would i structure my css and html to make this possible?
The image below should help display what it is, that i want to do:
html,
body {
height: 100%;
text-align: center;
}
#left {
width: 200px;
display: inline-block;
background: #f00;
height: 200px;
justify-content: center;
}
#right {
display: inline-block;
background: #0f0;
height: 200px;
}
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
Edit:
Sorry about not including code
An attempt i took: http://jsfiddle.net/5jRaY/298/
I get the red block to fit as wanted, other than the div should wrap the container. My issue is that i can't get the green box to fill the remaining space of the page.
You can try a different layout. This is what I will use:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: table;
width: 100%;
text-align: center;
}
#one,
#two,
#three {
display: table-cell;
width: 33.333%;
}
#one {
width: 200px;
height: 200px;
background: white; /*Change color to see it*/
}
#two {
background: red;
height: 200px;
}
#three {
height: 200px;
background: green;
}
<div id="wrapper">
<div id="one"></div>
<div id="two">CONTENT</div>
<div id="three">Other content</div>
</div>
Let me know if it works for you!
Hope this helps:
#container {
height: 200px;
text-align: center;
position: relative;
}
#left {
width: 200px;
margin: auto;
height: 100%;
background: #f00;
}
#right {
top: 0;
right: 0;
bottom: 0;
background: #0f0;
position: absolute;
width: calc(50% - 100px); /* 100px is 50% of #left */
}
<div id="container">
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
</div>
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
So I'm trying to accomplish the following:
I've got a fullwidth/set-height toolbar along top, with flex-grow: 0 and a second container below with flex-grow: 1. This seems to work until I throw in the two scrollable containers that stick to the right of the application.
I can't seem to get the two "Scrollable" areas to do something similar to height: 50%; overflow: hidden; overflow-y: scroll.
Any ideas on how to accomplish this layout with Flexbox?
Here is an example
JS Fiddle
And here is the example of html and css
HTML
<div class="wrapper">
<header> This is my header</header>
<div class="boxMain">main</div>
<div class="side">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
</div>
</div>
CSS
header {
min-height: 40px;
background: pink;
}
.wrapper {
width: 100%;
background: black;
}
.side {
width: 30%;
height: 375px;
float: right;
}
.boxMain {
width: 70%;
height: 300px;
background: red;
display: inline-block;
}
.box1 {
width: 100%;
background: yellow;
height: 40%;
}
.box2 {
width: 100%;
background: blue;
height: 40%;
}
And a picture for reference