By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,253 Members | 1,652 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,253 IT Pros & Developers. It's quick & easy.

is float property depend on being block level element or inline level element?

P: 64
Hi
I want to float first letter of the paragraph and give diffrent styles to that.
I use below code that work correctly but i think there is a problem because background-color property of the p element is not affected .
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div { float: left; width: 50px; font-size: 400%; color: red; line-height: 80%; margin: 0; padding: 0;}
  5. p { border: 1px solid maroon; background-color: aqua; }
  6. </style>
  7. </head>
  8. <body>
  9. <p>
  10. <div>T</div>his is some text.This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.
  11. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. In the paragraph above, the first letter of the text is embedded in a span element.The span element has a width that is 0.7 times the size of the current font.In the paragraph above, the first letter of the text is embedded in a span element.
  12. The span element has a width that is 0.7 times the size of the current font.
  13. </p>
  14. </body>
  15. </html>
  16.  
So i change div tag to span tag and change div selector to span selector , then all things work correctlly ,second code is as follow:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. span { float: left; width: 50px; font-size: 400%; color: red; line-height: 80%; margin: 0; padding: 0;}
  5. p { border: 1px solid maroon; background-color: aqua; }
  6. </style>
  7. </head>
  8. <body>
  9. <p>
  10. <span>T</span>his is some text.This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.
  11. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. In the paragraph above, the first letter of the text is embedded in a span element.The span element has a width that is 0.7 times the size of the current font.In the paragraph above, the first letter of the text is embedded in a span element.
  12. The span element has a width that is 0.7 times the size of the current font.
  13. </p>
  14. </body>
  15. </html>
  16.  
and I wonder what is diffrence between using span or div element in this example ? would you please describe me what happend in each state and what is diffrence for?
thanks alot in advance.
Jun 13 '11 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Your first example is invalid. Block level elements cannot exist inside an inline one. You could look into 'inline-block', though. Also, google for the css property 'first-letter'.
Jun 13 '11 #2

P: 64
okay , you're right i can use first-letter property but i want to use float property , and about your answer in my first example i use div element inside p element and i think both of them are block level elements , are'nt they?
Jun 17 '11 #3

P: 26
You can use 'p' element inside 'div', but div inside p is kinda unacceptable. Read more on inline-block - http://dipaksblogonline.blogspot.com...ine-block.html
Jun 19 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.