Finale: Step into a table-less table
That bunch of floated DIVs look like a row in a table, don’t you think? So how can we have several rows of that? Simple: wrap them in another block element, for example in another DIV. If you wish, you can style this row container div however you want, as demonstrated below.
100px DIV with red border
100px DIV with green background
100px DIV with a lot of styles
100px DIV with big font + height
100px DIV with red border
100px DIV with green background
100px DIV with a lot of styles
100px DIV with big font + height
<div style="border: 2px dashed pink"> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; border: 1px solid red"> 100px DIV with red border</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; background: green"> 100px DIV with green background</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; border: 3px solid orange; padding: 5px; background: brown; color: white"> 100px DIV with a lot of styles</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; height: 100px; border: 7px solid purple; padding: 20px; background: cyan; font-size: 12pt"> 100px DIV with big font + height</div> <div style="clear: both"></div> </div> <div style="background: pink"> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; border: 1px solid red"> 100px DIV with red border</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; background: green"> 100px DIV with green background</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; border: 3px solid orange; padding: 5px; background: brown; color: white"> 100px DIV with a lot of styles</div> <div style="margin-right: 5px; margin-top: 5px; float: left; width: 100px; height: 100px; border: 7px solid purple; padding: 20px; background: cyan; font-size: 12pt"> 100px DIV with big font + height</div> <div style="clear: both"></div> </div>
And before we bid adieu, let me show you how we can use all these knowledge into creating a table-less table. Behold!
OK?
Qty
Item
☐
2 dozens
Egg
☑
1 gallon
Fat free milk
☑
3 packs
Cheese (12 slices per pack)
☐
1 loaf
Sliced bread
NOTE:
Pay with cash. Also don’t forget to keep the receipt for reimbursement. And DO NOT EAT THEM WITHOUT MY PERMISSION!!! I’m watching you….
Pay with cash. Also don’t forget to keep the receipt for reimbursement. And DO NOT EAT THEM WITHOUT MY PERMISSION!!! I’m watching you….
Mom.
<div style="padding: 3px"> <div style="background: green; color: white; font-weight: bold; border-bottom: 1px solid black"> <div style="margin-right: 5px; float: left; width: 3em"> OK?</div> <div style="margin-right: 5px; float: left; width: 7em"> Qty</div> <div style="margin-right: 5px; float: left; width: 20em"> Item</div> <div style="clear: both"></div> </div> <div style="border-bottom: 1px solid black"> <div style="margin-right: 5px; float: left; width: 3em"> ☐</div> <div style="margin-right: 5px; float: left; width: 7em"> 2 dozens</div> <div style="margin-right: 5px; float: left; width: 20em"> Egg</div> <div style="clear: both"></div> </div> <div style="background: lightyellow; border-bottom: 1px solid black"> <div style="margin-right: 5px; float: left; width: 3em"> ☑</div> <div style="margin-right: 5px; float: left; width: 7em"> 1 gallon</div> <div style="margin-right: 5px; float: left; width: 20em"> Fat free milk</div> <div style="clear: both"></div> </div> <div style="border-bottom: 1px solid black"> <div style="margin-right: 5px; float: left; width: 3em"> ☑</div> <div style="margin-right: 5px; float: left; width: 7em"> 3 packs</div> <div style="margin-right: 5px; float: left; width: 20em"> Cheese (12 slices per pack)</div> <div style="clear: both"></div> </div> <div style="background: lightyellow; border-bottom: 1px solid black"> <div style="margin-right: 5px; float: left; width: 3em"> ☐</div> <div style="margin-right: 5px; float: left; width: 7em"> 1 loaf</div> <div style="margin-right: 5px; float: left; width: 20em"> Sliced bread</div> <div style="clear: both"></div> </div> <div style="background: lightgreen"> <div> <b>NOTE:</b><br /> Pay with cash. Also don't forget to keep the receipt for reimbursement. And DO NOT EAT THEM WITHOUT MY PERMISSION!!! I'm watching you....<br /> <br /> Mom. </div> </div> </div>
I hope this article helps you all.
Questions? Problems? Leave a comment and I’ll try my best to help.