New course! Every coder should learn Generative AI!
Try a free lesson- 1
Div
How can I put 6 divs in two columns and three rows, respectively? https://code.sololearn.com/W7hcBB1rdkRZ/?ref=app
25 Answers
+ 4
Mohsen why avoiding table for formatting? If that's only related to the unadvised semantical misuse, you could workaround the problem...
The idea is to use table behavior without using table semantic, thanks to the 'display' css property wich provide 'table', 'table-row' and 'table-cell' among the possible values ;)
That results in a few less flexible layout than 'flex' nor 'grid', but strongest support on older browsers... and anyway, offers a lot of possibilities ^^
https://code.sololearn.com/W75cS68V5sP1/#html
+ 4
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
And bro please show your attempt first then ask questions ok
+ 2
You can use grid function.
You should share your code too.
+ 2
It is very easy with grid however you can use float too
+ 2
https://code.sololearn.com/W88HFLBK9hCh/?ref=app
+ 1
Go for it
+ 1
You should use the table tag for rows and columns
+ 1
No... 'float' is very specific, even if beginers tends to put it everywhere once they discover it... As for positioned modes (absolute, relative -- but in this cases rookies found it not enough intuitive :P). Notice however, that 'float' has is use cases, and its not evil: we just must to not abuse from it ;)
The only best alternatives are 'flex' and 'grid', while you accept to have some visitors with old browsers where you design will broke ^^
Anyway, 'table' is safety, 'flex' is near futur (few browsers doesn't support at least root features), and 'grid' start to be introduced in more and more browsers/engines :)
+ 1
You could use float, but you could only float into three different positions: left middle and right. But table can do a lot more
+ 1
Mason Arb yes, I wanted not to say that it wasn't possible with 'float', but that was the worst way to do this...
However, 'float' has only 2 values possible: 'left' and 'right'... Even if sometimes we would dream of a 'float:center', that sounds logical: how browsers should be decide in wich order placing the center-floating element?
+ 1
Oh I thought there was a middle
+ 1
One or two things useful to know when we're using display css property with 'table'-family values:
We are not mandatory to use explicitly the structure table > row > cell, and we could "forgot" the row if we have a table with only one row (a phantom element would be implicitly inserted, acting as the row container.
I don't remember if we can use just the cell: anyway, the use case is rare, because you often need to define some css properties on the table-like element, and phantom element cannot be accessed through css nor js ^^
The display property could be applied on any html element, including <body> and... <html>!
So, if we want, we could define 'display:table;' for <html> and 'display:table-cell;' for the <body>, so it as the behaviour of a cell... with 100% height for <html> and <body>, we could relatively easily center the body content in the page (text-align:center; vertical-align;middle;) or just do a container of any size with centered content in it (both vertically and horizontally)
0
You're certainly right, but I don't want to use tables for formatting.
0
According to the file I put, can this be done with float and clear?
0
Thank you for your help. Maybe it would be better for me to do this with float to find out if it gets into trouble or not!?!
0
I used flex.....
0
Amazing
0
Thank Rijwaan Ali for your help. But this code is arranged in 2 rows and 3 columns, not 3 rows and 2 columns.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Bash
0 Votes
Links of cmy codes
5 Votes
Why exception is not handled
1 Votes
Please help
0 Votes
Link
6 Votes
Ruby
2 Votes