Fixed height table irrespective of the available space. Table become scrollable - html

I want my table to have a fixed dynamic height, so I can scroll and it does not expand.
So I have this bootstrap row & 2 columns. I want the table or the left column to have the height of the height needed for the right column.
<div class="row">
<div class="col">
<table class="table table-sm table-light table-striped">
<tbody>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis
minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>
<p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
</div>
In this example the table just expands downwards if I add more rows. But I want the table to skip expanding when the height is at the height of the right column and scroll in stead.
I use bootstrap for styling.
Thanks in advance!


Since you want the table to respect the height of the smaller column, we need JavaScript...
We take the height of the right column and applies it to the table, letting a scrollbar to help with viewing the contents
working snippet below:
$(window).on("resize", function() {
$(".col:nth-child(1)").css('height', $(".actualContents").height());
$(".col:nth-child(1)").css('display', 'block');
$(".col:nth-child(1)").css('overflow-y', 'scroll');
}).resize();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col">
<table class="table table-sm table-light table-striped">
<tbody>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="actualContents">
<h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>
<p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis
suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis
cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
</div>
</div>
</div>


As the previous one is in jQuery (wich I don't use) I shall answer in JS:
const rightColumn = document.getElementById("rightColumn").firstElementChild;
const table = document.getElementById("actualContents");
window.addEventListener("resize", (evt) => {
resize();
});
function resize() {
table.style.height = rightColumn.clientHeight;
table.style.overflowY = "scroll";
}
resize();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col">
<table class="table table-sm table-light table-striped">
<tbody>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
<tr>
<td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div id="actualContents">
<h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>
<p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis
suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis
cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
</div>
</div>
</div>

Related

A Sticky element wont scroll all the ways

html,body{
height: 100%;
}
.Page{
display: grid;
grid-template-columns:1fr 12fr 2fr ;
grid-template-rows: 3fr 9fr 1fr;
margin: 0;
background-color: #1C1F1F;
}
header{
grid-column-start: 2;
grid-column-end: 3;
background-color: #1C1F1F;
grid-row: 1/2;
align-items: center;
align-content: center;
display: inline;
}
.HeaderM{
font-size: 95%;
}
.LeftBar{
grid-column-start: 1;
grid-column-end: 2;
top:0;
position: sticky;
background-color: #292E2E;
}
.Navigation{
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
margin-left: 10%;
margin-right: 10%;
background-color: #1a52519f;
}
.RightBar{
grid-column-start: 3;
grid-column-end: 4;
grid-row: 1/3;
background-color: #292E2E;
position:sticky;
top: 0;
height: 100%;
}
.Content{
grid-column-start: 2;
grid-column-end: 3;
margin: 0%;
background-color: #3D4242;
padding: 5%;
margin: 5%;
}
.foot{
grid-column: 1/4;
background-color: #565C5C;
padding: 0;
grid-row: 3/4;
}
.btnnav{
width:75% ;
aspect-ratio: 1/1;
border: 0;
background-color: #3D4242;
border: 5px solid #3D4242;
border-radius: 50%;
transition-duration: 0.3s;
z-index: 2;
}
.btnnav:hover
{
width: 120%;
background-color: #2F9594;
}
#historybtn{
background-image: url("img/history.png");
background-repeat: no-repeat;
background-position: center;
background-size: 150%;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body class="Page">
<header>
<div class="logo"></div>
</header>
<section class="LeftBar">
<nav>
<div class="Navigation" >
<button class="btnnav" id="historybtn"></button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<p>xd</p>
</div>
</nav>
</section>
<section class="Content">
<p>Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?
Lorem ipsum dolor, siLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolt amet consectetur Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore dolLorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore doladipisicing elit. Inventore dolores consequuntur deserunt non sequi illo odit corrupti veritatis rerum. Voluptate dolore atque veritatis quibusdam sunt recusandae et voluptas magnam sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt reiciendis cumque sunt in sapiente nobis, unde ex suscipit provident fugit omnis temporibus autem blanditiis laboriosam expedita corporis vel obcaecati illum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae quaerat nihil sequi ea magnam dolore quam veniam voluptates dicta dolor? Explicabo enim, repellat accusantium perspiciatis qui ratione maxime eligendi quidem?</p>
</section>
<section class="RightBar">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae facilis itaque eum. Necessitatibus, esse voluptatum quas facilis repellat repudiandae labore fuga vitae, assumenda id voluptatem. Corrupti cum dignissimos velit assumenda.</p>
</section>
<footer class="foot">
<p style="margin: 0;"> © Vojtěch Charouz 2023</p>
</footer>
</body>
</html>
I am attempting to make my "Left bar" stick to the top of the screen, however at some point in the document, it just stops.
I think it is because the document is formated using the grid, even though the element itself doesnt have Grid rows set.
Is there any way i can make this work, ideally without having to give up the grid?
My html:
(i removed the placeholder text in order to make it more readable)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Project.css"/>
<title>Document</title>
</head>
<body class="Page">
<header>
<div class="logo"></div>
</header>
<section class="LeftBar">
<nav>
<div class="Navigation" >
<button class="btnnav" id="historybtn"></button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<button class="btnnav">Test</button>
<p>xd</p>
</div>
</nav>
</section>
<section class="Content">
<p> A lot of placeholder text in order to make the page scrollable</p>
</section>
<section class="RightBar">
<p>placeholder</p>
</section>
<footer class="foot">
<p style="margin: 0;"> placeholder</p>
</footer>
</body>
</html>
My Css:
html,body{
height: 100%;
}
.Page{
display: grid;
grid-template-columns:1fr 12fr 2fr ;
grid-template-rows: 3fr 9fr 1fr;
margin: 0;
background-color: #1C1F1F;
}
header{
grid-column-start: 2;
grid-column-end: 3;
background-color: #1C1F1F;
grid-row: 1/2;
align-items: center;
align-content: center;
display: inline;
}
.HeaderM{
font-size: 95%;
}
.LeftBar{
grid-column-start: 1;
grid-column-end: 2;
top:0;
position: sticky;
background-color: #292E2E;
}
.Navigation{
display: flex;
flex-direction: column;
align-items: center;
width: 80%;
margin-left: 10%;
margin-right: 10%;
background-color: #1a52519f;
}
.RightBar{
grid-column-start: 3;
grid-column-end: 4;
grid-row: 1/3;
background-color: #292E2E;
position:sticky;
top: 0;
height: 100%;
}
.Content{
grid-column-start: 2;
grid-column-end: 3;
margin: 0%;
background-color: #3D4242;
padding: 5%;
margin: 5%;
}
.foot{
grid-column: 1/4;
background-color: #565C5C;
padding: 0;
grid-row: 3/4;
}
.btnnav{
width:75% ;
aspect-ratio: 1/1;
border: 0;
background-color: #3D4242;
border: 5px solid #3D4242;
border-radius: 50%;
transition-duration: 0.3s;
z-index: 2;
}
.btnnav:hover
{
width: 120%;
background-color: #2F9594;
}
#historybtn{
background-image: url("img/history.png");
background-repeat: no-repeat;
background-position: center;
background-size: 150%;
}
#keyframes logo {
0%{background-image: url("img/grass.png");}
25% {background-image: url("img/dia.png");}
50%{background-image: url("img/spawner1.png");}
75%{background-image: url("img/oak1.png");}
100%{background-image: url("img/grass.png");}
}
.logo{
background-image: url("grass.png");
background-repeat: no-repeat;
width: 200px;
height: 200px;
animation-name:logo;
animation-duration: 10s;
animation-play-state:paused ;
animation-iteration-count:infinite ;
align-items: center;
align-content: center;
margin: auto;
}
.logo:hover{
animation-play-state:running ;
}
Thanks
I tried:
Changing heights of the element and its parents
Removing the Grid-row property from the element

