I have a littre problem.
Curently, I have a struture like this (run in full page)
.color{
background : red;
}
.color-green{
background : green;
}
.vertical-align {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<body>
<div class="container-fluid color-green vertical-align">
<div class="row">
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
</div>
</div>
</body>
I would like to expand div on hover independently like this
But i use bootstrap, and I don't know how to make that with bootstrap..
if you have an idea or track to follow
thanks
on :hover, you can use transform: scale() to make the element bigger, change the background, and add position: relative; z-index: 1; to keep that element on top of it's siblings. And use transition to create a smooth transition, if you want that.
.color{
background : red;
}
.color-green{
background : green;
}
.vertical-align {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.color-green > .row > .text-center {
transition: transform .25s, background .25s;
}
.color-green > .row > .text-center:hover {
transform: scale(1.2);
background: #8dc63f;
position: relative;
z-index: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<body>
<div class="container-fluid color-green vertical-align">
<div class="row">
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
<div class="col-lg-4 text-center">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
</div>
</div>
</div>
</body>
Related
How can I scale the black containers height from max-height of 550px to for example height of 400px by just changing browsers width. And together with the black container the box divs also should get smaller proportionally. I want it without the use of media queries.. I want it to change dynamically so you can see it resizing pixel by pixel. I don't want it to just jump from one height to another by reaching a media queries width.
.container-black {
height: 550px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
border-bottom: solid 8px grey;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 30%;
background-color: red;
}
<body>
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
</body>
Use dynamic values such as vw or viewport width. For example, to keep your black borders you can set box1 to width: 40vw;. This means box1 will use 40% of the viewport size when resizing, and the container-black will maintain 10% of viewport width on any device. Allowing it to be responsive.
The Dynamic Viewport is the viewport sized with dynamic consideration of any UA interfaces. It will automatically adjust itself in response to UA interface elements being shown or not
css-tricks.com
EDIT -- added 2 more container-blacks and nested them in parent container and defined their height based of % so that they resize responsively.
.container-black {
height: 33%;
width: 100vw;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
border-bottom: solid 8px grey;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 40vw;
background-color: red;
}
.container {
height: 100vw;
}
<body>
<div class="container">
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
<div class="container-black">
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
eligendi!</p>
</div>
</div>
</div>
</body>
You can use the vw unit (= percent of viewport width) in your height definition, if necessary, inside a media query
One way to do it is using vw unit on the height of the black box.
1vw equals 1% of the viewport's width.
Another way is the CSS aspect-ratio feature. You can learn more in the link below.
https://css-tricks.com/almanac/properties/a/aspect-ratio/
So I'm setting up a baseline for a portfolio for this project and I want the projects on the home page so when I hover over them they expand a bit. Everything is working fine except I want the boxes' height and width to expand evenly on all sides. The boxes seem to be expanding toward the center when I hover over them.
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.project {
width: 200px;
height: 200px;
border: 15px solid rgb(2, 2, 59);
padding: 50px;
margin: 20px;
text-align: center;
}
.project:hover {
width: 250px;
height: 250px
}
#proj1 {
background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
background-size: cover;
background-position: center;
}
h2 {
padding: 3%;
}
<main>
<section>
<section class="project" id="proj1">
<h2>Project Name</h2>
<p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
</section>
<section class="project" id="proj2">
<h2>Project Name</h2>
<p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
</section>
</section>
<section>
<section class="project" id="proj3">
<h2>Project Name</h2>
<p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
</section>
<section class="project" id="proj4">
<h2>Project Name</h2>
<p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
</section>
</section>
</main>
If you use transform: scale(1.2); instead, then your objects will keep their position and size in the document flow. Here is an example:
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.project {
width: 200px;
border: 15px solid rgb(2, 2, 59);
padding: 40px;
margin: 40px;
text-align: center;
transition: transform .5s;
}
.project:hover {
transform: scale(1.2);
}
#proj1 {
background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
background-size: cover;
background-position: center;
}
h2 {
padding: 3%;
}
<main>
<section>
<section class="project" id="proj1">
<h2>Project Name</h2>
<p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
</section>
<section class="project" id="proj2">
<h2>Project Name</h2>
<p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
</section>
</section>
<section>
<section class="project" id="proj3">
<h2>Project Name</h2>
<p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
</section>
<section class="project" id="proj4">
<h2>Project Name</h2>
<p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
</section>
</section>
</main>
You should probably be using scale transforms instead of pixel sizing. You can then specify the transform origin.
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.project {
width: 200px;
height: 200px;
border: 15px solid rgb(2, 2, 59);
padding: 50px;
margin: 20px;
text-align: center;
transition: all 0.3s;
}
.project:hover {
transform: scale(1.05);
}
#proj1 {
background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
background-size: cover;
background-position: center;
}
h2 {
padding: 3%;
}
<main>
<section>
<section class="project" id="proj1">
<h2>Project Name</h2>
<p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
</section>
<section class="project" id="proj2">
<h2>Project Name</h2>
<p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
</section>
</section>
<section>
<section class="project" id="proj3">
<h2>Project Name</h2>
<p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
</section>
<section class="project" id="proj4">
<h2>Project Name</h2>
<p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
</section>
</section>
</main>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want the image to be over the paragraph, but they aren't in this code. is it enough to place elements below each other in html and they will be displayed below each other or not? Is the dosplay flex and aligning affecting the position so that's why the paragraphs aren't below the images?
.wrapper {
display: flex;
width: 100%;
}
.div {
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
}
<div class="wrapper">
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
</div>
<div class="div div1">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
</div>
</div>
You can force a specific order on flex-items using the order property. Also set flex-direction to column to ensure your elements are stacked vertically.
.wrapper {
width: 100%;
}
.div {
display: flex;
flex-direction: column;
width: 30%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.image {
width: 20%;
height: 20%;
order: 1;
}
p {
order: 2;
}
<div class="wrapper">
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
<div class="div">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
</div>
</div>
I have 3 columns with content and I managed to align the last div to bottom, by giving a fixed height to the column. Is there a better method since this won't work if someone will change the content, add more text or less text.
.column {
width: 33%;
float: left;
background: #ccc;
height: 350px;
position: relative;
}
.btn {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
padding: 10px;
}
My Fiddle: Fiddle
Flexbox layout is a good solution.
The body element has row layout (it contains the 3 columns), each column has column layout (obvious). and inside the column the content grows to fill the space remaining.
I removed the absolute positioning from the .btn class, so it would take the space inside the coulmn.
body {
display: flex;
flex-direction: row;
}
.column {
width: 33%;
float: left;
background: #ccc;
min-height: 350px;
position: relative;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
padding: 0 5px;
}
.btn {
text-align: center;
padding: 10px;
}
<div class="column">
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 3</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
If you need with fixed height for columns.
Here is the code
.column {
width: 33%;
float: left;
background: #ccc;
height: 350px;
position: relative;
}
.btn {
text-align: center;
padding: 10px;
}
.content{background:#f5f5f5;height:240px;overflow-x:hidden;overflow-y:auto;}
<div class="column">
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 3</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
Otherwise if you want to last div always bottom to above elements not as fixed.
Here is the code->
.column {
width: 33%;
float: left;
background: #ccc;
height: auto;
position: relative;
}
.btn {
text-align: center;
padding: 10px;
}
.content{background:#f5f5f5;}
<div class="column">
<div class="title">
<h2>Title 1</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 2</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
<div class="column">
<div class="title">
<h2>Title 3</h2>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab?
</div>
<div class="btn">Click Me!</div>
</div>
I wonder if there is possible to set the first div behind the second one without use jquery or flex box.
Is there any way ?
.container {}
.one {
background-color: #FF0004;
float: right;
}
.two {
background-color: #000DFF;
float: left;
}
<body>
<div class="container">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>
</div>
</body>
Thank you !
Give parent div position:relative and position:absolute to child div.
Now you can handle the position of div using top:10px and left:10px.
.container {
position:relative;
}
.one {
background-color: #FF0004;
float: right;
}
.two {
background-color: #000DFF;
float: left;
position:absolute;
top:10px;
left:10px;
}
<div class="container">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>
</div>
you can use z-index
.container {}
.one {
background-color: #FF0004;
position: absolute;
left: 5px;
top: 5px;
z-index: -1;
}
.two {
background-color: #000DFF;
}
<div class="container">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos vitae nihil facere repudiandae voluptatem corporis tempore quasi? A quo aspernatur odit expedita cum maxime, alias quis. Laudantium quaerat voluptatem quo.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eos. Quas nihil tenetur suscipit asperiores obcaecati fuga, id, quis dolor quisquam explicabo modi optio unde! Quas atque eius, numquam aliquam.</div>
</div>