Web Analytics Made Easy -
StatCounter Over-flow understanding - Floats - CodingForum


No announcement yet.

Over-flow understanding - Floats

  • Filter
  • Time
  • Show
Clear All
new posts

  • Over-flow understanding - Floats

    I would be grateful if someome could check my understanding to a few scenarios:-

    (1) <ul> and style the <ul> then float the <li> the <li> automatically pops out of the container of the <ul>, thus if I have applied some style to the <ul> then I would need to use overflow:hidden to the <ul> to get the style back?

    (2) If I have a <p> and some formatting applied to it, then have a <q> and float it right, the formatting of the <p> would disappear, so would need to add an overflow to the <p> to get the formatting back?


  • #2
    Unless you have specifically given the container element a width and height, then yes, you'd need to apply the overflow:hidden. Anything that has styles applied to it has to have a width and height. If it's an empty element, it will not have an inherent width or height. Only when you put items into it to assign it a width and height will it have a width and a height. However, if you float the element, it makes it "invisible" to the parent container in terms of width and height. Assigning a overflow:hidden allows the parent container to see them again.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.