Floating technique, urgent!! please help XD

Question

How to create 3 columns layout or more using css. trust me I've tried, I just wanna know from u guys for more techniques ... thanks before.....

Answer 1

@Oeoes
In your center section, put float: left and reduce the width

Answer 2

<table>.....

Answer 3

use a container div and style it
.row {
display: table;
width: 100%;
}
and use as many divs inside as columns and style them
.column {
display: table-cell;
width: calc(100% / n); /* replace n with number of divs in that row */
}
or u could create ur own grid system
[class*="col"] { /* selects every element whose class contains "col" */
display: table-cell;
}
.col-1 {width: calc(100% / 1);
.col-2 {width: calc(100% / 2);
etc...
ik using calc in the width for known values like col1 would easily b 100% and 2 would b 50%, I just like them being aligned :p

sorry forgot to continue...

then just set the html as
<div class="row">
<div class="col-1">content</div>
</div>
<div class="row">
<div class="col-2">content</div>
<div class="col-2">content</div>
</div>
etc

Answer 4

https://code.sololearn.com/WSiTH7F0wUWU/?ref=app

Answer 5

just make divs and keep doing {float: left} but if those three divs exceed the width of the device it will automatically go below

Answer 6

If you want dispatch only one html content stream on n columns, you can use css 'column' family properties:
https://code.sololearn.com/WbCU8pf68o08/?ref=app

This code example works with once columned paragraph with only raw text content, but it can support any kind of container and embeded content inside: check this modified second one to be convinced:
https://code.sololearn.com/WwGmC2988EY9/?ref=app

Answer 7

@MCJEH:

Grid system could be a nice future feature, but is not already good cross-brower supporting, unfortunately ;P

Flexbox is another powerful way to design advanced layout... and start to be fully supported by browsers now ;)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Answer 8

thank you so much everyone..... :D

Answer 9

https://code.sololearn.com/Wk0s3TndZ34N/?ref=app

the float right box, looks like affected by center box, I tried to shrink the width of right box but useless, could you check the code please XD