I'm trying to align div horizontally as the browser resizes, currently, I have 3 divs. As per the requirement, I can add an additional div. My problem is as soon i increase the window size above 2500, the right side of the screen becomes empty & all the divs are floating to left. As I cannot set the div width to 30-33% as per the requirement. Below is my code. kindly help.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
float: left;
display: flex;
width: 100%
}
div.box {
float: left;
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 30%;
border: 1px solid #cccccc;
}
<div >
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
CodePudding user response:
Use justify-content: center;
when you are using flex
. This means the flexed contents will always be centered on all screen types.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 33.33%;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div >
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Edit ~ add another div, reduce the %
the div covers.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 25%;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div >
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
CodePudding user response:
Remove float
and only use from flex
:
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
width:100%;
}
div.box {
background-color: #ffffff;
padding: 10px;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width:33%;
border:1px solid #cccccc;
word-break: break-word;
}
<div >
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div >
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>