posting area not expanding - css

Question

I'm coding an area which is intended for posting on a forum, and therefore should expand with the content as it grows longer. I coded it with a min-height, and thought it would move with the rest as it expanded. Unfortunately, the posting area itself expands, but the areas/footers beneath it don't move down. They stay firmly in place.
I've searched all over, and saw mentions of floats and clearfixes, so I'm not sure if that's what I need to do. I attempted some clearfix methods, but they either malfunctioned or simply didn't work at all. I also tried adding 'overflow:hidden' to all of the sections with floats, but that did nothing. I'm also unfamiliar with coding with flexboxes right now, so that isn't a suitable solution for me at this time.
I think having some new sets of eyes on this would be very helpful. Please help me see where I'm going wrong.
Unfortunately, I don't have a codepen link for this one because I changed it significantly from its original model when I put it on my site. I can link to a thread where it's showing the issue though: https://lovedive.jcink.net/index.php?showtopic=5&st=0&#entry20
Here's the full code and css. It's long so hopefully that's not a pain.
.posting {
width: 1100px;
min-height: 1380px;
background-color: #f7f7f7;
border-radius: 15px 15px 10px 10px;
border: 1px solid #eee;
position: relative;
z-index: 0;
margin-bottom: 20px;
}
.proftop {
width: 1100px;
height: 150px;
padding: 0px;
background-image: linear-gradient( to bottom right, rgba(202, 186, 202, 0.2), rgba(123, 83, 123, 0.7));
/****CHANGE FOR GROUP****/
border-radius: 15px 15px 0px 0px;
overflow: hidden;
}
.proftopname {
width: 800px;
padding: 15px;
font-family: abril fatface;
font-size: 45px;
text-align: center;
color: #ffffff;
text-transform: lowercase;
text-shadow: 1px -1px 0px rgba(0, 0, 0, 0.2), -1px 1px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(0, 0, 0, 0.2), -1px -1px 0px rgba(0, 0, 0, 0.2);
letter-spacing: 2px;
position: absolute;
left: 0px;
top: 30px;
}
.proftopname a {
color: #ffffff;
}
.proftoppic {
position: absolute;
top: 0px;
right: 0px;
}
.proftoppic img {
object-fit: cover;
object-position: center;
height: 150px;
width: 250px;
border-radius: 100px 20px 0px 100px;
}
/*** CHARACTER INFO BENEATH TOP BAR ***/
.picandlinks {
height: 10px;
width: 10px;
display: inline-block;
position: absolute;
left: 0px;
}
.profroundpic {
height: 100px;
width: 100px;
background-color: #f7f7f7;
padding: 15px;
border: 1px solid rgba(123, 83, 123, 0.5);
/****CHANGE FOR GROUP****/
border-radius: 100px;
margin: 40px;
display: inline-block;
position: absolute;
top: -20px;
left: 0px;
z-index: 10;
}
.profroundpic img {
object-fit: cover;
object-position: center;
height: 100px;
width: 100px;
border-radius: 100px;
}
.topicsposts {
width: 80px;
height: 100px;
padding: 10px 10px 0px;
margin: 1px;
background-color: transparent;
display: inline-block;
position: absolute;
left: 140px;
top: 32px;
z-index: 11;
}
.topicsposts g {
height: 15px;
width: 15px;
padding: 8px 10px 10px 10px;
border-radius: 100px;
background-color: rgba(202, 186, 202, 1);
/****CHANGE FOR GROUP****/
font-size: 15px;
color: #fff;
position: absolute;
display: inline-block;
left: 35px;
top: -10px;
}
.topicsposts h {
height: 15px;
width: 15px;
padding: 8px 10px 10px 10px;
border-radius: 100px;
background-color: rgba(202, 186, 202, 1);
/****CHANGE FOR GROUP****/
font-size: 15px;
color: #fff;
position: relative;
display: inline-block;
left: 35px;
top: 25px;
}
.topicsposts j {
height: 15px;
width: 15px;
padding: 8px 10px 10px 10px;
border-radius: 100px;
background-color: rgba(202, 186, 202, 1);
/****CHANGE FOR GROUP****/
font-size: 15px;
color: #fff;
position: relative;
display: inline-block;
top: 68px;
left: -15px;
}
.topicsposts g:hover {
background-color: rgba(163, 135, 163, 1);
/****CHANGE FOR GROUP****/
transition: ease-in 0.3s;
cursor: crosshair;
}
.topicsposts h:hover {
background-color: rgba(163, 135, 163, 1);
/****CHANGE FOR GROUP****/
transition: ease-in 0.3s;
cursor: crosshair;
}
.topicsposts j:hover {
background-color: rgba(163, 135, 163, 1);
/****CHANGE FOR GROUP****/
transition: ease-in 0.3s;
cursor: crosshair;
}
.topicsposts a {
font-size: 15px;
color: #fff;
text-decoration: none;
}
.hiddenbubbleone {
height: 170px;
width: 200px;
border-radius: 150px;
background-color: #f7f7f7;
position: absolute;
z-index: 9;
top: 150px;
left: 10px;
}
.charinfo {
width: 870px;
height: 100px;
border-radius: 2px;
background-color: #eee;
padding: 20px;
margin: 15px;
position: absolute;
right: 0px;
font-family: poppins;
display: block;
}
.charinfo f {
font-size: 25px;
height: 25px;
color: rgba(247, 247, 247, 1);
letter-spacing: 1px;
padding: 5px 20px 0px 20px;
margin-top: 30px;
font-family: staatliches;
letter-spacing: 4px;
display: block;
text-shadow: 1px -1px 0px rgba(125, 131, 137, 0.5), -1px 1px 0px rgba(125, 131, 137, 0.5), 1px 1px 0px rgba(125, 131, 137, 0.5), -1px -1px 0px rgba(125, 131, 137, 0.5);
}
.charinfo k {
padding: 5px 15px;
margin: 5px;
border-radius: 5px;
height: 10px;
font-size: 10px;
color: #888888;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 1px -1px 0px rgba(255, 255, 255, 0.2), -1px 1px 0px rgba(255, 255, 255, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.2), -1px -1px 0px rgba(255, 255, 255, 0.2);
}
/******** POSTING AREA *********/
.postarea {
min-height: 600px;
width: 720px;
padding: 30px;
font-family: poppins;
font-size: 12px;
color: #888;
letter-spacing: 1px;
text-align: left;
background-color: rgba(255, 255, 255, 0.6);
border-top: 40px solid #eee;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
border-radius: 5px;
position: absolute;
display: inline-block;
top: 320px;
left: 20px;
}
.postdatetime {
width: 300px;
font-family: montserrat;
font-size: 10px;
letter-spacing: 2px;
text-align: left;
text-transform: uppercase;
color: #666;
position: absolute;
top: 335px;
left: 40px;
z-index: 10;
}
.postdatetime a {
text-decoration: none;
color: rgba(123, 83, 123, 1);
/****CHANGE FOR GROUP****/
cursor: crosshair;
}
.posteditbuttons {
width: 250px;
font-family: montserrat;
font-size: 10px;
letter-spacing: 1px;
text-align: right;
text-transform: uppercase;
color: #666;
position: absolute;
top: 335px;
right: 320px;
z-index: 10;
}
.posteditbuttons a {
text-decoration: none;
color: rgba(123, 83, 123, 1);
/****CHANGE FOR GROUP****/
cursor: crosshair;
margin-left: 10px;
display: inline-block;
}
/******** MINI PROFILE ********/
.miniholder {
height: 400px;
width: 230px;
padding: 25px 15px;
border-radius: 5px;
border: 1px solid #eee;
background-image: linear-gradient( to bottom, rgba(202, 186, 202, 0.4), rgba(123, 83, 123, 0.3));
/****CHANGE FOR GROUP****/
position: absolute;
display: inline-block;
top: 320px;
right: 20px;
}
.miniarea {
height: 400px;
width: 230px;
background-color: #fff;
}
/*****BOTTOM INFO******/
.bottomcontainer {
width: 1100px;
height: 550px;
border-radius: 0px 0px 10px 10px;
background-image: linear-gradient( rgba(255, 255, 255, 0.2), rgba(202, 186, 202, 0.5));
/****CHANGE FOR GROUP****/
position: absolute;
z-index: 0;
bottom: 0px;
}
/******** SHIP STATUS *******/
.shipinfo {
width: 450px;
height: 180px;
padding: 10px;
border-radius: 15px 2px 2px 15px;
border: 1px solid #ddd;
background-color: rgba(255, 255, 255, 0.7);
position: relative;
top: 205px;
display: inline-block;
}
.shipinfo1 {
height: 160px;
background-color: #fff;
border: 1px dashed #eee;
padding: 10px;
border-radius: 15px 2px 2px 15px;
}
.shipstatus {
width: 220px;
height: 100px;
position: absolute;
top: 50px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.shipstatus d {
display: block;
height: 20px;
margin-top: 25px;
font-family: poppins;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
color: #aaa;
}
.shipstatus a {
display: block;
height: 20px;
margin-top: 5px;
font-family: staatliches;
font-size: 20px;
letter-spacing: 1px;
color: rgba(123, 83, 123, 0.6);
/****CHANGE FOR GROUP****/
text-decoration: none;
cursor: crosshair;
}
.partnergif {
width: 180px;
height: 120px;
background-color: #fff;
position: absolute;
display: inline-block;
right: 40px;
top: 35px;
z-index: 1;
}
.partnergif img {
object-fit: cover;
object-position: center;
width: 180px;
height: 120px;
border: 5px solid #fff;
border-radius: 2px;
box-shadow: 1px 1px 0px #ddd, -1px -1px 0px #ddd;
}
.shipgrad {
height: 160px;
width: 50px;
background-image: linear-gradient( rgba(202, 186, 202, 0.2), rgba(123, 83, 123, 0.3));
/****CHANGE FOR GROUP****/
position: absolute;
right: 20px;
top: 20px;
z-index: 0;
}
/****** TRIGGERS ******/
.triggersinfo {
width: 450px;
height: 180px;
padding: 10px;
border-radius: 2px 15px 15px 2px;
border: 1px solid #ddd;
background-color: rgba(255, 255, 255, 0.7);
position: relative;
top: 205px;
display: inline-block;
}
.triggersinfo1 {
height: 160px;
background-color: #fff;
border: 1px dashed #eee;
padding: 10px;
border-radius: 2px 15px 15px 2px;
}
.triggersgrad {
height: 160px;
width: 50px;
background-image: linear-gradient( rgba(202, 186, 202, 0.2), rgba(123, 83, 123, 0.3));
/****CHANGE FOR GROUP****/
position: absolute;
}
.triggersicon {
height: 30px;
width: 30px;
padding: 12px 15px 16px 15px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #eee;
color: #aaa;
font-size: 30px;
position: absolute;
top: 70px;
left: 35px;
}
.trigiconpulse {
height: 30px;
width: 30px;
border-radius: 50px;
position: absolute;
top: 15px;
background-color: transparent;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
}
#keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.triggersheader {
width: 300px;
height: 30px;
padding-bottom: 30px;
font-size: 30px;
font-family: staatliches;
text-transform: uppercase;
color: #aaa;
letter-spacing: 2px;
position: absolute;
left: 130px;
border-bottom: 1px dashed #ddd;
}
.triggersheader w {
font-family: montserrat;
font-size: 10px;
letter-spacing: 1px;
display: block;
border-top: 1px dashed #ddd;
padding: 5px;
}
.triggersheader ion-icon {
position: relative;
top: 2px;
font-size: 11px;
}
.triggersbox {
height: 70px;
width: 300px;
padding: 10px 15px;
background-color: #f7f7f7;
overflow: auto;
font-family: poppins;
color: #aaa;
font-size: 11px;
text-align: justify;
position: absolute;
top: 90px;
left: 115px;
}
/*** OTHER LINKS ***/
.otherlinks {
height: 90px;
width: 1030px;
padding: 10px 20px 20px 20px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 15px;
border: 1px solid #ddd;
display: block;
position: relative;
top: 210px;
}
.otherlinksleft {
height: 60px;
width: 400px;
padding-top: 20px;
display: inline-block;
float: left;
overflow: hidden;
}
.otherlinks g {
height: 20px;
width: 20px;
padding: 15px 20px;
border-radius: 8px;
background-color: rgba(202, 186, 202, 0.4);
/***CHANGE TO GROUP COLOR***/
margin: 5px;
box-shadow: 1px -1px 0px rgba(255, 255, 255, 1), -1px 1px 0px rgba(255, 255, 255, 1), 1px 1px 0px rgba(255, 255, 255, 1), -1px -1px 0px rgba(255, 255, 255, 1);
display: inline-block;
}
.otherlinks g:hover {
background-image: linear-gradient( rgba(222, 212, 222, 0.2), rgba(163, 135, 163, 0.3));
/***CHANGE TO GROUP COLOR***/
}
.otherlinks a {
font-size: 20px;
color: #fff;
text-decoration: none;
text-shadow: 1px -1px 0px rgba(163, 135, 163, 0.5), -1px 1px 0px rgba(163, 135, 163, 0.5), 1px 1px 0px rgba(163, 135, 163, 0.5), -1px -1px 0px rgba(163, 135, 163, 0.5);
}
.otherlinksright {
height: 100px;
width: 620px;
display: inline-block;
border-left: 1px dashed #eee;
font-family: montserrat;
float: right;
}
.aliasinfoleft {
height: 100px;
width: 160px;
display: inline-block;
float: left;
margin-right: 10px;
}
.aliasinfoleft k {
display: block;
width: 150px;
height: 10px;
background-color: #fafafa;
padding: 8px 20px 15px 5px;
}
.aliasinfoleft l {
width: 50px;
font-size: 15px;
border-right: 1px dashed #bbb;
color: rgba(163, 135, 163, 1);
/***CHANGE TO GROUP COLOR***/
float: left;
}
.aliasinfoleft m {
font-size: 10px;
text-transform: lowercase;
float: right;
color: #aaa;
letter-spacing: 1px;
padding-top: 2px;
}
.aliasinfomid {
height: 100px;
width: 200px;
display: inline-block;
float: left;
margin-left: 10px;
font-family: montserrat;
font-size: 11px;
}
.aliasinfomid k {
display: block;
width: 175px;
height: 25px;
background-color: #fafafa;
padding: 8px 20px 15px 5px;
}
.aliasinfomid l {
width: 70px;
font-size: 25px;
border-right: 1px dashed #bbb;
color: rgba(163, 135, 163, 1);
/***GROUP COLOR***/
padding-top: 3px;
float: left;
}
.aliasinfomid m {
font-size: 12px;
text-transform: lowercase;
float: right;
color: #aaa;
letter-spacing: 1px;
padding-top: 7px;
overflow: hidden;
}
.aliasname {
height: 60px;
width: 200px;
padding: 25px 15px 15px 15px;
font-size: 11px;
letter-spacing: 2px;
display: inline-block;
float: right;
color: #aaa;
}
.aliasname n {
display: block;
font-size: 22px;
letter-spacing: 1px;
font-family: poppins;
font-weight: bold;
}
<div id="g-<!-- |g_id| -->">
<center>
<div class="posting">
<a name='entry<!-- |pid| -->'></a>
<div class="proftop">
<div class="proftopname">
<!-- |name| -->
</div>
<div class="fakebar1"></div>
<div class="fakebar2"></div>
<div class="proftoppic">
<img src="<!-- |field_24| -->">
</div>
</div>
<div class="picandlinks">
<div class="profroundpic"><img src="<!-- |field_25| -->"></div>
<div class="topicsposts">
<a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |poster_id| -->&type=topics">
<g>
<ion-icon name="folder-open"></ion-icon>
</g>
</a>
<a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |poster_id| -->&type=posts">
<h>
<ion-icon name="bookmarks"></ion-icon>
</h>
</a>
<a href="/index.php?act=Msg&CODE=04&MID=<!-- |poster_id| -->">
<j>
<ion-icon name="mail"></ion-icon>
</j>
</a>
</div>
</div>
<div class="hiddenbubbleone"></div>
<div class="charinfo">
<f>
<!-- |field_3| -->
</f>
<k>
<!-- |field_8| -->
</k>
<k>
<!-- |field_2| -->
</k>
<k>
<!-- |field_4| -->
</k>
<k>
<!-- |field_5| -->/
<!-- |field_6| -->
</k>
<k>
<!-- |field_7| -->
</k>
</div>
<div class="postdatetime">
<a href="<!-- |permalink| -->">
<ion-icon name="arrow-redo"></ion-icon>
</a>
<!-- |post_date| -->
</div>
<div class="posteditbuttons">
<!-- |mod_checkbox| -->
<!-- |edit_button| -->
<!-- |quote_button| -->
<!-- |delete_button| -->
<!-- |report_link| -->
</div>
<div class="postarea">
<!-- |post| -->
</div>
<div class="miniholder">
<div class="miniarea">
<!-- |mini_profile| -->
</div>
</div>
<div class="bottomcontainer">
<div class="shipinfo">
<div class="shipinfo1">
<div class="shipstatus">
<d>
<!-- |field_9| -->
</d>
<a href="<!-- |field_11| -->">
<!-- |field_10| -->
</a>
</div>
<div class="partnergif"><img src="<!-- |field_23| -->"></div>
<div class="shipgrad"></div>
</div>
</div>
<div class="triggersinfo">
<div class="triggersinfo1">
<div class="triggersgrad"></div>
<div class="triggersicon">
<ion-icon name="alert-circle"></ion-icon>
<div class="trigiconpulse"></div>
</div>
<div class="triggersheader">triggers
<w>please tag
<ion-icon name="warning-sharp"></ion-icon>
</w>
</div>
<div class="triggersbox">
<!-- |field_22| -->
</div>
</div>
</div>
<div class="otherlinks">
<div class="otherlinksleft">
<g>
<a href="DIRECTORY">
<ion-icon name="id-card"></ion-icon>
</a>
</g>
<g>
<a href="<!-- |field_12| -->" alt="character dev">
<ion-icon name="color-palette"></ion-icon>
</a>
</g>
<g>
<a href="<!-- |field_13| -->" alt="ship dev">
<ion-icon name="heart-half"></ion-icon>
</a>
</g>
<g>
<a href="<!-- |field_14| -->" alt="instagram">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</g>
<g>
<a href="<!-- |field_15| -->" alt="request">
<ion-icon name="pricetags"></ion-icon>
</a>
</g>
</div>
<div class="otherlinksright">
<div class="aliasinfoleft">
<k>
<l>
<ion-icon name="fitness"></ion-icon>
</l>
<m>
<!-- |field_16| -->
</m>
</k>
<k style="border-bottom: 1px dashed #DDD; border-top: 1px dashed #DDD;">
<l>
<ion-icon name="shirt"></ion-icon>
</l>
<m>
<!-- |field_17| -->
</m>
</k>
<k>
<l>
<ion-icon name="earth"></ion-icon>
</l>
<m>
<!-- |field_18| -->
</m>
</k>
</div>
<div class="aliasinfomid">
<k>
<l>
<ion-icon name="eye-off"></ion-icon>
</l>
<m>
<!-- |field_19| -->
</m>
</k>
<k style="margin-top: 5px;">
<l>
<ion-icon name="flash"></ion-icon>
</l>
<m>
<!-- |field_20| -->
</m>
</k>
</div>
<div class="aliasname">written by
<n>
<!-- |field_21| -->
</n>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</center>
</div>

Answer 1

Seeing your code, I will guess you do not understand much of what the code is doing.
Here there is a minimal version of something I would imagine is what you are looking for.
When you use float, the element stops taking space by itself and start to float inside its parent, so in your case, you shouldn't use it.
// Get all comments with class 'comment'
const comment = document.querySelectorAll('.comment');
// Iterate the comments in order to make it multiple
comment.forEach( function(element) {
// Add click to every element
element.addEventListener('click',function() {
// Remove class to make it full size
this.classList.remove('short_comment');
//Get the button of that block and make it dissapear
var button_read_more = this.querySelectorAll('.read_more');
button_read_more[0].remove();
});
});
footer {
width: 100%;
background: green;
}
footer div {
padding: 50px;
}
/* No floating */
.short_comment .content {
max-height: 25px;
background: yellow;
overflow: hidden;
}
<div class="comment short_comment">
<p class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<button class="read_more">read all</button>
</div>
<footer>
<div>This is the footer</div>
</footer>