On the attached screenshot, you can see that pink div is aligning to right, instead I want it to be on the left side and attached to lime column.
Here, is my code:
.buildings{
background: pink
}
.main-fs-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(279px, auto));
}
.sidebar-left{
width: 100%;
max-width: 279px;
background-color: lime;
padding: 12px 10px 12px 15px;
position: relative
}
.floor-stack-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(279px, auto));
justify-content: space-between;
}
.unit-detail-right{
width: 279px;
background: yellow;
padding: 12px;
}<div class="main-fs-container">
<aside class="sidebar-left">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga id est debitis vitae, corporis velit harum voluptates magni, doloremque eos in possimus voluptate. Distinctio possimus dolores rem a corporis, ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe veniam consequatur culpa recusandae soluta nesciunt, odio hic cupiditate perspiciatis impedit iusto temporibus, fugit placeat nemo modi illum eos similique quam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ducimus laudantium cum, quod laboriosam voluptate facere omnis obcaecati ab minima eius? Quae, dolorem temporibus dicta! Quibusdam obcaecati commodi voluptatem ea!
</p>
</div>
</aside>
<div class="floor-stack-main">
<div class="buildings-column">
<div class="buildings">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
<div class="buildings">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</div>
<div class="unit-detail-right">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit asperiores nihil corporis delectus. Ullam unde nesciunt ratione debitis cumque iure, ad, neque aut ex incidunt natus hic consectetur perferendis quo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe veniam consequatur culpa recusandae soluta nesciunt, odio hic cupiditate perspiciatis impedit iusto temporibus, fugit placeat nemo modi illum eos similique quam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ducimus laudantium cum, quod laboriosam voluptate facere omnis obcaecati ab minima eius? Quae, dolorem temporibus dicta! Quibusdam obcaecati commodi voluptatem ea!
</p>
</div>
</div>
</div>
</div>Basic, concept here:
Main idea:
- set lime column to 279px max width and let right column take remaining width(right column means pink + yellow)
- from this right column, let yellow take 279px widht and allow pink to take necessary remaining width
- pink should be aligned to left instead of right.
>Solution :
I have tweaked the css a bit. Let me know if this is what you needed.
.buildings{
background: pink
}
.main-fs-container {
display: grid;
grid-template-columns: 279px 1fr;
}
.sidebar-left{
background-color: lime;
padding: 12px 10px 12px 15px;
position: relative
}
.floor-stack-main {
display: grid;
grid-template-columns: auto 279px;
justify-content: space-between;
}
.unit-detail-right{
background: yellow;
padding: 12px;
}<div class="main-fs-container">
<aside class="sidebar-left">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga id est debitis vitae, corporis velit harum voluptates magni, doloremque eos in possimus voluptate. Distinctio possimus dolores rem a corporis, ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe veniam consequatur culpa recusandae soluta nesciunt, odio hic cupiditate perspiciatis impedit iusto temporibus, fugit placeat nemo modi illum eos similique quam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ducimus laudantium cum, quod laboriosam voluptate facere omnis obcaecati ab minima eius? Quae, dolorem temporibus dicta! Quibusdam obcaecati commodi voluptatem ea!
</p>
</div>
</aside>
<div class="floor-stack-main">
<div class="buildings-column">
<div class="buildings">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
<div class="buildings">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</div>
<div class="unit-detail-right">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit asperiores nihil corporis delectus. Ullam unde nesciunt ratione debitis cumque iure, ad, neque aut ex incidunt natus hic consectetur perferendis quo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe veniam consequatur culpa recusandae soluta nesciunt, odio hic cupiditate perspiciatis impedit iusto temporibus, fugit placeat nemo modi illum eos similique quam.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ducimus laudantium cum, quod laboriosam voluptate facere omnis obcaecati ab minima eius? Quae, dolorem temporibus dicta! Quibusdam obcaecati commodi voluptatem ea!
</p>
</div>
</div>
</div>
</div>