responsive blocks besides main div
Multi tool use
Clash Royale CLAN TAG#URR8PPPresponsive blocks besides main div
I have a main DIV {width:100%; max-width: 900px} over body.
{width:100%; max-width: 900px}
I need to place one more DIV exactly over the left free space and another over the right space. May it be done without Javascript and how?
Also with the styles you have shown, that div would be left aligned so there would be no space on the left
– Pete
14 mins ago
yes, {MARGIN:0 AUTO} for main div
– Alex V
5 mins ago
1 Answer
1
You can use flex to achieve what you want:
.container {
display:flex; /* make container flex */
flex-direction:row; /* line up children in a row */
width:100%;
}
.center { /* this is your main div */
width: 100%;
max-width: 900px;
height: 200px; /* test value only */
background:green;
}
.col {
flex-grow:1; /* make side columns grow to fill any remaining space */
background:blue;
}
<div class="container">
<div class="col"></div>
<div class="center"></div>
<div class="col"></div>
</div>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Welcome to SO. Please take a tour of the help centre to see how to ask a good question. We cannot help you if you do not provide enough code to re-create your problem - see how to create a Minimal, Complete, and Verifiable example
– Pete
16 mins ago