I have three div
div.main = encloses two child div
div.head = uses about 10%~20% of div.main height
div.body = uses about 80%~90% of div.main height
I want div.body to fill the remaining height space left after allocating div.head's height.
I would like to do this with position: relative; as much as possible.
I am using percent values for the height and width and not pixels as screen resolutions may vary. I want it to resize itself automatically depending on the screen resolution of who may see it.
I noticed that if I use pixel values it works but not for percent.
In the following code I have created a main div with color red(just to divide it), and the 2 divs inside it, one head and one body with color yellow and green respectively.
I hope this is what you want -
<html>
<head>
<title>try</title>
<style type="text/css">
.main {
position: relative;
height:100%;
width:100%;
border:5px solid black;
background-color: red;
}
.head{
position: relative;
height:20%;
width:100%;
background-color: yellow;
}
.body{
position: relative;
height:80%;
width:100%;
background-color: green;
}
</style>
</head>
<body>
<div class="main"> //main div having height & width 100%
<div class="head"> //head with color yellow of 20%
</div>
<div class="body"> //head with color yellow of 80%
</div>
</div>
</body>
Position relative won't help you here..it doesn't size things by itself nor is it flexible as you seem to think.
I can think of a couple of way to do this (there may be others).
Table Display
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
main {
height: 250px;
border:1px solid grey;
width: 250px;
display: inline-table;
/* usually just "table"...this is just to put the two tables side by side */
margin: 25px;
}
header {
display: table-row;
background: lightblue;
border-bottom:1px solid red;
}
.body {
display: table-row;
height: 100%;
background: lightgreen;
}
<main>
<header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sed?</p>
</header>
<div class="body ">I'm the body</div>
</main>
<main>
<header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique porro sunt placeat incidunt, quo vero. Assumenda deserunt excepturi fugit incidunt?</p>
</header>
<div class="body ">I'm the body</div>
</main>
Flexbox
body {
text-align: center;
}
main {
height: 250px;
border:1px solid grey;
width: 250px;
display: inline-flex;
/* usually just "flex" ....this is to put the elements side by side */
flex-direction: column;
margin: 10px;
vertical-align: top;
}
header {
background: lightblue;
border-bottom:1px solid red;
}
.body {
flex:1;
background: lightgreen;
}
<main>
<header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sed?</p>
</header>
<div class="body"></div>
</main>
<main>
<header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique porro sunt placeat incidunt, quo vero. Assumenda deserunt excepturi fugit incidunt?</p>
</header>
<div class="body "></div>
</main>
Related
I want make a tribute page like this:
I'm having trouble adding text with a border next to my image. Im only able to add it below the caption but not next to the image (exactly like the tribute page example). I'd like to do this with only html and css
<!DOCTYPE html>
<html lang="en">
<Style>
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#main {
border-style: double;
text-align: center;
}
header {
text-align: center;
}
#image {
border: groove;
}
p {
border: black;
}
</Style>
<header>Crikey, mate</header>
<head>
<title id="tittle">Steve Irwin</title>
</head>
<body>
<div id="img-div">
<img id="image" alt="steve Irwin" src="Steve-Irwin.jpg">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
<main id="main">
<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Irwin">Learn More</a>
</main>
</body>
</html>
Try this. It floats the image to the left and uses clear: both on the following text to ensure it goes below the image.
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#image {
border: groove;
max-width: 300px;
float: left;
}
#img-caption {
font-size: 300px;
}
.clear {
clear: both;
}
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
The html element to use here is the figure element - this allows for an image and related content to be shown and then a caption to be presented that is either the first or last child. All elements can be styled.
In your case - you want to have an image and text positioned horizontally and then the caption below it all. So wrap the image and desired text in a div - apply display: flex to that to get it to be aligned horizontally (no need for floats or clearning floats with flexbox);
Then the figcaption sits below and is as wide as the entire figure.
figure {
background-color: grey;
border: solid 1px black
}
#img-div {
display: flex;
padding: 8px
}
#image {
border: groove;
width: 200px;
}
#img-quote {
flex-grow: 1;
padding: 8px
}
figcaption {
background: white;
padding: 8px;
}
<figure>
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<p id="img-quote">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</p>
</div>
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>
</figure>
Can someone please help me?!
I'm trying to code a PSD file to HTML and CSS, but I'm struggling with one of the sections. Here's an image of what I want to do:
Click Here
The problem is I don't know how to put the image in the timeline line. I tried to add the image in the ::after psuedo, but I don't think this is the right way of doing that.
This is my HTML Code :
<section class="about">
<div class="wrapper">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<div class="container left">
<div class="content">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h5>January 2011<br> Facing Startups Battles</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</section>
This is my CSS code:
.about .wrapper{
padding: 80px 10%;
text-align: center;
position: relative;
}
.about .wrapper::after{
content: '';
position: absolute;
top: 200px;
bottom: 0;
width: 6px;
background: red;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.about .container{
position: relative;
width: 50%;
top: 60px;
margin: 0 0 60px 0;
}
.about .container::after{
content: 'How Can I Add an Image Here in this circle?';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
top: 20px;
right: -104px;
background-color: blue; /* Just because there is no image */
background-image: url(assets/img/about-1.png);
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}
.left{
text-align: right;
}
.right{
text-align: right;
}
.content{
padding: 30px 0px 80px 0px;
}
.left .content{
padding-right: 140px;
}
.right .content{
padding-left: 140px
}
.right{
text-align: left;
left: 50%;
}
.right:after {
left: -104px;
}
I think this is called a timeline, there is a lot of tutorials talking about how to do something like this, but I don't know how to make the images in the timeline line. Can you please help me do this?
Thanks
To build this, you could use css grid layout (guide: https://css-tricks.com/snippets/css/complete-guide-grid/)
Treat each of the content+image as a row in the layout. And each row as a container for a grid.
You can visually break every row down to 3 columns. One column for left-side content, the second one for the image and the third one for right-side content.
Example css grid for a layout like this:
.grid-container {
display: grid;
grid-template-columns: 1fr 10em 1fr;
grid-template-rows: 1fr;
grid-template-areas: "content-left image content-right";
text-align: center;
}
.content-left { grid-area: content-left; background: lightblue; }
.image { grid-area: image; background: lightgreen; }
.content-right { grid-area: content-right; background: lightblue; }
<div class="grid-container">
<div class="content-left">Left content</div>
<div class="image">Image</div>
<div class="content-right">Right content</div>
</div>
(grid generated with: https://grid.layoutit.com/)
To alternate between content on the left and on the right, you can use css even/odd selectors (How can I style even and odd elements?) to set which grid area is used for the element.
Example:
I've built an example of a timeline layout for this answer which you can find at https://codepen.io/hendrysadrak/pen/VwLEraz
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title></title>
</head>
<body>
<section class="about">
<div class="wrapper">
<div>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div id="container">
<div class="row">
<div id="col1" class="col right">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
<div id="col2" class="col"><img class="img" src="assets/img/about-1.png"/></div>
</div>
<div class="row2" >
<div id="col3" class="col"><img class="img" src="assets/img/about-1.png"/></div>
<div id="col4" class="col left">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
in main.css file:
.about .wrapper{
padding: 80px 10%;
text-align: center;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.row {
width: 59%;
margin-right: 41%;
display: flex;
}
.row2 {
width: 59%;
display: flex;
margin-left: 41%;
}
.col {
flex:1;
}
.col.left {
text-align: left;
}
.col.right {
text-align: right;
}
#col2 {
flex-basis: 30%;
}
#col1 {
flex-basis: 70%;
}
#col3 {
flex-basis: 30%;
}
#col4 {
flex-basis: 70%;
}
.img {
margin: 10% 5%;
width: 90%;
border-radius: 50%;
}
#container {
background-image: linear-gradient(lightgrey,lightgrey);
background-size: 2px 100%;
background-repeat: no-repeat;
background-position: center center;
}
put this in assets/img/about-1.png
Used a css template and edited, now between the 3 columns there is a small margin gap which id like to get rid of. tried readjusting the columun sizes but the margin gap still exists. Is there a more simple way I could have achieved the same page, if so how?? Yes im a newbie :P
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #F1C40F;
padding: 20px;
text-align: center;
}
/* Style the footer */
.footer {
background-color: #F1C40F;
padding: 10px;
text-align: center;
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* top, middle and bottom column */
.columntopmiddlebottom {
width: 30%;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 600px) {
.column.side,
.column.middle {
width: 100%;
}
}
.auto-style2 {
text-align: center;
}
}
.auto-style2 {
margin-top: 31px;
}
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row" style="height: 717px">
<div class="columntopmiddlebottom" style="background-color:#F7DC6F;
style=" height: 211px>
<h2>People</h2>
<p style="height: 214px">1</p>
</div>
<div class="columntopmiddlebottom" style="background-color:#F7DC6F;
style=" height: 212px>
<h2 style="height: 21px">2</h2>
<p style="height: 171px">info</p>
</div>
<div class="columntopmiddlebottom" style="background-color:#F7DC6F;
style=" height: 212px>
<h2 style="height: 37px">3</h2>
<p style="height: 193px">info</p>
</div>
</div>
Gaps under and above each column appears, dont want the gaps.
Try this:
.columntopmiddlebottom * {
margin-block-start: 0;
margin-block-end: 0;
}
A usefull trick when writing CSS is using the browsers development tools:
In Google when you right click on an element and press Inspect you can see which CSS is on that element. If you can't find the problem you are looking for you can try pressing CTRL + SHIFT + C and go over the elements to find your problem.
Good luck!
It is about https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
reset margin to hn and p .
* {
box-sizing: border-box;
}
h2,
p {
margin: 0;/* reset margin to avoid collapsing . Note , padding or border on the parent will keep margin inside*/
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #F1C40F;
padding: 20px;
text-align: center;
}
/* Style the footer */
.footer {
background-color: #F1C40F;
padding: 10px;
text-align: center;
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* top, middle and bottom column */
.columntopmiddlebottom {
width: 30%;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 600px) {
.column.side,
.column.middle {
width: 100%;
}
}
.auto-style2 {
text-align: center;
}
}
.auto-style2 {
margin-top: 31px;
}
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row" style="height: 717px">
<div class="columntopmiddlebottom" style="background-color:#F7DC6F;
style=" height: 211px>
<h2>People</h2>
<p style="height: 214px">1</p>
</div>
<div class="columntopmiddlebottom" style="background-color:#F7DC6F;
style=" height: 212px>
<h2 style="height: 21px">2</h2>
<p style="height: 171px">info</p>
</div>
<div class="columntopmiddlebottom" style="background-color:#F7DC6F;
style=" height: 212px>
<h2 style="height: 37px">3</h2>
<p style="height: 193px">info</p>
</div>
</div>
you can use this package https://necolas.github.io/normalize.css/ in css to remove margin and padding for element
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
background-color: #F1C40F;
height: 200px;
text-align: center;
padding: 50px 0;
}
.one {
background-color: #F7DC6F;
height: 200px;
text-align: center;
padding: 50px 0;
}
.two {
background-color: #F1C40F;
height: 200px;
text-align: center;
padding: 50px 0;
}
.three {
background-color: #F7DC6F;
height: 200px;
text-align: center;
padding: 50px 0;
}
.four {
background-color: #F1C40F;
height: 200px;
text-align: center;
padding: 50px 0;
}
footer{
background-color: #F7DC6F;
height: 200px;
text-align: center;
padding: 50px 0;
}
<header>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
</header>
<section class="one">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
</section>
<div class="two">
<h2>Gallery</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
</div>
<article class="three">
<h2>News</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
</article>
<aside class="four">
<h2>Aside NavBar</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
</aside>
<footer >
<h2>Aside NavBar</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eum minus aliquam dolorum sit molestiae architecto.</p>
</footer>
Another simple version using Flexbox.
* {
box-sizing: border-box;
margin: 0;
}
.header {
background-color: #F1C40F;
padding: 20px;
text-align: center;
}
.row {
background-color: #fff;
text-align: center;
display: flex;
flex-direction: row;
}
.column {
flex-grow: 1;
padding: 10px;
background-color:#F7DC6F;
height: 200px
}
#media screen and (max-width: 800px) {
.row {
flex-direction: column;
}
}
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row">
<div class="column">
<h2>People</h2>
<p>1</p>
</div>
<div class="column">
<h2>2</h2>
<p>info</p>
</div>
<div class="column">
<h2>3</h2>
<p>info</p>
</div>
</div>
I am trying to create a horizontally scrolling parent div with 4 other child divs inside it. after attempting this I've got stuck on a problem, the parent div gives me a scroll bar that is too big to go through all 4 of the smaller child divs. then it gives me a second scroll bar at the bottom of the page allowing me to scroll over fully but doing this moves the entire page not just the parent div.
see code here https://jsfiddle.net/callum2321/8jq4bmxk/
slider {
top: 250px;
width: 400%;
overflow-x: scroll;
-webkit-overflow-scrolling: normal;
white-space: nowrap;
max-height: 80%;
}
box {
display: inline-block;
white-space: nowrap;
margin: 3% 3%;
width: 20%;
height: 450px;
border: 1px solid white;
}
.box:hover {
box-shadow: 4px 4px 14px 14px darkred;
border-radius: 2px;
}
.col-1 {max-width: 100%; max-height: 45%; background-color:
purple;}
.col-2 {width: 100%; height: 55%; background-color: purple;}
#boxA-pic {
max-height: 40%;
max-width: 100%;
object-fit: cover;
}
#boxA-info {
overflow-y: scroll;
}
#boxA-info h1 {
text-align: center;
color: white;
}
#boxA-info p {
white-space: normal;
}
#boxB-pic {
max-height: 40%;
max-width: 100%;
object-fit: fill;
}
#boxB-info {
overflow-y: scroll;
}
#boxB-info h1 {
text-align: center;
color: white;
}
#boxB-info p {
white-space: normal;
}
#boxC-pic img{
max-height: 40%;
max-width: 100%;
object-fit: fill;
}
#boxC-info {
overflow-y: scroll;
}
#boxC-info h1 {
text-align: center;
color: white;
}
#boxC-info p {
white-space: normal;
}
#boxD-pic img {
max-height: 40%;
max-width: 100%;
object-fit: fill;
}
#boxD-info {
overflow-y: scroll;
}
#boxD-info h1 {
text-align: center;
color: white;
}
#boxD-info p {
white-space: normal;
Yes it is more or less easy to code with flexbox:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container" style="overflow: auto;">
<div>AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>
<div>DDDDD</div>
<div>EEEEE</div>
<div>FFFFF</div>
<div>GGGGG</div>
<div>HHHHH</div>
</div>
</body>
</html>
I've created this super simple approach here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.scroll {
overflow-x: auto;
}
.scroll__container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.scroll__box {
min-width: 90%;
margin-right: 2%;
margin-bottom: 0;
}
</style>
<section class="scroll">
<div class="scroll__container">
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
<div class="scroll__box">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam aliquam possimus laudantium delectus similique velit facere temporibus, nisi praesentium veniam!</p>
</div>
</div>
</section>
</body>
</html>
[Codepen reference](https://codepen.io/proochster/pen/RzgPNQ?editors=1100)
Update Please note kukkuz's answer is a nice hack but it is NOT working 100% if the first box becomes more content see this fiddle then the center box starts moving to the right
What I need is something like this:
Where:
First box "Lorem ipsumd dolor sit amet" has always to be left positioned
Second box "center content" has always to be centered
Third box "float left after center" has to be right after the center box
All of those boxes will have variable content length so it can be less content then shown in picture or much more. For every single of those 3 tomato colored boxes
This is what I have
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
background-color: powderblue;
}
.flex-item {
background: tomato;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
}
<div class="flex-container">
<div class="flex-item">Lorem ipsumd dolor sit amet</div>
<div class="flex-item">center content</div>
<div class="flex-item">float left after center</div>
</div>
Now not sure how to achieve the desired result. Is flex-box the right way to go or should I use display-table? I'm 97% sure it doesn't work with floating. How can I achieve the desired result?
Update from question in comments
Q: suppose the first box has large content such that the second box will overlap the first, if it is at the center... how do you look to
handle that?
A: probably with overflow hidden and z-index. It will be a toolbar underneath a gallery. Left box will describe something of the image,
middle box is the gallery navigation, and the right box will display
some "helper" text. so the gallery navigation is the most important
which must always be visible (and centered)
I certainly miss justify-self but you can try a hack: add margin-right: auto to the first and third flex-items - see demo below:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
background-color: powderblue;
}
.flex-item {
background: tomato;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
}
.auto {
margin-right: auto;
}
<div class="flex-container">
<div class="flex-item auto">Lorem ipsumd dolor sit amet</div>
<div class="flex-item">center content</div>
<div class="flex-item auto">float left after center</div>
</div>
I think this would be a solution. But I needed an auxiliar wrapper for the side elements.
You cant set a minimum width (arbitrary) on the side containers. I have set this to 10px, just to give the idea.
.flex-container {
display: flex;
overflow: hidden;
}
.side {
flex: 10px 1 0;
background-color: powderblue;
}
.center {
flex: auto 0 0;
background: tomato;
}
.side div {
background: tomato;
display: inline-block;
}
.flex-item {
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
}
<div class="flex-container">
<div class="flex-item side">
<div>Lorem ipsumd dolor sit amet</div>
</div>
<div class="flex-item center">center content</div>
<div class="flex-item side">
<div>float left after center</div>
</div>
</div>
Not sure if using display-table might be the better solution for my problem. It seems to look good with all different content lengths. Not sure how the
max-width: 10px;
works on the .table-cell but seems to do the job..
.display-table {
display: table;
height: 70px;
background-color: powderblue;
width: 100%;
margin: 10px 0;
}
.table-row {
display: table-row;
}
.table-cell {
border: solid 1px black;
display: table-cell;
text-align: center;
vertical-align: middle;
background: tomato;
max-width: 10px;
}
.table-cell:first-child,
.table-cell:last-child {
text-align: left;
}
<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsumd dolor sit amet</div>
<div class="table-cell">center content</div>
<div class="table-cell">float left after center</div>
</div>
</div>
<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsum dolor sit amet</div>
<div class="table-cell">center content center content center content</div>
<div class="table-cell">float left after center</div>
</div>
</div>
<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
<div class="table-cell">center content</div>
<div class="table-cell">float left after center</div>
</div>
</div>
<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
<div class="table-cell">center</div>
<div class="table-cell">float left after center float left after center periores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet
</div>
</div>
I'm don't think it is possible with CSS alone to suit all your conditions and without adding a wrapper div - using any method.
You can get pretty close using a combination of position:absolute and margin-left except that the middle element won't be exactly in the centre.
.container {
background-color: powderblue;
margin: 40px;
white-space: nowrap;
}
.item1, .item2, .item3 {
background: tomato;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
display: inline-block;
position: relative;
z-index: 1;
}
.item1 {
position: absolute;
background: green;
z-index: 0;
}
.item2 {
margin-left: 50%;
//transform: translateX(-50%); /* will center, but then no way to pull item3 back */
z-index:1;
}
.item3 {
z-index:1;
}
<div class="container">
<div class="item1"> Lorem ipsumd dolor heth ehe h </div>
<div class="item2">center content</div>
<div class="item3">float left after center</div>
</div>
position the first item with a lower z-index - incase the first item is really long
<div class="container">
<div class="item1"> Lorem ipsumd dolor sit amet fgfdg theth ehe h Lorem ipsumd dolor sit amet fgfdg theth ehe h </div>
<div class="item2">center content</div>
<div class="item3">float left after center</div>
</div>
Just add this to your CSS
.flex-item:nth-of-type(1),.flex-item:nth-of-type(3)
{
margin-right:auto;
}
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
background-color: powderblue;
}
.flex-item:nth-of-type(1),.flex-item:nth-of-type(3)
{
margin-right:auto;
}
.flex-item {
background: tomato;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
}
<div class="flex-container">
<div class="flex-item">Lorem ipsumd dolor sit amet</div>
<div class="flex-item">center content</div>
<div class="flex-item">float left after center</div>
</div>