I'm having difficulty aligning texts , i want the texts on the left side of the div & the image on the right also centered equal from the top . I have tried justify-content and text-align but they dont give the results i need , i'm using css grid also .
here is the code in question
/*this is just the css grid stuff*/
.contain{
display: grid;
grid-template-columns: repeat(9, minmax(120px, 1fr)) ;
text-align: center;
justify-content: center;
grid-template-rows: minmax(50px , auto);
grid-template-areas:
"s content2 content2 content2 content2 content2 content2 content2 empty2";
}
/* Here is the code */
.contentc{
background-color: white;
border-radius: 20px;
padding: 40px;
width: 100%;
grid-area: content2;
}
.text3{
margin:auto;
color: black;
}
.para3{
color: black;
margin: auto;
}
<div class="contain">
<div class= "contentc">
<img class="img-3" src="Use Any Image" >
<h2 class="text3">Twitter Clone </h2>
<p class="para3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione itaque cupiditate porro ipsam quod, fugit reprehenderit autem architecto aliquam harum.</p>
</div>
</div>
I would encourage you to learn flex-box, it makes grid outdated.
here is working code for you. this works great on my machine.
Don't forget you can nest flexboxes too which is how i made this work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.contentc {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-content: center;
}
#text {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
</style>
</head>
<body>
<div class="contain">
<div class="contentc">
<img class="img-3" src="http://interactive.nydailynews.com/2016/05/simpsons-quiz/img/simp1.jpg" >
<div id="text">
<h2 class="text3">Twitter Clone </h2>
<p class="para3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione itaque cupiditate porro ipsam quod, fugit reprehenderit autem architecto aliquam harum.</p>
</div>
</div>
</div>
</body>
</html>
sorry if my answer isn't that helpful but I hope it can in someway.
What I propose is you try to think more simple for the CSS as if all you want is for the text and images to be in certain positions then this code might be up your alley:
.para3 {display:inline; text-align: top}
.img-3 {float: right}
Hope it can contribute somewhat to helping you solve this problem.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 7 months ago.
I have a div with grid layout, with several divs inside. I want the divs inside the grid to be full-height, and I want the content of the divs inside the grid to be centered vertically. I already looked all over the place for a solution, but found none that worked.
So far, I've tried using the justify-content and align-items, but they are not doing what I want.
This is what I've tried:
.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
justify-content: center;
align-items: center;
}
.one {
flex: 1;
}
.two {
flex: 1;
justify-content: center;
align-items: center;
vertical-align: center;
}
<div class="wrapper">
<div class="card one">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
<div class="card two">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>
Any input is greatly appreciated!
Thanks! :)
If I am not mistaken it should be so.
Just on the "card" class:
display: flex;
align-items: center;
Adding a div inside will put it in the center.
.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
flex: 1;
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="card">
<div class="inside">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
</div>
<div class="card">
<div class="inside">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>
</div>
Like this? It messed up the look of your h2 but that can easily be fixed. Your instructions said header and the text aligned vertically so I assume that's what you want? Also the default direction for display flex is row, so there's no need to specify. Just a tip for cleaner code.
.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.one {
flex: 1;
}
.two {
flex: 1;
color: red;
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="card one">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
<div class="card two">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>
enter image description here
*this should work
.p-grid {
display: flex;
flex-wrap: wrap;
}
.p-align-center {
align-items: center;
}
.vertical-container {
margin: 0;
height: 200px;
background: #efefef;
border-radius: 4px;
}
<h3>Vertical Alignment - Center</h3>
<div class="p-grid p-align-center vertical-container">
<div class="p-col">
<div class="box">4</div>
</div>
</div>
I hope this will help you. You forgot to add display: flex; to your cards, also when you add flex and you want to have your content in a column layout you have to add flex-direction: column; (row is the standard option)
.wrapper {
display: flex;
flex-direction: row;
}
.card {
background-color: beige;
border: 1px solid rgb(148, 148, 109);
border-radius: 5%;
padding: 10px 15px;
box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
justify-content: center;
align-items: start;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="card one">
<h2>Card 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
<h4>Item 3 just for content.</h4>
</div>
<div class="card two">
<h2>Card 2</h2>
<p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
</div>
</div>
I want to make the part of my site centered,there is one img and text putted in square,but also it should be responsive, here is my css and html codes:
#part1{
padding-bottom:100px;
margin:auto;
overflow:hidden;
width:80%;
}
#part1 h1{
text-align:center;
font-size:250%;
padding-top:35px;
}
#part1 p{
text-align:center;
font-size:110%;
padding:30px;
background-color:#F0F8FF;
margin-top:60px;
width: 40%;
height: 60%;
float:left;
}
#part2 h1{
text-align:center;
font-size:250%;
}
and html:
<section id="part1">
<div class="container">
<h1>About</h1>
<div class="about-center">
<p>Accommodation in comfortable guest houses made of river stone on the shore of the lake, the possibility of constant communication with animals,</br> horseback riding through endless meadows, the possibility of developing a life, ecological food from the products of one’s own farm and unity with the spirit of the village, this is agro-tourism in Zagatala.</br> Those who wish can walk to domestic cows, cook cottage cheese, mow hay and much more.</br>
Eco-farm "Lake of Hope" is, first of all, an ecologically clean, healthy and congenial holiday, which highly appreciates the level of noise and bustle of the general population.</p>
<img id="about-image" src="images/about.jpg" width="570" height="450" />
</div>
</div>
</section>
using CSS grid, we don't need a lot of code, and it will also be responsive always!
useful docs:
CSS grid: https://developer.mozilla.org/en-US/docs/Web/CSS/grid
grid-template-columns: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
object-fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
place-items: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
.about-center {
display: grid;
/* 50% 50% */
grid-template-columns: 1fr 1fr;
/* centering */
place-items: center;
/* 1gap between items */
gap: 1rem;
/* padding */
padding: 0.5rem;
/* for debugging purposes, delete this */
border: 1px solid red;
}
/* responsive image */
.about-center img {
width: 100%;
height: 100%;
/* make image not stretch */
object-fit: cover;
}
<body>
<section id="part1">
<div class="container">
<div class="about-center">
<!-- 1 -->
<div>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est eaque aspernatur soluta non, pariatur adipisci labore? Voluptatibus quis repellat placeat ex debitis. Quia, perspiciatis commodi tempora odio saepe praesentium beatae!</p>
</div>
<!-- 2 -->
<img id="about-image" src="https://picsum.photos/500" />
</div>
</div>
</section>
</body>
I believe the site you've posted uses css flexbox to deal with responsive design and div alignment. You can learn about this here https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
.about-center {
display: flex;
align-items: center;
justify-content: space-between;
}
This should do the trick.
To make it responsive you can use flex-wrap property to make the content inside the .about-center class wrap so that the text will be on top of the image when the width of the screen shrinks.
i've been trying to make the text div to take the entire width of the grid layout but have it's content in line with the rest of the layout itself
I've used width: 100vw, tried padding the corners yet it doesn't work properly and is a bit clunky.
I've uploaded it to the codepen for better understanding
https://codepen.io/Aegtar/pen/PoObBdG
what is needed is that the green part will take the entire width yet the text inside will stay within the lightsalmon div.
the HTML :
<div class='main-layout'>
<div class='weather-page'>
<div class='top-side'>
<div>WeatherPage</div>
<div class='text-container'>
<div class='ha'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat expedita molestiae nisi dolorum est,
tempore dolore! Itaque quidem nobis deleniti! Lorem ipsum dolor sit amet.
</div>
</div>
<button>
2
</button>
<button>
2
</button>
</div>
</div>
</div>
<section class='footer'>Footer</section>
</div>
the scss :
.main-layout {
display: grid;
grid-template-columns: minmax(10px, 1fr) minmax(auto, 1300px) minmax(10px, 1fr);
> * {
grid-column: 2;
}
> *.full {
grid-column: 1 / -1;
}
}
.home-page {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 50%;
justify-content: center;
align-items: center;
gap: 40px;
}
.weather-page {
gap: 10px;
grid-auto-flow: column;
background-color: lightsalmon;
.top-side {
gap: 20px;
align-items: center;
flex-direction: column;
display: flex;
margin-bottom: 30px;
.text-container {
background-color: lightgreen;
.ha {
text-align: center;
}
}
}
.footer {
background-color: rgb(25, 118, 210);
}
any help is appreciated!
Just remove the grid-template-columns:minmax(10px, 1fr) minmax(auto, 1300px) minmax(10px, 1fr);
from the .main-layout and then add
body{
padding:0;
margin:0;
}
so that it can strech all the way.
Also, if you want the grid-template-columns , then comment on this post and I will (probably) find another solution.
Code Pen: https://codepen.io/576031/pen/rNYWqbz
It seems like you're not really using your grid. You're creating 2 empty columns on the sides for styling and putting all the content in the center column. Why not use the default layout with a simple container and recreate what you want just by using the basic stylings with width, margin and padding.
* { margin: 0 auto; }
.width-90 { width: 90%; }
.width-100 { width: 100%; }
article {
text-align: center;
max-width: 1300px;
border: solid 1px black;
}
article > * { padding: 10px 0 30px 0; }
article header, article section { background-color: lightsalmon; }
article main { background-color: lightgreen; }
article footer { background-color: lightblue; }
/*SCSS was not supported in this snippet but you could remove the word article in the lines above and then just place them in article if you want it to be specific with SCSS*/
<div class='main-layout'>
<article class='weather-page'>
<header class="header width-90">
<h2>WeatherPage</h2>
</header>
<main class='main width-100'>
<p class="width-90"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat expedita molestiae nisi dolorum est, tempore dolore! Itaque quidem nobis deleniti! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, at. Atque alias modi nam provident quam, consectetur unde sunt exercitationem corrupti veritatis ea, itaque sint vero voluptatibus in fugit delectus recusandae eos enim deleniti doloribus magni. Repudiandae obcaecati blanditiis temporibus, vitae numquam illum ducimus voluptates sed in repellat quis esse! Cupiditate facilis magni velit molestias iure enim optio ratione. Ad? </p>
</main>
<section class="section-buttons width-90">
<p><button>2</button></p>
<p><button>2</button></p>
</section>
<footer class='footer width-100'>
<p class="width-90">Footer</p>
</footer>
</article>
</div>
If you really want to keep your html structure the way it is then you could probably use a variable since you're working with SCSS. You could try this for example:
$grid-sides: 10px;
.main-layout {
display: grid;
grid-template-columns: minmax($grid-sides, 1fr) minmax(auto, 1300px) minmax($grid-sides, 1fr);
/* ... everything else ...*/
}
/* at the right place in your SCSS*/
.text-container {
margin-left: -$grid-sides;
margin-right: -$grid-sides;
padding-left: $grid-sides;
padding-right: $grid-sides;
background-color: lightgreen;
/* ... everything else ...*/
}
I'm trying to use grid-areas to have a 30%/70% split in a box with an image on the left and text on the right, but they keep overlapping and I don't know how to fix it. Image isn't showing up in snippet but it should be on the left.
.gridcart {
display: grid;
width: 100%;
/* height: 250px; */
grid-template-areas: "cartimg carttext";
/* grid-template-rows: 30% 70%; */
/* grid-template-columns: 30% 70%; */
}
#cartimg {
grid-area: cartimg;
background-color: #82241F;
}
#carttext {
grid-area: carttext;
}
#topbox {
background-color: white;
padding: 1em;
margin-top: 1%;
margin-bottom: 1%;
border: 3px solid #82241F;
display: grid;
/* grid-template-rows: 500px 500px; */
/*grid-template-areas:
"left right";*/
}
<div class="container">
<h1>My Cart</h1>
<div id="topbox" class="gridcart">
<div class="" id="cartimg">
<img src="images/glove.jpg" alt="" height="200px">
</div>
<div class="" id="carttext">
<h2>Single Latex Glove</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium deleniti eos ducimus error, adipisci doloremque beatae? Optio, culpa harum! Accusantium modi aut sint numquam eius amet facilis rem quaerat consequuntur.</p>
</div>
</div>
</div>
I'm not sure why you say you need grid-template-areas.
For what you are explaining, you may use just:
#topbox {
display: grid;
grid-template-columns: 30% 70%;
}
Here you can see a codepen
I hope that helps!!
If you set columns up like this…
grid-template-columns: 30% 70%;
…you will eventually have issues with overlapping at smaller screen dimensions, as the OP discovered.
I think what you actually want is for the second column to take up whatever space the first column did not fill. Using fr (or auto), you don't need to guess at layout proportions using hard-coded percentages.
grid-template-columns: max-content 1fr;
Demo:
#topbox {
background-color: white;
padding: 1em;
margin-top: 1%;
margin-bottom: 1%;
border: 3px solid #82241F;
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: 10px;
}
#cartimg {
margin: auto;
}
img {
height: 200px;
}
<div class="container">
<h1>My Cart</h1>
<div id="topbox" class="gridcart">
<div class="" id="cartimg">
<img src="data:image/webp;base64,UklGRsoKAABXRUJQVlA4IL4KAAAQSwCdASrNACwBPrFSoEgkIqOhq1I5cIgWCekKBZiq6Uf7zl9Ekf3a/g2CO0Cs69UfvVz/eDl9j/5HsAfyP+2f+H+/ewH9U+iT6X6cX2Iehx+wBpjVfMuV2eFTTy3rIHi2UbKNH2cUlfNoCN5sa7YNMa8YfSuID77pZpaiwc9qyrlJ6X7d3orHdrpF0+t5WjkGwaTr02AkPH9aiO1itFwxij9PVUfnziv+Y+eBm2bgddpKGy/i7NRg9UJwobfLgxOLzY/rUPfUuoFsQyweh4EC5WeBvkNi1YjuBdtoK2wSWm/MI/CUbyOWruohW/DDCJb2GMBwQvX5trwKMQsSd623d6vFTUswoR+oEz2IVcNejsZjEpSI2ypGvvOF1oZ+TBVxpJ3oXB4j6DzGLmwTwxlT7T4ReJ+tzPtfv7w3cHj2+0g0CKcBU/hOf2cEt8zXDWWTKy9+39W49Mtx0BW8YOGYwVs5xvYCBjYm2+GC0A2717UdFHfvvtnwjpJnrHkM/uSafv3KJVZ7IQJk24fPuf96oZ2OxwW6xqXNDXj+r+Ok1C30cEnGKTxmvHSWF3gJVhClIlsIdlO8qfWsyHwi9ihVhdQ6gXNIGjIe4i4wG/3jKRD96DCAyV+0SlV4xXbbpBTp2T+5qUw7i5NNQioFHs+NRaIjyGw/epGqgXVbE5D1oDKpH0jkrfPh6+nGnweYDrvrMS3vgtlvmMv4vp/PXNMul5uLvpsN6niAxAWDhPH0ltthJCMv9iQYgKVADhukr47KgSw5DfOtsUrtmU4a+BwqK9oyFrDFapimqQDjhmPu0bAA/v4D4sK/AG9OCCHQagKt8QH21aM98AydwgkMwiHQNVp1JSRd4T38GWCHDnvV/2tWN+raCZOneI1ydAFBxj8PT5nKliuxA62163Wf0UmfJ/BkLMRxxUPoc35vW3H9grlqHEWKPliDKQaJEsSwkhS0KN7Gcd/dFR9eRkeF7TwQmErnX0m8PPT+3dKMqMYePdnudkQmiTtIKJflXkGrESsYdCUrCQhd4pXOkmC3k5J/4r6kamq+3x1TzZd+TqtpbpiN15XdkYxY2omwmGQ9lqQq0goeHDys0FsSAUm02pFz+re7ti8ZPkXS/ab0u6g2V0taGijqrE87dPAL7KXKtG3TddOWNMdHuQBkq8/4/acjfZVEtLKfyFqDDoVg4zp7peZ8cbV5Cy72EmD187jYBjDdWxqDw5oF/FgtK+41vk4M/M8VcRQDaUo9VQh0QlzbYntIjM9Q/KirKX0POCRrrzaQLR4fcr2XF/ugZILx51d0q38bEhgRR8V/IyKs94MqFjZkklPO/+GT4JAMXFXpUQezAY2k4s+ZKzZM5hE7QNcLrAVMBd9VV6VOdkjimVfnuEnfyUsyUWCIUBYtUAY4V0GbTga+ZCsWa2uvNJYT1Byv25GQQ+pGFbKXizI8fVyaMXR3QKzvGXI0SaZTqeTB/S6TYHwibQsmNaHH2btTSe8aeQgC0aarI6kzKcGxgAE+5o1yJaFHDXwcTD1CoijNNb4q7GLw0lUBsG5+xHUJD/lWDYwObYVC6Y9z1nilVUwZ4lhwPTAnTrVeZ3ZuGZJPkoVb77FLMNVvjJeEFOsjPNsZPepUAOG+nG7ETzKwu1Kpc+XeAgBjMO+YHiCzQxLP3B8QNmxzZTu2pDrzMRwj4ChEGeVDVN+drf9zDkhvWXd0YNevM0MXwTn+6XAhDWBdWdz+8N9iKl8ddvXzRJG57Fp319GuVM20h2JAVQLzCb/eD0ah2uNmWDtb8TZQtSClGP64M6Isjc7/Sao5BW456R7R0qOrJoxIptsHko6z13rfGuej1lInZhN/3GHDvpbsk2LIEwBSsHSDXA94WSUf8UPHKTM1LQBLVIPaUeX0SAMY9kZ00hNanL9PnfVvdVnnh7LD3X1Q3KtgtCyoEZIwFCqW8HrtmBlWs3l8QBi/aBYN51feOnNtyj9xJS+T0wITj8UryDeGWvQ1tRP52/oe7KdgJ0ShTgUIPdnLhtUzaAw3Zm7PU1BIu5gtegoCwQMDXglBV+rLt5WPCkI+2aVa5UkUeF3rPp3fcBo2d/EucQ04XhCdtFBxFyObsTWgBY3t1ayKlEjuCiE0wBUKn9g7gAGE1QqSE87bslBwFz7KwqOSA8J2YYMU/frORVRnDFbYFEeXgPLPNi5RQZd7abSin9dYTdn8FFRwsBr9bXB9ZS/GHDba62BEcjNGmVsZKYfdKWwi4Oej+y0RX3orT+hggB+dAn3WyqvU9ZZ0H1ABQkfnzy6onYZxcpn2N0M41B8E3V/eUQcgFG8Bpn5NEGrefTtIDVxeQJfLmsHQ8ruCeSjPvdOK7dTs1RdT44laAYT6ncQT1NjGlIXd1Vc4ABzmFIhPYz1HvNuoWRsUHFmULBdkhBusJg23QcaL3e4kOyNlbfLuvaVkfS0VcD6L3op1etHwUSAIgEVWxSk+weB2Y4HyhZ1dNsQVbn6XZND6K74EPja8g7Vv5pK5YQS2bAl19Og6uL7AbpYX7ByofuhUrxsDQO/4eb8JL795eUK8s25Q4fe/2Ojr1QPmgDQhoRE+COMpbeqieAmns88iZCUIRGhK05b3+YOifWWwmwbibkizhPRx3wypnoJJxxwsxsCU2WSAKuCXHlf1GsazvyTycoBQsZENBEA2XlSb1iEdLNYS+2mfsca/AABXKnSI3LSI1xIhh9gcqtCQBlbYq2aj1KcoJ86qIFBS8MdmBY23L/Vaz1sCptsfxwKtlOn/kKSwfFPFnvN7e8kNKdoG+hmMGAYeS+r599rOxEZUNnFJ3N+TqOgAxMnxYQAeyQf44ndDr1Z+uCj3JFqfyag7wiMH6d1sr9sU+7cpIRCEbm6WeQo4ILrhIgwj3DSb1ClCuBhv0WrfDi7NWZMiqlsrYqV5h/gKIs9TNEognEPevywaxPhYWHyoJgD3fUbXI77+OzRLopero9hu0JgDbt5DJTzt9Gjf4Lmah/GHfFb2fLwA3DzOqjmzUwQBkr1MwdhLWxjGJRatF866wOV5va2xh5GkNFq4eSmUGaknc3ZGkg2HsLex7T+6VkTnh4IdzxUkQdax+/WQPw3Gp1DltZ0ZR0A+POZ0ILBWipTU1pAHAEtHmavjw/4XKQbEkCQH+A+S/mXLW+AH+SxnboMiotiiKnKYAQdNk8FrxecSzBEsojudT0rai5tXzunN6HbHJKdBK4+ou3JytPNULg25E2wDKN6AEpN/hySfL5lGkB7FKYiF+nlj4+nZmYtUTl2Ea+vWqO1VEWmdEsoEudftFFiCztWhOVYyyMMDltXRFnAxx4S7Ol0gYuFPoxQJOCQUtUGDVZcO8b25kxpEgyjvnngYk4nhvMtCNcaLCaAeNKaD4J0a4/6WbW1dZSJrN8Ayuc65cBNeJlofz+u3n5IlRMm0c7b1rNqlc5yZZU0AxzL4cfUqw0IdIm/MABwqjznF9tQ3sUu0/LmmntxK53lTtiU0bqxwpT9XduFb194/KYcs8P4wDSsj50cP1foy1YsYsBMBJxUISkMENbDtEP91AbFf5OWS0I+KS9Y47I63lE3AQqkkpmV7rXyNDbtoS5RCuEe2qE5BIdp4wxSc46TR1t4KyHVjUiGDWFUPY3r4nZhs/vqDCqo3BKxH7eRIydqho6Z2lmAAAA==" alt="">
</div>
<div class="" id="carttext">
<h2>Single Latex Glove</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium deleniti eos ducimus error, adipisci doloremque beatae? Optio, culpa harum! Accusantium modi aut sint numquam eius amet facilis rem quaerat consequuntur.</p>
</div>
</div>
</div>
I have HTML structure like:
<div class="container">
<div class="btn-1"></div>
<div class="btn-2"></div>
<div class="btn-3"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
</div>
</div>
btn-1 should be aligned to the top left, all other buttons (btn-2, btn-3...) should be aligned to the top right.
The text after all these buttons should be 100% width.
Quick mockup:
I figured out the first part (buttons) with:
.container {
display: flex;
justify-content: flex-end;
}
.btn-1 {
/* align first button to the left */
margin-right: auto;
}
Bu not matter what I do, the text doesn't flow to the next line...
Here's my JSFiddle https://jsfiddle.net/an0o7taq/
Thanks for any help!
You need to add flex-wrap: wrap to the container.
By default, flex containers are set to flex-wrap: nowrap, forcing items to remain on a single line.
revised jsfiddle
Spec reference:
5.2. Flex Line Wrapping: the flex-wrap property
You need more container with different flex flows and styles. Tip: learn most important flex props: align-items, flex-flow, justify-content. They all apply to the direct children of the container. So when you want your layout you need more container with different flex flows.
This guide helped me a lot. They also have great examples:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
flex-flow: column nowrap;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.header-left, .header-right {
display: flex;
flex-flow: row nowrap;
}
.btn {
width: 40px;
height: 40px;
border: 1px solid #ddd;
background-color: #eee;
}
.text {
width: 100%;
}
<div class="container">
<div class="header">
<div class="header-left">
<div class="btn">btn1</div>
</div>
<div class="header-right">
<div class="btn">btn2</div>
<div class="btn">btn3</div>
</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
</div>
</div>