JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menu-left">
menu left
</div>
<div class="menu-right">
menu right
</div>
<div class="middle">
<div class="menu-middle">
menu middle
</div>
<div class="content">
<div class="floating">
floating content
</div>
bla bla bla
<div class="clear">
other content
</div>
</div>
</div>
CSS
.menu-left {
width: 100px;
height: 200px;
background-color: #f00;
float: left;
}
.menu-right {
width: 100px;
height: 100px;
background-color: #0f0;
float: right;
}
.middle {
margin-right: 100px;
margin-left: 100px;
}
.menu-middle {
background-color: #00f;
}
.content {
background-color: #ff0;
overflow: hidden;
}
.content-container {
}
.floating {
float: right;
}
.clear {
clear: both;
}