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>
Related
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.
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 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 am trying to place two divs side by side with 20px margin between them. Divs are inside wrapper, which width is 800px. Left div is 250px and right div is 550px, but of course if I add 20px margin between them, total width is increasing over 800px. Is there any way to force right div width to be 550px - 20px margin?
CSS
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
}
.left {
width: 250px;
height: 300px;
background-color: blue;
float: left;
margin-right: 20px;
}
.right {
width: 550px;
height: 300px;
background-color: red;
float: left;
}
HTML
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
I mean do I have to decrease width manually or is there any better solutions?
jsfiddle: https://jsfiddle.net/ytsvd77f/
Yes you can use calc(550px - 20px) as width of right div.
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
}
.left {
width: 250px;
height: 300px;
background-color: blue;
float: left;
margin-right: 20px;
}
.right {
width: -moz-calc(550px - 20px);
width: -webkit-calc(550px - 20px);
width: -o-calc(550px - 20px);
width: calc(550px - 20px);
height: 300px;
background-color: red;
float: left;
}
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
If you add display:flex in your wrapper it will work perfectly and I guess you will understand better.
Check it out the css.
.wrapper {
max-width: 800px;
height: 400px;
background-color: green;
margin: 0 auto;
display: flex;
}
I need to place the content one below the other from the top and center align it.
I tried making all the rows positioning them absolute and making the
top:20% ,top:40% ,top:60% respectively and margin: 0 auto does not work.So I had to put left percentages for all three rows.
It looks rubbish when I reduce width of browser and when I reduce the height of the browser the divs overlap each other
I do not want overflow:auto or overflow-y:scroll .I want the content to be placed in that 100% height of wrapper and centered perfectly.How to implement this and also suggest me how to do it in media queries ?
HTML
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
CSS
html,body{
height: 100%;
width: 100%;
}
#wrapper{
height: 100%;
width: 100%;
}
#row1{
height: 200px;
width: 600px;
}
#row2{
height: 400px;
width: 800px;
}
#row3{
height: 200px;
width: 500px;
}
Please do like this
html,body{
height: 100%;
width: 100%;
}
body{background: #333;}
#wrapper{
height: 100%;
width: 100%;
display: table;
}
.w1{
display: table-cell;
vertical-align: middle;
}
#row1{
height: 50px;
width: 600px;
background: #fff;
margin: 0 auto;
}
#row2{
height: 100px;
width: 800px;
background: #fff;
margin: 10px auto;
}
#row3{
height: 50px;
width: 500px;
background: #fff;
margin: 0 auto;
}
<div id="wrapper">
<div class="w1">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
</div>
It looks rubbish when I reduce width of browser and when I reduce the
height of the browser the divs overlap each other
Use percent units (or vw) instead of pixels.
I want the content to be placed in that 100% height of wrapper and
centered perfectly
Use flex on the container, with appropriate width and heights on the children.
Example Snippet:
html, body {
box-sizing: border-box;
margin: 0; padding: 0;
height: 100%; width: 100%;
}
#wrapper {
height: 100%; width: 100%;
display: flex; flex-direction: column;
align-items: center; text-align: center;
justify-content: space-around; /* to distribute space evenly around */
}
#wrapper > div { background-color: #ddd; }
#row1 { flex: 0 0 20%; width: 50%; } /* 0 0 means cannot grow cannot shrink */
#row2 { flex: 0 0 10%; width: 80%; }
#row3 { flex: 0 0 40%; width: 65%; }
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
Sample Fiddle: http://jsfiddle.net/j3js87fc/1/
Update:
Alternatively, you could just use appropriate top/bottom margins on the row2 to have differing gaps between rows.
Example 2:
html, body {
box-sizing: border-box;
margin: 0; padding: 0;
height: 100%; width: 100%;
}
#wrapper { height: 100%; width: 100%; }
#wrapper > div { background-color: #ddd; }
#row1 { height: 20%; width: 50%; margin: auto; }
#row2 { height: 10%; width: 80%; margin: 3% auto 7% auto; }
#row3 { height: 40%; width: 65%; margin: auto; }
<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
Sample fiddle: http://jsfiddle.net/j3js87fc/4/
.
Here you go:
http://jsfiddle.net/oh36f1zb/4/
The left:50%; transform: translateX(-50%); does all the trick.