Shoutbox

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.

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.

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...

quote:

---

Originally posted by jren207
ah, that works, I applied it to the div propertyiv{     overflow:auto; } but it has scrollbars like you said , 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...)

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...

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.

aha, you're a genius hmaster5!

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

Well that solves that then

no problem, nice layout btw

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.