7 replies [Last post]
hs124
Offline
newbie
Last seen: 13 years 51 weeks ago
Timezone: GMT-3
Joined: 2006-10-30
Posts: 5
Points: 0

Hi, the page i´m making looks good in IE but not in Firefox. See it here:http://hotelcrown.com.uy/nh/index.html.
Can somebody tell me whats wrong? Or is there another way to make the efect i want?
Thanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Read up on floats. Just

Read up on floats. Just about every tutorial/explanation of floats and their proper behaviour (not what IE does) will cover this very early.

Basically, floats are out of flow, so block elements don't see them - although their inline content does. The behaviour you are seeing is exactly what you would want to happen if you were floating an image with some text and you wanted the text to flow around the image - irrespective of how much text each paragraph contained.

e.g.

lorem ipsum ...

donec isi ...

blah, blah ...

To get the behaviour you are after you need to force content beyond the float or use a style to establish a new display context. The tutorials/how tos/etc will explain all.

hs124
Offline
newbie
Last seen: 13 years 51 weeks ago
Timezone: GMT-3
Joined: 2006-10-30
Posts: 5
Points: 0

Solved

Thanks you, i didn´t understood your answer very well, but i solved the problem by giving a height value to "contenedor", and the same height for "main".
I still have to give diferents values to all pages but it´s no problem.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You're not solving the

You're not solving the problem. I am trying to encourage you to do your own research. Its a really common issue the first time someone uses floats and its really easy to solve. The solution is described in the How To pages on this forum and on many other good sites all over the internet. These descriptions will allow you to understand better how floats work which will improve your use of them in the future.

Setting heights isn't a solution. Wait until you change the page content or someone has different font-size settings on their browser.

hs124
Offline
newbie
Last seen: 13 years 51 weeks ago
Timezone: GMT-3
Joined: 2006-10-30
Posts: 5
Points: 0

Ok, I´ll check it out.

Ok, I´ll check it out.

hs124
Offline
newbie
Last seen: 13 years 51 weeks ago
Timezone: GMT-3
Joined: 2006-10-30
Posts: 5
Points: 0

I searched but i coludn´t

I searched but i coludn´t find another solution. Please, can you just tell me what do i have to do to fix it?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Look in the how to section

Look in the how to section on float containment.

method 1: establish a new display context, you can do that with a non-default value for overflow, hidden is generally best.

#toda #contenedor {
overflow: hidden;
}

method 2: force some inflow content after the float.

#toda #contenedor:after { clear: both; content: '.'; height: 0; visibility: hidden; display: block; } Which to choose?

If there is floated content on other parts of the page outside of the div you're dealing with - outside, but in the same display context, your clear will clear that float too. That can be undesirable, so in those cases use overflow:hidden.

hs124
Offline
newbie
Last seen: 13 years 51 weeks ago
Timezone: GMT-3
Joined: 2006-10-30
Posts: 5
Points: 0

Thank you so much, it works

Thank you so much, it works just fine.