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

place a floated element inside it's parent when before element are replaced element

P: 64
hi

when an element is floated , browser place that to the first left or right available space and the other elements are floated around that, is this statement true?

would you please notice to below example:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body { border: 1px solid brown; }
  5. p { border: 1px solid pink; }
  6. img { border: 1px solid red; }
  7. img.normal { height:auto; }
  8. img.big { height:120px; }
  9. p.ex {
  10. height:100px;
  11. width:100px;
  12. float: left;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <img class="normal" src="logocss.gif" width="95" height="84" /><br />
  18. <img class="big" src="logocss.gif" width="95" height="84" />
  19. <p class="ex">The height and width of this paragraph is 100px.</p>
  20. <p>This is some text in a paragraph. This is some text in a paragraph.
  21. This is some text in a paragraph. This is some text in a paragraph.
  22. This is some text in a paragraph. This is some text in a paragraph.</p>
  23. </body>
  24. </html>

In this example i expect that p element with ex class attribute appear after both of img element at the begining of the line but seeing this code in browser showing another thing first image element are placed then p element with class ex are placed at below of first image and second image are floated around p element , would you please , say how browser specify that set p element with class ex first and then second img element?
now consider that instead of second img element we have a block level element and result that we see on browser are reasonable.

in advance thanks.
Jun 11 '11 #1

✓ answered by Dormilich

would you please , say how browser specify that set p element with class ex first and then second img element?
that is a logic error on your side. letís recall the HTML setup:
  1. an <img> element
  2. a line break (<br>)
  3. an <img> element
  4. a floated (block) element (<p class="ex">)
the first thing to notice is that your images will always be underneth each other (when it comes to the vertical arrangement). this is made sure by the <br> element.

the next thing happening is an inline element (<img>) followed by a floated element (it doesnít matter if that oneís inline, block or whatever, since it now bears the floating properties). the (left) floated element will always be the most left-sided one possible (with regards to its containing block, which is <body>), all other (non-floated, non-absolute) elements in the same line (and that includes inline-elements like the <img>) will be shifted rightwards.

thus your browser is behaving correctly.

Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
would you please , say how browser specify that set p element with class ex first and then second img element?
that is a logic error on your side. letís recall the HTML setup:
  1. an <img> element
  2. a line break (<br>)
  3. an <img> element
  4. a floated (block) element (<p class="ex">)
the first thing to notice is that your images will always be underneth each other (when it comes to the vertical arrangement). this is made sure by the <br> element.

the next thing happening is an inline element (<img>) followed by a floated element (it doesnít matter if that oneís inline, block or whatever, since it now bears the floating properties). the (left) floated element will always be the most left-sided one possible (with regards to its containing block, which is <body>), all other (non-floated, non-absolute) elements in the same line (and that includes inline-elements like the <img>) will be shifted rightwards.

thus your browser is behaving correctly.
Jun 14 '11 #2

Post your reply

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