Shoutbox

Div overflows... - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: Div overflows... (/showthread.php?tid=47712)
Div overflows... by jren207 on 07-17-2005 at 04:34 PM

I'm working on a new website design and i'm using mainly Div's. When I view a page i'm working on (screenshot), in Firefox, the Div inside seems to overflow out of the Div that it's inside. In IE, it perfectly overflows. Can anyone specifiy any CSS I can use to stop it overflowing out of the Div?

The "Back to top ^" link is being pushed out also. It has a <br /><br /> inbetween it and the Div.

(See attached screenshot)

Thanks.

RE: Div overflows... by -dt- on 07-17-2005 at 04:43 PM

IE will stretch the div to fit the content which is in fact the wrong thing , infact its sposed to let the content flow out if it dosnt fit the container.
the css thing you could use is the "overflow" statement  try using overflow:auto  or something but that will add scroll bars to the div scince the content is larger than the containing div.

RE: Div overflows... by jren207 on 07-17-2005 at 05:01 PM

ah, that works, I applied it to the div property:

div{
    overflow:auto;
}

but it has scrollbars like you said :(, thanks anyway, I might use tables instead...

RE: Div overflows... by -dt- on 07-17-2005 at 05:16 PM

quote:
Originally posted by jren207
ah, that works, I applied it to the div property:div{     overflow:auto; } but it has scrollbars like you said [Image: msn_sad.gif], thanks anyway, I might use tables instead...
you can use overflow:hidden to hide the overflowed content.......(also theres overflow-x and overflow-y which you should be able to work out ;) ) but i doubt thats something you would want to do...why not just increase the area of your div?

edit:
sorry if my post seems not spaced I just noticed fixing some bugs in my wysiwyg editor has broken my <br>'s from parsing (stopping newlines in my posts...)
RE: Div overflows... by jren207 on 07-17-2005 at 05:24 PM

can't seem to get overflow-x/overflow-y to work... blah...

I was thinking of increasing the div size, but on the main page, it's like a blogging thing and there will be posts which may be long etc. (I will be spanning posts over an amount of pages with PHP though).

I'll just use tables, seems easier...

RE: Div overflows... by hmaster on 07-17-2005 at 05:25 PM

Nope better way without scrollbars which is as follows:
In your css locate:

code:
div.main{
    padding-left: 8px;
    background-color: #F3F4F7;
    width: 95%;
    height: 300px;
    border-left: #19B7F1 1px solid;
    border-right: #1286E1 1px solid;
    font-size: 9px;
}

and change
code:
height: 300px;
to
code:
height:auto;

According to what I'm seeing on my computer it works but I'm not 100% sure.
RE: Div overflows... by jren207 on 07-17-2005 at 05:26 PM

aha, you're a genius hmaster5! :P

thanks :) and thanks -dt- for your help as well.

Well that solves that then :D

RE: Div overflows... by hmaster on 07-17-2005 at 05:30 PM

no problem, nice layout btw (Y)

RE: Div overflows... by RaceProUK on 07-17-2005 at 08:07 PM

quote:
Originally posted by hmaster5
and change
code:
height: 300px;
to
code:
height:auto;

According to what I'm seeing on my computer it works but I'm not 100% sure.
That should work properly, as now the browser will calculate height on-the-fly, based on the area required for the content.