Let’s talk HTML and CSS: about DIV and SPAN : behindthecodes.com - Programming, web design, gadgets, and anything beyond

Nov '11

3:31 pm

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: