15 replies [Last post]
rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Hi All,

In Firefox this page works fine, but in IE the central div overflows. The central div (content) has no width attribute as it needs to fill the space between the navigation div and the floating logo div. Works fine until some content is put in it.

It seems like the div stretches to 100% of the screen width, i.e. the content div takes up as many pixels as the width of the screen. This causes overflow over the logo div and also creates a scrollbar as it is adding this pixels on top of the navigation div width. How can I fix it?

blue-leaf.co.uk/csscheck/index.php

and css:

blue-leaf.co.uk/csscheck/css/admin.css

Both the page and the css are valid

Thanks a lot

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Confusion over overflowing div

No Suggestions? Sad

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Confusion over overflowing div

You're using absolute positioning for major design layout - almost always a headache. Have a read of Tyssen's post on the subject.

Learn to use the document flow and floats.

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Confusion over overflowing div

thanks wolfcry, it's all relative now and works.

however I always thought that one of the create points of css was that you could put your page content at the top (accessibility and search engine reasons) as order of divs didn't matter (in the source) but with relativity is does?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 43 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Confusion over overflowing div

rsmithinfo wrote:
thanks wolfcry, it's all relative now and works.

however I always thought that one of the create points of css was that you could put your page content at the top (accessibility and search engine reasons) as order of divs didn't matter (in the source) but with relativity is does?

You're right and wrong.

AP can be used to drag content around the page, but unless you know what you're doing, it rarely works as intended.

Best just to leave it alone. I never use it Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Update

Ok update, I have 5 buttons and then some text in the content div. But the problem is that when the window expans, the text fills the space between the buttons and the edge and I want there to be a line break between the button div and the text div. See:

blue-leaf.co.uk/csscheck/index.php

I tried putting in a spacer div with clear:right, but that clear's everything and so pushes the text div out, like here:

blue-leaf.co.uk/csscheck/index2.php

What's the solution, I couldn't find anything googling Sad

CSS is here:

blue-leaf.co.uk/csscheck/css/admin.css

All HTML and CSS check out

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Confusion over overflowing div

The problem here is that the #panel div is not containing the floats within it (which is correct behavior). This means the floats are 'hanging' below the #panel div and are interacting with the elements that follow (which again, is correct behavior). Clearing the .wrapper div won't work, because it clears all floats before it. And btw, there's no reason to set a div to display:block (as in the wrapper div) - they're block by nature. To solve the problem, you need to contain the floats. There are a couple of ways. One is to add overflow:hidden; to the #panel div. Second is to use Tony's clearfix method. And the third way adds extraneous code, so I won't mention it here.

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Confusion over overflowing div

Hi wolfcry

Thanks for that it now works in IE but fails in Firefox? It still looks like it's clearing? I used the Contained floats tutorial you showed me.

Thanks a lot for your help I appreciate it

Rob

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Confusion over overflowing div

It turns out that the clearfix is clearing the floated column as well. Remove the clearfix method and go with the overflow:hidden.

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Confusion over overflowing div

Ok now it works for firefox but not for ie! Unless I've missed something.

I can't wait for IE to step into line with standards based stuff.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Confusion over overflowing div

I haven't forgotten you. I'm still working on this, but I'll be out most of the day today. Perhaps someone else will come along with a solution. I can't for the life of me understand why IE will not enclose the floats (like it usually does) on it's own. I've tried adding position:relative to the container (a common fix for many problems) and giving the container MS's hasLayout, but to no avail. I'm guessing it has to do with the wrapped divs and the inline styling.

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Confusion over overflowing div

ok wolfcry thanks a lot it's a pig of a problem I've tried loads of things. Anyone got a solution to this? I need the text not to flow next to the icons in IE.

The float container contains the floats in FF but not IE?

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 36 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Confusion over overflowing div

zoom:1; in .floatcontainer triggers haslayout.
setting a height:110px; in .floatcontainer instead of zoom seems to fix the problem too.

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Confusion over overflowing div

Thanks DanA you're a star

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 46 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Confusion over overflowing div

sorry I couldn't be of any help. I swear I tried giving .floatcontainer hasLayout but with height: 1% to no avail. Thanks DanA

Edit. I just figured out what I did wrong - I was linking to the wrong stylesheet on my local test page. :oops:

rsmithinfo
Offline
Regular
Last seen: 13 years 25 weeks ago
Joined: 2005-09-28
Posts: 36
Points: 0

Confusion over overflowing div

I really appreciate all your help wolfcry! You got me pretty much all the way there from my initial confusion