behind
the  
codes
{

Programming, web design, gadgets, and anything beyond
 

Let’s talk HTML and CSS: about DIV and SPAN

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.

Execution
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

Source
				<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!

Execution
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….

Mom.

Source
				<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">
							 &#x2610;</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">
							 &#x2611;</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">
							 &#x2611;</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">
							 &#x2610;</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.

Share and Enjoy:
  • Print
  • email
  • RSS
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • Reddit
  • Digg
  • Slashdot

Pages: 1 2 3 4 5 6

Leave a Reply