Same height for row in box

I have free box and content in it, but I need to do same height for row in it. Now is same height only box, but I need to do same height for row in box. In example which is bellow I have blue row, which is row where I need to do same height for it and keep them on the same line with the same height.
.container {
display:flex;
}
.box {
background:red;
}
.row {
background:blue;
}
<div class="container">
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque dolorem ut fuga impedit, obcaecati aut est inventore voluptatibus eligendi iusto dignissimos consequatur pariatur tenetur vero. Eum aspernatur ad porro a.</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt inventore, facilis error, tempore nisi optio quasi</div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p></div>
</div>
</div>

Have a read of this http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox
You need to make the rows display:flex

CSS Grid space-between not working as expected when content reaches a certain limit

I want to create a section with tabs that becomes an "accordion" in small screens, so instead of defining the tabs bar first and then the content of each tab I'm placing the link to the tab and the content of that tab right after the link and then using CSS Grid I'm positioning the active tab after all the links in the tab bar to have the links in the first row and the active tab in the second row.
You can see that working here:
https://codepen.io/rbournissent/pen/PByXxM
div {
display: grid;
grid-template-columns: repeat(4, auto);
grid-row-gap: 80px;
grid-template-rows: 40px 1fr;
justify-content: space-between;
}
a {
border: 1px solid black;
}
article {
display: none;
grid-column: 1 / 5;
grid-row: 2 / 3;
border: 1px solid black;
}
article.active {
display: block;
}
<div>
Link 1
<article class="active">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
</article>
Link 3
<article>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
</article>
Link 4
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
</article>
</div>
The problem is what happens when the content of the article grows. The links get stretched to fill the whole row and space-between is no longer working (i.e. there is no more space between them):
https://codepen.io/rbournissent/pen/qyJLwy
<div>
Link 1
<article class="active">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ab beatae sed maxime. Amet quam, error atque alias velit dicta officia et optio. Quidem tempora officiis minus laudantium! Beatae, eveniet!
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
</article>
Link 3
<article>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
</article>
Link 4
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
</article>
</div>
The only difference is the amount of text (content) in the active article (tab).
Can somebody help me with this?

