div position and relationship between item and it's upper layer container

Hi,

I am very confused with the div tag and span tag, what are the difference? What's the difference between a class and id and span?
if id is used once and class can be used many times, why not just use class? and what does span do?

I want to make the following layout, if I use the following code, how can I position a box at the bottom to it's container?
I searched on internet and some posts said to use position: absolute at bottom, but I want the box at the bottom relative of it's container only, is there any way to realize this kind of layers positioning of relative relationship?

Thanks.

.wraper { width:680;} /* A gray box */
.container {width: 335; float:left;} /*B2 and B2, blue boxes */
.footer {width: 333, what do I put here to make sure it goes to bottom of .container? }
.subtextl (float:left;}
.subtextr (float:right;}
<div class="wraper">
<div class="container"> <div class="footer"><div class="subtext"> textleft </div><div class="subtextl"> textleft </div></div> </div> /* B1 box */
<div class="container"> <div class="footer"><div class="subtext"> textright</div><div class="subtextr"> textright </div></div> </div> /* B2 box */
</div>

 

Hey Bud,

Divs are used to group block elements and spans are used to group in-line elements. See W3C Schools for more info on the technical stuff. The elements on your website that does not change from page to page (header, footer, body content area etc) are given ID's that are unique. Stuff that appears more that once is given a class. You can use class for everything won't make any difference really.

<style>
.wraper { width:680px;background:red;float:left;}
.bluebox {background:blue;margin:10px;float:left;padding:10px;width:300px;}
.p-left {float:left;width:150px;background:green;}
.p-right {float:left;width:150px;background:yellow;}
</style>




<div class="wraper">
	<div class="bluebox">Content<br style="clear:both;">
		<div class="p-left">text left</div>
		<div class="p-right">text right</div>
	</div>


	<div class="bluebox">Content<br style="clear:both;">
		<div class="p-left">text left</div>
		<div class="p-right">text right</div>
	</div>
</div>

Code (markup):

Regards

 

So in-line is a kind of block which has only a line. Can I consider div as a all-in-one screw driver while span as flat screw driver? you can use all-in-one in any situation but a special one you can only use in that particular situation?

If you had a key that you can open all the doors, I just wonder why a separate key of a particular door need to be kept?

Thanks.

 

maybe webdesignfromscratch.com/html-css/css-block-and-inline/ will help explain it further.

 

Everything stated here, except the last, sentance is true.
Let's say you are a newbie and you have absolutely no idea what are IDs and classes, but you need to achieve this : when a link is clicked, the page just slides/drops to the footer, or some comment/post, for example. And how do you do it? Well, you simply add href="#somedivID#". The number sign ("#") actually represents IDs, like in the CSS syntax. If you were to use classes, well it wouldn't work.
That's only one of the reasons. Not to mention the difference between "getElementByID()" and "getElementsByClassName()"....

 

nice expansion and explanation

 

Thank you for the feedback.

Now I figure it out the difference when I use border over a class, if the class is in span, if the sentence has a 2nd line, I can tell the difference using span and div, span is having border line by line, div has the border over the whole area. It really takes practice for one to understand. Thanks for any input!