I need to put the between the two columns without them being covered from it. I've tried with float but it obviously covers the text below.
h2 {
position: absolute;
margin: 0 25%;
margin-top: 25%;
}
The result should be like the one on the image. I've added the code here on codepen Thank you in advance! enter image description here
with float and some margin/clear, with known sizes you can manage this inside a column CSS layout :
*{box-sizing:border-box;margin:0;}
article {
column-count:2;
height:500px;
width:1200px;
margin:auto;
overflow:hidden;
text-align:justify;
}
article header {
float:right;
width:300px;
height:200px;
padding:1em;
margin-left:0.5em;
margin-right:-160px;
background:gray;
text-align:center;
}
article:before {
content:'';
float:left;
width:0;
height:440px;
}
article > b {
float:left;
clear:left;
height:200px;
width:150px;
float:left;
}
p {margin:0 1em 1em;}<article>
<header class="none">
<h1>some title text to lay over here and see what we can do about it to set it in the middle</h1>
<a href>Written by Lorem Hardy</a>
</header>
<b class="none"><!-- push it next col--></b>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</article>But useless since it can break anytime.
A javascript approach could help retrieve the size needed once the document is loaded. the use of var() CSS that can easily be updated/reset and reused inside the CSS styles , then class to remove after sizes are taken via js can reduce the code and prepare it ahead.
window.onload = function() {
let article = document.querySelector("article");
let header = document.querySelector("article>header:first-of-type");
let b = document.querySelector("article>b:first-of-type");
let Hspacer = article.offsetHeight + "px";
header.classList.toggle("none");/* let header take its style and width */
let headerH = header.offsetHeight + "px";/* now how tall is it ? */
article.style.setProperty("--Hspacer", Hspacer);
article.style.setProperty("--headerH", headerH);
b.classList.toggle("none");/* finalize the spacer standing in column 2 */
};* {
box-sizing: border-box;
margin: 0;
}
html {
--Hspacer: ;
/*to be updated via js */
--headerH: ;
/*to be updated via js */
--headerW: 260px;
/* init header 's width */
}
article {
column-count: 2;
height: var(--Hspacer);
max-width: 900px;
margin: auto;
overflow: hidden;
text-align: justify;
}
article header:not([class=none]) {
float: right;
width: var(--headerW);
height: var(--headerH);
padding: 1em;
margin-left: 0.5em;
margin-right: calc( ( var(--headerW) / 2)* -1);
background: gray;
text-align: center;
}
article:before {
content: '';
float: left;
width: 0;
height: var(--Hspacer);
}
article>b:not([class=none]) {
float: left;
clear: left;
height: var(--headerH);
width: calc( var(--headerW) / 2);
float: left;
}
header h1 {
margin-bottom: 0.75em;
}
p {
margin: 1em;
}<article>
<header class="none">
<h1>some title text to lay over here and see what we can do about it to set it in the middle</h1>
<a href>Written by Lorem Hardy</a>
</header>
<b class="none"><!-- push it next col--></b>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</article>Inspired from https://codepen.io/gc-nomade/pen/dyYzGYX
if your column container is partially fluid, you may need to update the --Hspacer value : https://codepen.io/gc-nomade/pen/dypaydo
