HTML/CSS Float Left and Top/Bottom without position absolute/fixed - html

Question

I'm working on my Chemistry application, and I'm struggling with displaying div element how I imagined it could work.
My goal is to have divs floating left as on image: so when hiding red/green div everything stays in order.
Is it even possible without using absolute/fixed positioning? I really need those divs to float left and be aware of each other so I can't solve it by position absolute. I tried experimenting with adding margin, but other div cannot fit into place taken by other element margin.
Thank you for your time spent on reading this post!
Code added:
<div class='container'>
<div class='base-cell'>S</div>
<div class='base-cell'>O</div>
<div class='index-cell'>3</div>
<div class='charge-cell'>2-</div>
</div>
.container{
border: 1px solid red;
height: 1.5em;
text-align: center;
position: relative;
}
.base-cell{
position: relative;
background: red;
height: 1em;
float: left;
margin-top: 0.2em;
font-size: 1em;
border: 1px solid orange;
display: inline-block;
}
.index-cell{
position:relative;
height:0.7em;
margin-top:1.5em;
font-size:0.7em;
display:table;
background: blue;
float:left;
}
.ion-index-cell{
position: relative;
height: 1em;
font-size: 0.7em;
border: 1px solid cyan;
display: table;
background: green;
}
.charge-cell{
height: 1em;
font-size: 0.7em;
border: 1px solid blue;
display: inline-block;
float:left;
}
Edit:
Thank you for your replies, I really don't want to use middle column solution, because of another requirement: sorry for not showing full context before.
As you can see in the picture, all elements flow to the left, and I may need to hide some by using display: none. Thats why I'm looking for parentless solution:

Answer 1

If you flip the diagram on its side then its a lot easier to build using floats. You can use transforms to flip it back up the correct way.
.wrap {
max-width: 100px;
-webkit-transform: rotate(90deg) translate(-170px, -10px);
-moz-transform: rotate(90deg) translate(-170px, -10px);
-ms-transform: rotate(90deg) translate(-170px, -10px);
transform: rotate(90deg) translate(-170px, -10px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
overflow: hidden;
}
.block {
height: 40px;
width: 100%;
float: left;
border: 1px solid #000;
box-sizing: border-box;
margin: 10px 0;
}
.block-left {
max-width: 40%;
border-color: #f00;
}
.block-right {
max-width: 40%;
float: right;
border-color: #0f0;
}
<div class="wrap">
<div class="block block-top"></div>
<div class="block block-left"></div>
<div class="block block-right"></div>
<div class="block block-bottom"></div>
</div>
<div class="wrap">
<div class="block block-top"></div>
<div class="block block-right"></div>
<div class="block block-bottom"></div>
</div>
<div class="wrap">
<div class="block block-top"></div>
<div class="block block-left"></div>
<div class="block block-bottom"></div>
</div>

Answer 2

This may help you somewhat. Its very crude html but I believe does what your looking for. It should at least help you in the direction your looking to go.
<div style="height:100%;">
<div style="float:left; width: 33%;">
Content 1
</div>
<div style="float:left; width: 33%;">
<div style="height:50%">
<div>Content 2</div>
</div>
<div style="height:50%;">
<div>Content 3</div>
</div>
</div>
<div style="float:left; width: 33%;">
Content 4
</div>
</div>

Answer 3

From your question, it looks like you just want to use float:left instead of position:absolute which you are using currently and still want to hide the green and red boxes, while keeping all other boxes intact.
This can be achieved by using float:left; on the boxes while setting the opacity:0; on the red and green boxes (also visibility:hidden work).

Answer 4

So I'm not sure how you are handling the mark up but hopefully you are doing it the proper way. It seems like you have a grid-format in place but you are not applying this on the middle column.
What you should be doing is creating three columns and then when necessary, you can hide the middle column. The red and green box can exist within the middle column. This way if you ever say wanted to add those red/green sections in the left or right column, you can easily do that.
I have created an example below. I have also added a class called hide which can apply to the different columns and/or inner boxes. Like I was mentioning above, you should be adding hide to the middle col if you want to hide everything in the middle column. Apply hide to the inner elements if you want to hide one of those.
I do some absolute positioning in the middle column but you don't actually need to do this -- you can change this to float: left and simply set a margin-top for the bottom box.
.col {
float: left;
width: 100px;
height: 200px;
border: 1px solid black;
margin-left: 10px;
position: relative;
}
.inner {
width: 100px;
height: 75px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.top {
top: 0;
border: 1px solid red;
}
.bottom {
bottom: 0;
border: 1px solid green;
}
.hide {
display: none;
<div class="col left"></div>
<div class="col middle">
<div class="top inner"></div>
<div class="bottom inner"></div>
</div>
<div class="col right"></div>
EDIT: I notice you posted your CSS and you're using display: table. For that I would like to refer you to this link.
shouldiusetablesforlayout.com
EDIT2: I see you updated your question but the overall concept applies. You are still dealing with columns but I guess in your case now, you kind of want those columns in containers.
.col-container {
float: left;
margin-bottom: 10px;
}
.col {
float: left;
width: 100px;
height: 200px;
border: 1px solid black;
margin-left: 10px;
position: relative;
}
.inner {
width: 100px;
height: 75px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.top {
top: 0;
border: 1px solid red;
}
.bottom {
bottom: 0;
border: 1px solid green;
}
.hide {
display: none;
}
<div class="col-container">
<div class="col left"></div>
<div class="col middle">
<div class="top inner"></div>
<div class="bottom inner hide"></div>
</div>
<div class="col right"></div>
</div>
<div class="col-container">
<div class="col left"></div>
<div class="col middle">
<div class="top inner hide"></div>
<div class="bottom inner"></div>
</div>
<div class="col right"></div>
</div>
<div class="col-container">
<div class="col left"></div>
<div class="col middle">
<div class="top inner"></div>
<div class="bottom inner"></div>
</div>
<div class="col right"></div>
</div>
If you view it in full page, and shrink the window size, you'll see the 3rd col-container to appear on the second line. If you want to make sure it only has two columns or things break at certain points you can adjust for that by either adding clear to certain elements, distinguishing row classes, etc.

Answer 5

I would use flexbox and justify-content: space-between; should be the thing you are asking for.
<article>
<div>left</div>
<div class="content">
<p>top</p>
<p>bottom</p>
</div>
<div>right</div>
</article>
article {
display: flex;
min-height: 10em;
}
article > div {
flex: 1 1 calc(33.3333% - 1em);
margin: 0.5em;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Codepen sample (w/ -prefix-free, styling and as SCSS)
Simple ;)