Issue
I have 4 DIVs, one outer, and 3 inner divs that I want to align in the same row inside the main DIV
<div id="main" style="border: solid 1px black;float:left;">
<div id="left" style="border: solid 1px red;">
Left
</div>
<div id="middle" style="border: solid 1px green;">
Middle
</div>
<div id="right" style="border: solid 1px blue;">
Right
</div>
</div>
By default the divs are stacked one on top of another inside the main DIV, so I used float
to make them appear in a row. But once adding float, the divs no longer appear inside the main DIV. How can I line up the 3 divs inside tha main div using css?
Solution
DIV standard display is block. You need to change the outer DIV to display: flex. The standard behavior of display flex is to put the child DIVs in a row.
If you want to centralize them in the vertical and horizontal axis, you can use along display: flex, align-items: center and justify-content: center.
Float is used when you want to position an image near a text. Don't use this type of position for this case.
Answered By - Alex_Lima84
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.