This is the usual text I post here.
A bunch of text in the middle of the
page.
Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. Blah, blah, blah, blah, more stuff to fill up this web page. This <div> ends here!!!!!! |
This div is 100% of the width of the page
And has a green background.
It has a margin of .1 inch and note that margins keep the color of the prior div.
For padding see the div on the right. Padding keeps the color of the current div as opposed to margin which keeps the color of the previous div.
This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. The <div> ends here.
It has padding of .1 inches, which is kind of like a margin, but padding keeps the background color of the current div, but margin uses the background color of the prior div
This <div> is 2 inch wide. This <div> is 2 inch wide. This <div> is 2 inch wide. This <div> is 2 inch wide. The <div> ends here.
style="clear:both" to clear the above divsend of the div that is 100 percent width
I tried height:100%, but that didn't work.
So I replaced that with height:5in; and that kind of sort of works.
But that is not what I want to do.
When I first did this it seems to use different values for 5 inches.
But that was because I was viewing it wrong.
The height is caculated with out the spacing or margins and that was why it looked different.
I change margin:xxx and padding:xxx to margin-right:xxx, margin-left:xxx and padding-right:xxx, padding-left:xxx to fix that problem.
This div is 100% of the width of the page
And has a green background.
It has a margin of .1 inch and note that margins keep the color of the prior div.
For padding see the div on the right. Padding keeps the color of the current div as opposed to margin which keeps the color of the previous div.
This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. This <div> is 1.5 inches wide. The <div> ends here.
It has padding of .1 inches, which is kind of like a margin, but padding keeps the background color of the current div, but margin uses the background color of the prior div
This <div> is 2 inch wide. This <div> is 2 inch wide. This <div> is 2 inch wide. This <div> is 2 inch wide. The <div> ends here.
style="clear:both" to clear the above divsend of the div that is 100 percent width