If you're allowed to use grid-template-areas, you can try this out:
.accordion {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 30% 70%;
grid-template-areas:
"l1 l2 l3 l4"
"a a a a";
}
a {
margin: 20px;
border: 1px solid red;
text-align: center;
}
a:nth-of-type(1) {
grid-area: l1;
}
a:nth-of-type(2) {
grid-area: l2;
}
a:nth-of-type(3) {
grid-area: l3;
}
a:nth-of-type(4) {
grid-area: l4;
}
article {
display: none;
}
article.active {
text-align: justify;
padding: 0 20px 0 20px;
display: block;
grid-area: a;
}
<div class="accordion">
Link 1
<article class="active">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 3
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 4
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
</div>

I think this will work for you:
The fix was simple just added width:15vw; to the <a> so the width
dont get changed.
div {
display: grid;
grid-template-columns: repeat(4, auto);
grid-row-gap: 80px;
grid-template-rows: 40px 1fr;
justify-content: space-between;
}
a {
border: 1px solid black;
width:15vw;
margin-right: 11.2vw;
}
a:nth-last-child(2){ margin-right:0;}
article {
display: none;
grid-column: 1 / 5;
grid-row: 2 / 3;
border: 1px solid black;
}
article.active {
display: block;
}
<div>
Link 1
<article class="active">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
</article>
Link 2
<article>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
</article>
Link 3
<article>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
</article>
Link 4
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
</article>
</div>
This issue occurred as you are using display: grid; the width of the content in article is effecting the a even the if the text in the article it affects the a so, in my opinion, it's better to go with my solution.
Hope this was helpfull for you.

I want to center the text of h1 and p tag in page in css

This is the html file:
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
I want to set the all text centered of individual div height. Means first the text of h1 will appear and just below of it the text of paragraph tag will appear. the space from upper portion to h1 tag and the space from ending of p tag to lower portion have to same.
I am newbie.please help me.

This should work for you. Hope it helps!
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
position: relative;
top: -60px;
left: 250px;
}
p {
padding: inherit;
margin: inherit;
position: relative;
top: 60px;
right: 480px;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

text-wrap semi working, need improvement

I don't know how to wrap all the text and not just one single line, If you have any idea how to change this I will gratefully thank you
http://jsfiddle.net/dkanem13/1/
<h1>I need to change this:</h1>
<div class="hi1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem perspiciatis similique eligendi quas quo reprehenderit ullam. Commodi repellendus distinctio similique voluptate sint debitis est eos minus eaque enim excepturi perspiciatis Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit impedit eveniet consequatur itaque ipsa hic est adipisci pariatur exercitationem mole Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius amet perferendis sint accusamus!stias mollitia debitis quae commodi ut a facilis alias dolorum doloribus!
</p>
</div>
<h1>to This:</h1>
<div class="hi2">
<p>Lorem ipsum dolor sit amet, consectetur adipisici Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ipsam eaque consequatur eligendi ullam soluta esse eius sapiente recusandae nostrum. ng Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis odio fuga nisi incidunt.elit. Aliquam expedita praesentium quo ratione? Nisi maxime reprehenderit debitis ex aspernatur itaque voluptate dicta neque vel eos quia repudiandae culpa harum bla bla bla cbla ullam...</p>
</div>
<h1>and this is what happend</h1>
<div class="hi3">
<p class="p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus expedita ex perspiciatis magni in architecto totam ut nam vel soluta deleniti rerum eos molestiae commodi laborum accusamus culpa? Porro corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia ex fuga quibusdam eius voluptates odio pariatur maiores ipsa saepe tempore autem facilis voluptatum dignissimos suscipit architecto iste! Enim adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ipsum est rerum quis consequatur nostrum possimus cupiditate dolor aspernatur modi numquam dolore culpa sunt iste ea voluptatibus doloremque accusamus reiciendis!.
</p>
</div>
div{
width:250px;
height: 250px;
background: yellow;
margin: 85px 15px;
}
.hi1{background: tomato;}
.hi2{background: royalblue;}
.p{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;}

white-space: nowrap is preventing it from going to the next line. In fact, that's exactly what it's intended to do.
http://www.w3schools.com/cssref/pr_text_white-space.asp
EDIT: If you want to make text not overflow, consider where you are adding that property. You want the container not to overflow, not the text. So add overflow: hidden or text-overflow: ellipsis to your div, not to the p tag.
http://www.w3schools.com/cssref/pr_pos_overflow.asp