How to create three boxes in the same div using HTML and CSS ?
Three or more different div can be put side-by-side using CSS in the same div. This can be achieved with flexbox – but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work. Use CSS property to set the height and width of div.
Syntax:
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; flex-grow: number | initial | inherit;
Example: This example illustrates how to create 3 boxes in the same div with regular HTML and CSS.
<!DOCTYPE html> < html lang = 'en' > < head > < meta charset = "utf-8" > < title > How to create 3 boxes in the same div using HTML and CSS ? </ title > < style > body, html { height: 100%; width: 100%; overflow: hidden; } .box-wrapper { height: 100vh; width: 100vw; display: flex; flex-direction: column; } #box1 { padding: 10px; height: 30px; line-height: 30px; border: solid 1px green } #box2 { height: 15px; padding: 8px; border: solid 1px blue } #box3 { padding: 10px; flex-grow: 1; display: flex; flex-direction: row; border: solid 1px green } #box4 { flex-grow: 2; border: solid 1px orange } .middle-column { flex-grow: 1; display: flex; flex-direction: column; } .middle-column div { flex-grow: 1; margin: 0 8px; border: solid 1px red; } .middle-column div+div { margin-top: 8px } #box8 { flex-grow: 1; border: solid 1px black } </ style > </ head > < body > < div class = "box-wrapper" > < div id = "box1" > GeeksforGeeks 1 </ div > < div id = "box2" > GeeksforGeeks 2 </ div > < div id = "box3" > < div id = "box4" > GeeksforGeeks 4 </ div > < div class = "middle-column" > < div id = "box5" > GeeksforGeeks 5 </ div > < div id = "box6" > GeeksforGeeks 6 </ div > < div id = "box7" > GeeksforGeeks 7 </ div > </ div > < div id = "box8" > GeeksforGeeks 8 </ div > </ div > </ div > </ body > </ html > |
chevron_right
filter_none
Output: