I have a html structure like this and some basic style
.container {
display: block;
width: auto;
/* this is must */
height: auto;
/* this is must */
max-width: 300px;
}
.container .row {
display: flex;
width: 100%;
height: auto;
}
.container .row .left {
display: inline-block;
width: 100px;
height: auto;
}
.container .row .right {
display: inline-block;
width: auto;
height: auto;
}
<div class="container">
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
The style may not working, I only pasted the basic part of it.
What I want to achieve is, the parent element has a max-width, it contains multiple rows, each row has two elements, 'left' and 'right'. I give a fixed width to 'left' element, and a min-width/max-width to 'right' element. I would like the width of the right element auto grow as the content grow until the max-width, but if the content is short, the right element shall also shrink.
I tried table and flex box, but no luck. Thanks for any help
The problem is because you have to specify the max-width to the .right class.
1) The overall container's max-width:300px and left one's width: is 100px, so the remaining 200px; you can give it to right row.
2) Have added background for better understanding.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.container {
display: block;
width: auto; /* this is must */
height: auto; /* this is must */
max-width: 300px;
}
.container .row{
display: flex;
width: 100%;
height: auto;
background-color:Red;
}
.container .row .left{
display: inline-block;
width: 100px;
background-color:yellow;
}
.container .row .right{
display: inline-block;
height: auto;
background-color:green;
max-width: 200px;
overflow:hidden;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="left">qweqweqwe</div>
<div class="right">qweqweqwew<p>afdllssssssssdddddddddssssssssss</p><p>asdasdasdadsas</p></div>
</div>
<div class="row">
<div class="left">qweqweqwe</div>
<div class="right">qweqweqwe</div>
</div>
<div class="row">
<div class="left">qweqweqw</div>
<div class="right">qweqweqweqwe</div>
</div>
</div>
</body>
</html>
Find the codepen sample here and check it with your requirement. Also, let me know if there is something that you want to get from.
.container .row{
display: flex;
width: 100%;
height: auto;
}
.container .row .left{
display: inline-block;
width: 100px;
height: auto;
}
.container .row .right{
display: inline-block;
width: auto;
height: auto;
max-width: 150px;
overflow: hidden;
}
Add display: flex to your .row class and set min-width: 100px to .right - see a working jsfiddle here: https://jsfiddle.net/o3o9j4za/1/
<div class="container">
<div class="row">
<div class="left">1234</div>
<div class="right">4312</div>
</div>
<div class="row">
<div class="left">1235</div>
<div class="right">qweqwereqwr</div>
</div>
<div class="row">
<div class="left">5342</div>
<div class="right">3g43g3g3g</div>
</div>
.container {
display: block;
width: auto; /* this is must */
height: auto; /* this is must */
max-width: 300px;
}
.container .row{
width: 100%;
height: auto;
display:flex;
}
.container .row .left{
display: inline-block;
height: auto;
width: 100px;
background-color:#ff0;
}
.container .row .right{
display: inline-block;
width: auto;
min-width: 100px;
height: auto;
background-color:#f0f;
}
Note, that your flex container (.row) is affected by the max-width of .container.
(Edit: misread a bit - should be like you want it now?)
How about this flexbox solution? I think it comes closest to what you are looking for:
<div class="container">
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
</div>
.container {
padding: 2px;
border: 1px solid green;
max-width: 300px;
}
.row {
display: flex;
padding: 2px;
border: 1px solid red;
max-width: 300px;
}
.left {
padding: 2px;
border: 1px solid blue;
width: 100px;
}
.right {
padding: 2px;
border: 1px solid purple;
width: 180px;
}
And the fiddle:
https://jsfiddle.net/xr7ebmsz/
I guess you can try this one for your class "right"
.right{
width:calc(100% - 100px);
}
Related
This is sort of a two in problem.
I have a body with height: 100vh similar to how my example is in the jsFiddle (except in there I put 20vh.
I have a similar structure as this, where the innerRight container can be quite large compared to the rest of the content, and only that conatiner is to obtain it's own scroll bar. I sort of got this working in my main project, but the outer container (similar to how I displayed outer in the example) still expands past the the parents height container main. Be it 100vh, or 20vh it doesn't matter it doesn't stay within with display:flex.
.main {
height: 20vh;
}
.outer {
display: flex;
overflow: hidden;
}
.innerLeft {
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width: 100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
Can you please check the below code? Hope it will work for you.
You have to set height:100vh; in .main and set width:calc(100% - 50px); to .innerRight.
Remove height from innerleft and innerright element.
Please refer to this link: https://jsfiddle.net/yudizsolutions/9Lsyzg64/1/
body {
margin: 0;
}
.main {
height: 100vh;
}
.outer {
display: flex;
height: calc(100vh - 19px);
overflow: hidden;
}
.innerLeft {
width: 50px;
background-color: green;
}
.innerRight {
overflow: auto;
background-color: red;
width: calc(100% - 50px);
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
You need to set height to outer class.
.main {
height: 20vh;
}
.outer {
display: flex;
height: 200px;
overflow:hidden;
}
.innerLeft {
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width:100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
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
I am trying to create three parallel columns of the same width (33.3%) and height (100%). In each column, I want to split it vertically into 80% - 20% ratios. The code below seems straight forward, but I couldn't achieve that. If someone could advise?
Note that I keep the flex and wrap stuff in the inner parts because I will be adding elements into them later. Thanks.
#outer-container {
height: 500px;
width: 100%;
}
#left-container, #mid-container, #right-container {
background-color: #495052;
width: 33.3%;
height: 100%;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
overflow: auto;
}
#left-top-container, #mid-top-container, #right-top-container {
display: flex;
flex-wrap: wrap;
background-color: #495052;
width: 100%;
height: 80%;
overflow: auto;
}
#left-bottom-container, #mid-bottom-container, #mid-bottom-container {
display: flex;
flex-wrap: wrap;
background-color: yellow;
width: 100%;
height: 20%;
border: 1px solid;
border-color: #cae329;
overflow: auto;
}
<div id="outer-container">
<div id="left-container">
<div id="left-top-container">
</div>
<div id="left-bottom-container">
</div>
</div>
<div id="mid-container">
<div id=mid-top-container">
</div>
<div id="mid-bottom-container">
</div>
</div>
<div id="right-container">
<div id="right-top-container">
</div>
<div id="right-bottom-container">
</div>
</div>
</div>
You've got a few typos in your code. Notably a missing quotation mark on one of your ids in your HTML (mid-top-container), and a duplicate rule for #mid-bottom-container instead of #right-bottom-container.
Also, your columns are still display:block, so they will not stay on the same line. I changed them to display: inline-block; to fix that. Their widths should be calc(100% / 3) to make them exactly one third of the width. They need box-sizing: border-box to make the padding/border part of the width figure, and finally, the parent #outer-container needs font-size:0 to remove any white space between the columns.
#outer-container {
height: 500px;
width: 100%;
font-size: 0;
}
#left-container, #mid-container, #right-container {
display: inline-block;
background-color: #495052;
width: calc(100% / 3);
height: 100%;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
overflow: auto;
box-sizing: border-box;
}
#left-top-container, #mid-top-container, #right-top-container {
display: flex;
flex-wrap: wrap;
background-color: #495052;
width: 100%;
height: 80%;
overflow: auto;
}
#left-bottom-container, #mid-bottom-container, #right-bottom-container {
display: flex;
flex-wrap: wrap;
background-color: yellow;
width: 100%;
height: 20%;
border: 1px solid;
border-color: #cae329;
overflow: auto;
}
<div id="outer-container">
<div id="left-container">
<div id="left-top-container">
</div>
<div id="left-bottom-container">
</div>
</div>
<div id="mid-container">
<div id="mid-top-container">
</div>
<div id="mid-bottom-container">
</div>
</div>
<div id="right-container">
<div id="right-top-container">
</div>
<div id="right-bottom-container">
</div>
</div>
</div>
Though there are some Typos. But some un-necessary ids and CSS is also present in the Code.
You may try CSS-GRIDS and Flexbox (in a better way) to achieve the same with much lesser code so that the performance of the app increases.
Have removed all extra selectors.
CODEPEN: https://codepen.io/emmeiWhite/pen/RwGyBLO
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#outer-container {
height: 500px;
display:grid;
grid-template-columns:repeat(3,1fr);
width: 100%;
}
.column-wrapper{
display:flex;
flex-direction:column;
background-color: #495052;
border: 1px solid;
border-color: #cae329; /*Bright citrus*/
}
.top-section{
height:80%;
}
<div id="outer-container">
<div class="column-wrapper">
<div class="top-section">
left top
</div>
<div>
bottom
</div>
</div>
<div class="column-wrapper">
<div class="top-section">
mid-top
</div>
<div>
mid-bottom
</div>
</div>
<div class="column-wrapper">
<div class="top-section">
right-top
</div>
<div>
right-bottom
</div>
</div>
</div>
When I try to do the responsive mode, adjusting the 3 div
from horizontal to vertical, they don't align vertically and centered.
Here you can see my code; https://codepen.io/josemb94/pen/bXaeYp
<center>
<div id="container">
<div id="left">
<h2>11111</h2>
</div>
<div id="right">
<h2>333333</h2>
</div>
<div id="center">
<h2>22222</h2>
</div>
</div>
</center>
#container {
width: 57.5%;
text-align: center;
}
#left {
float: left;
width: 200px;
height: 120px;
border-style: solid;
}
#center {
display: inline-block;
margin: 0 auto;
width: 200px;
height: 120px;
border-style: solid;
}
#right {
float: right;
width: 200px;
height: 120px;
border-style: solid;
}
I tried 3 or 4 css styles but any works...
My result: https://i.imgur.com/SW1xek9.png
My expect: https://i.imgur.com/Afjn4YO.png
Instead of floating your #left and #right elements, instead give them display: block and a margin of 0 auto:
#container {
width: 57.5%;
text-align: center;
}
#left {
display: block;
margin: 0 auto;
width: 200px;
height: 120px;
border-style: solid;
}
#center {
display: inline-block;
margin: 0 auto;
width: 200px;
height: 120px;
border-style: solid;
}
#right {
display: inline-block;
margin: 0 auto;
width: 200px;
height: 120px;
border-style: solid;
}
<div id="container">
<div id="left">
<h2>11111</h2>
</div>
<div id="right">
<h2>333333</h2>
</div>
<div id="center">
<h2>22222</h2>
</div>
</div>
Now all three of your child elements have the same styles, so you can simply the CSS as follows:
#container {
width: 57.5%;
text-align: center;
}
#left, #center, #right {
display: block;
margin: 0 auto;
width: 200px;
height: 120px;
border-style: solid;
}
<div id="container">
<div id="left">
<h2>11111</h2>
</div>
<div id="right">
<h2>333333</h2>
</div>
<div id="center">
<h2>22222</h2>
</div>
</div>
And you can simplify this even further with the child combinator selector (>), eliminating the need for any IDs or classes on the HTML elements:
#container {
width: 57.5%;
text-align: center;
}
#container > div {
display: block;
margin: 0 auto;
width: 200px;
height: 120px;
border-style: solid;
}
<div id="container">
<div>
<h2>11111</h2>
</div>
<div>
<h2>333333</h2>
</div>
<div>
<h2>22222</h2>
</div>
</div>
Note that the <center> tag is not supported in HTML5, so I have removed it in the above examples.
Also note that you could opt for display: inline-block instead, which would allow the elements to sit next to one another, provided there is enough width in the #container to contain them.
You can use a grid layout and set the column template in a media query depending on your requirement.
#container {
width: 100%;
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
width: 200px;
height: 120px;
border-style: solid;
justify-self: center;
}
#media only screen and (max-width: 600px) {
#container {
grid-template-columns: 1fr;
}
}
<div id="container">
<div id="left" class="item">
<h2>11111</h2>
</div>
<div id="right" class="item">
<h2>333333</h2>
</div>
<div id="center" class="item">
<h2>22222</h2>
</div>
</div>
.row {
width: 100%;
height: 150px;
}
.col {
display: inline-block;
margin: 0 auto;
height: 150px;
}
#left {
float: left;
width: 30%;
height: 150px;
background-color: red;
}
#center {
width: 40%;
height: 100%;
background-color: green;
}
#right {
float: right;
width: 30%;
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
I have read so many posts but still cannot make this work. I am missing something. I want to have these three divs in my header. The center div should be centered in the middle of the page and it will be a image. The other divs will be on the left and right and a combination of text and images as desired. I want all 3 divs to have their content vertically and horizontally centered. How do I do this and maintain some responsiveness for users on div browser and screen sizes. Responsiveness is secondary issue, getting the content aligned is the main challange. Thanks,
You can use display: table for row and display: table-cell for columns
.row {
width: 100%;
height: 150px;
display: table;
}
.col {
width: 30%;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left {
background-color: red;
}
#center {
width: 40%;
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
You could use CSS3 flexbox for it:
.row, .col {
display: flex;
justify-content: center;
align-items: center;
}
.col {
height: 200px;
flex: 1 100%;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
JSFiddle