I would like to achieve side by side, same height divs (without using table layout) and a single vertical line between them. I tried with flex container per row, but is unplesent to have the vertical line in many pieces...What can be the best solution for this problem?
I would like to have something like in the image bellow:
A sumary of what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style type="text/css">
.flex-container{
display: -webkit-flex; /* Safari */
display: flex; /* Standard syntax */
}
.flex-container .column{
background: #dbdfe5;
width: 100px;
}
.vr {
background: red;
width: 2px;
margin: 0px 5px 0px 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="column">R1 - Col1</div>
<div class="vr"></div>
<div class="column bg-alt">R1 - Col2</div>
</div>
<div class="flex-container">
<div class="column">R2 - Col1</div>
<div class="vr"></div>
<div class="column bg-alt">R1 - Col2</div>
</div>
</body>
</html>
Note: Rows number is N and the column content is dynamic, the height of the row should be dictated by the column which has much content in that row. (No JavaScript allowed!)
Thank you!
Solution with flexible height
using a wrapper to achieve the divider without interruption.
.col-item {
width: 49%;
margin-right: 2%;
margin-bottom: 15px;
border: 1px solid blue;
padding: 5px;
box-sizing: border-box;
}
.col-item:nth-child(2n) {
margin-right: 0;
padding-right: 0;
}
.col-item:nth-last-child(2),
.col-item:last-child {
margin-bottom: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
position: relative;
}
.wrapper:after {
content: "";
position: absolute;
top: 0;
left: calc(50% - 1px);
height: 100%;
border-right: 1px solid red;
}
<div class="wrapper">
<div class="col-item">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="col-item">
At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<div class="col-item">
Lorem ipsum dolor sit amet!
</div>
<div class="col-item">
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
Similar to #fauxserious's answer, but you don't need to worry about multiple children in the column's because you add the pseudo selector to the parent container:
main {
box-sizing: border-box;
position: relative;
display: flex;
flex-wrap: wrap;
}
main>* {
flex: 0 1 auto;
float: left;
width: calc(50% - 40px);
margin: 20px;
border: 1px solid;
height: 200px;
box-sizing: border-box;
}
main:before {
content: "";
position: absolute;
left: 50%;
top: 20px; /* Same as margin */
bottom: 20px; /* Same as margin */
border-left: 1px solid #ff6600;
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
Make a container for two column children, float those children to they are next to each other. Make a pseudo element and position it absolutely to make the line that separates the columns.
main{
height:500px;
box-sizing:border-box;
}
main > *{
float:left;
width:46%;
margin:2%;
border:1px solid;
height:100%;
box-sizing:border-box;
position:relative;
}
main > :last-child:before{
content:"";
height:100%;
position:absolute;
left:-4%;
margin-left:-3px;
top:0;
border:1px solid;
}
<main>
<div></div>
<div></div>
</main>
I did create an example aswell.
Maybe you like it.
.content-left {
width: 40%;
height: 500px;
border-right: solid 2px red;
display: inline-block;
}
.content-right {
width: 40%;
height 500px;
display: inline-block;
}
.content {
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: lightblue;
}
.left1 {
height: 190px;
}
.left2 {
height: 90px;
}
.left3 {
height: 190px;
}
.right1 {
height: 190px;
}
.right2 {
height: 90px;
}
.right3 {
height: 90px;
}
.right4 {
height: 90px;
}
<div class="content-left">
<div class="content left1"></div>
<div class="content left2"></div>
<div class="content left3"></div>
</div>
<div class="content-right">
<div class="content right1"></div>
<div class="content right2"></div>
<div class="content right3"></div>
<div class="content right4"></div>
</div>
Easiest way to create a vertical line between two container and maintain the line from top to end
.table_container.row{
/* border: 0.5px solid #333;*/
margin-top: -1px;
display: flex;
}
.table_container .left_col{
border-right:3px solid red;
}
<div class="row table_container">
<div class="col-md-4 left_col">Lorem</div>
<div class="col-md-8 right_col">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
Like that ? :
header, section, .sub_section, footer {
float:left;
width: 40%;
border: 3px solid #000;
margin-left: 6%;
}
header {
height: 20vh;
}
section {
height: 40vh;
margin-top: 2%;
}
.sub_section {
height: 20vh;
margin-top: 2%;
}
footer {
height: 20vh;
margin-top: 2%;
}
<header></header>
<header></header>
<section></section>
<section></section>
<div class="sub_section"></div>
<div class="sub_section"></div>
<footer></footer>
<footer></footer>
Related
I'm trying to make rectangular inside the circle on the left , when im resizing the screen of the website the shapes moving out and the texts checking out from the shapes , any ways to make texts and shapes responsive to all screens
The code : https://codepen.io/enespro/pen/rNWmLvP
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="circle">
<h3 class="mt-4">Bzns Monster School<br><span style="font-size: 20px; color: #DDDD;">From Zero To Hero</span></h3>
</div>
<div class='rect-box'>
</div>
<div class='rect-content'>
<div class="content">
<span>Lorem ipsum dolor sit amet, consetetur<br> sadipscing elitr, sed diam nonumy eirmod<br> tempor invidunt ut labore et dolore magna.</span>
</div>
</div>
<button class="btn btn-outline-secondary ml-1">Read More</button>
</div>
I see in your code there's a lot of position absolute that will just drive you crazy in long term to maintain that code. What about using the magic of flex, instead? :)
I rewrote your code here below. Check it clicking on "Run Code Snippet" to see it in action.
I suggest on the mobile to separate the banner from the circle to make it responsive and readable.
Enjoy!
.wrapper {
position: relative;
display: flex;
align-items: center;
min-height: 300px;
flex-direction: column;
}
.circle {
border-radius: 50%;
background-color: #000;
min-width: 200px;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.circle span {
color: #fff;
}
.rectangle {
width: 100%;
padding: 10px;
text-align: center;
background-color: #eee;
}
#media screen and (min-width: 600px) {
.circle {
position: absolute;
}
.rectangle {
padding: 30px 0 30px 220px;
}
.wrapper {
flex-direction: row;
}
}
<div class='wrapper'>
<div class='circle'><span>Lorem Ipsum</span></div>
<div class='rectangle'>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
I have to create a div over which there is a 3px border, and this boundary is positioned over the content in the div, how can I do this without knowing the size of the block?
An example is in the image below:
My code: https://codepen.io/pen/yLObXvv
HTML:
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-4">
<div class="case-study">
<div class="case-study-image">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid" alt="Intro image"/>
</div>
<div class="case-study-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
background-color: #04142d;
}
.case-study {
color: #fff;
display: flex;
margin-top: 2rem;
flex-direction: row;
background-color: #0E53DD;
border-radius: 1rem;
overflow: hidden;
}
.case-study-image {
flex: 0 0 50%;
width: 50%;
}
.case-study-image img {
height: 100%;
max-height: 20rem;
object-fit: cover;
oject-position: 0 0;
}
.case-study-content {
flex: 0 0 50%;
padding: 1rem;
}
Please Use CSS ::after Selector with position: absolute
The coordinates of an absolute positioned element are relative to its parent. It is positioned automatically to the starting point (top-left corner) of its parent element.
body {
background-color: #04142d;
}
.case-study {
color: #fff;
display: flex;
margin-top: 2rem;
flex-direction: row;
background-color: #0E53DD;
border-radius: 1rem;
position:relative;
max-width:500px;
}
img {
max-width:100%;
}
.case-study-image {
flex: 0 0 50%;
width: 50%;
}
.case-study-image img {
height: 100%;
max-height: 20rem;
object-fit: cover;
oject-position: 0 0;
}
.case-study-content {
flex: 0 0 50%;
padding: 1rem;
}
.case-study:after {
content: '';
border: 3px solid yellow;
position: absolute;
width: calc(100% - 6px);
height: calc(100% - 6px);
border-radius: 5px;
right: -10px;
top: -10px;
}
<div class="case-study">
<div class="case-study-image"> <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid" alt="Intro image"/> </div>
<div class="case-study-content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>style</title>
<style>
div {
width: 200px;
height: 200px
background-color:white;
}
.move {
transform: (30px, 180px)
background: transparent;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="move"></div>
<div></div>
</body>
</html>
you can use this and try to style it the way you want
I have an image I'd like to extend beyond its parent container, just on the top and bottom, the same distance. I'm able to achieve this effect on the top, but am not able to do so on the bottom. How can I achieve this effect while still remaining responsive and keeping remaining content within the parent?
I've tried various methods of absolute positioning, but kept breaking the grid. I was able to achieve what I have thus far using negative margins, but only on top.
This is the very basic code I have thus far and here's the jsfiddle.:
.band {
background-color: #ddd;
margin-top: 100px;
}
.contain {
margin: 0 auto;
max-width: 600px;
}
.row {
align-content: flex-start;
clear: both;
display: flex;
flex-flow: row wrap;
overflow: visible;
}
.col {
width: 50%;
}
.col-image {
margin-top: -20px;
}
p {
padding: 20px;
}
img {
display: block;
height: auto;
max-width: 100%;
}
<div class="band">
<div class="contain">
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col col-image">
<img src="https://via.placeholder.com/800x450?text=fpo">
</div>
</div>
</div>
</div>
Another solution using negative margins and absolute positioning on the image:
use negative margins for the offsetting of the second column,
using absolute positioning of the image in the second column ensures that the height is determined by the left column (because the row container is a flexbox and align-items: stretch is the default), and
use object-fit: cover to maintain image aspect ratio.
See demo below:
.band {
background-color: #ddd;
margin-top: 100px;
}
.contain {
margin: 0 auto;
max-width: 600px;
}
.row {
align-content: flex-start;
clear: both;
display: flex;
flex-flow: row wrap;
overflow: visible;
}
.col {
width: 50%;
}
.col-image {
margin: -20px 0 -20px 0; /* negative margin */
position: relative;
}
p {
padding: 20px;
}
img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
/* absolute positioning */
position: absolute;
top: 0;
left: 0;
}
<div class="band">
<div class="contain">
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col col-image">
<img src="https://via.placeholder.com/800x450?text=fpo">
</div>
</div>
</div>
</div>
Positioning seems to work
.band {
background-color: #ddd;
margin-top: 100px;
}
.contain {
margin: 0 auto;
max-width: 600px;
}
.row {
align-content: flex-start;
clear: both;
display: flex;
flex-flow: row wrap;
overflow: visible;
position: relative;
}
.col {
width: 50%;
}
.col-image {
position: absolute;
top: -20px;
bottom: -20px;
left: 50%
}
p {
padding: 20px;
}
img {
display: block;
height: 100%;
}
<div class="band">
<div class="contain">
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col col-image">
<img src="https://via.placeholder.com/800x450?text=fpo">
</div>
</div>
</div>
</div>
You can also play with background of the band element to simulate this
.band {
background:
url(https://via.placeholder.com/800x450?text=fpo) calc(50% + 160px) 0/auto 100%,
linear-gradient(#ddd,#ddd) center/100% calc(100% - 40px);
background-repeat:no-repeat;
margin-top: 100px;
}
.contain {
margin: 0 auto;
max-width: 600px;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
width: 50%;
}
p {
padding:40px 20px;
}
<div class="band">
<div class="contain">
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
I'm trying to create a fixed header at the top of my page that has 3 "columns". The first is left justified on the left side, the second is centered relative to the whole page - regardless of the other two column sizes, and the third is right justified, stuck on the right. I want all of the content centered vertically.
Floats didn't really work because then the middle column was not properly centered. So I used two position: absolute div's for the left and right, and just left one div in the middle.
My problem is that I can't get the header to expand to contain the left div, which is taller, and I can't get the content to center vertically.
What am I doing wrong? Thanks!
Here is my code:
.header {
z-index: 8;
top: 0;
left: 0;
position: fixed;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
background: white;
z-index: 8;
border-bottom: 1px solid black;
text-align: center;
}
.left {
position: absolute;
top: 1rem;
left: 1rem;
border: 1px solid gray;
background: red;
padding: 1rem;
height: 10rem;
}
.right {
position: absolute;
right: 1rem;
top: 1rem;
background: yellow;
border: 1px solid gray;
}
.middle {
background: green;
border: 1px solid gray;
}
<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>
Here is the link to my fiddle.
I would suggest using a flexbox for the vertical alignment.
header {
display: flex;
justify-content: space-between;
align-items: center;
}
header>div {
padding: 1rem; /* To improve visibility */
width: calc(100% / 3);
}
.col1 {
text-align: left;
}
.col2 {
text-align: center;
}
.col3 {
text-align: right;
}
<header>
<div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
Instead of the css that you have written, you can finish the above in just 8 lines. You just need to write the following:
.header{
display:flex;
}
.left, .middle, .right{
width: calc(100% / 3);
text-align:center;
}
and you can add the following class to check if everything is according what you planned to do:
*{
border: 1px solid red;
}
Here is the link to the fiddle displaying the result of the above code.
Check the result in the following stack overflow snippet:
* {
border: 1px solid red;
}
.header {
display: flex;
}
.left,
.middle,
.right {
width: calc(100% / 3);
text-align: center;
}
<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>
I want 3 elements in line. First two being aligned to the left and the third one being align to right.When the window is smaller i want the second going under the first while the third remains in the right, when the window gets even smaller all three under each other.
Here is an example:
https://www.backyardburgers.com/
I want to make the red thing under the header with those three elements an h2 a p and an anchor wich is the button.
I would like if you could show me what css to use if the html is the following:
<section class="location">
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, copiosae perpetua voluptaria in pro, laboramus scriptorem instructior in usu, duo expetenda delicatissimi in. </p>
<a class="button" href="#">Sale sonet</a>
</div></section>
Example code with 3 divs
CSS ::::
div {
height: 200px;
width: 200px;
border: 1px solid white;
display: inline-block;
}
#media only screen and (max-width: 500px) {
div {
width: 100%;
}
}
#media screen and (max-width: 900px) and (min-width: 500px) {
div {
display: block;
}
.first, .second {
width: calc(100% - 200px);
}
.third{
position: fixed;
top: 8px;
right: 5px;
width: 200px;
}
}
#media screen and (min-width: 900px) {
div{
display: inline-block;
}
.first {
float: left;
}
.second {
width: calc(100% - 410px);
}
.third {
float: right;
}
}
Here is a simple turnaround :
.location {
background: #d00807;
color: #fff;
padding: 20px;
position: relative;
}
.location h2 {
display: inline-block;
margin: 0px;
vertical-align: middle;
}
.location p {
display: inline-block;
margin: 0px;
margin-left: 10px;
vertical-align: middle;
}
.location a.button {
background: transparent;
border: 1px solid #fff;
text-decoration: none;
color: #fff;
padding: 10px;
position: absolute;
right: 20px;
top: 50%;
margin-top: -20px;
}
#media (max-width:768px) {
.location h2 {
display: block;
margin-bottom: 10px;
}
.location p {
width: 50%;
margin-left: 0px;
}
}
<section class="location">
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, copiosae perpetua voluptaria in pro, laboramus scriptorem instructior in usu, duo expetenda delicatissimi in. </p>
<a class="button" href="#">Sale sonet</a>
</div>
</section>