Problem with DIV in IE10 & 9 (code +screenshot)

HTML & CSS
1

Hey,
I’m transforming my website from a table layout into a DIV layout and got into a problem -
In IE 10 & 9, the text in one of my lines is sliding off to the next line, causing the whole DIV to contain an extra row,
which mess up the whole layout.

Here’s my code and CSS:

http://fiddle.jshell.net/tzQ7a/

And a screenshot illustrating the problem:

Also, If you notice any other non-related mistakes in the code I’d appreciate if you give me a heads up,

Thanks!

2

If you are going to use absolute positioning like that (which doesn’t seem necessary to me) then probably the safest approach is to add bottom padding to the #container div (which is the first parent to provide a positioning context).

#container {
    padding-bottom: 60px;
}
3

Since I barely have any knowledge in CSS, can you please explain if this is suppose to solve the problem, or is this a general comment about the code?

I tried to insert the padding you mentioned and I’m not sure I understood what is the purpose of this? it just created a blank gap between the container and the footer…
and If I change the positioning of elements like the buttons or the images to relative, they would not show at all on the screen…
I’m afraid you left me even more confused :wink:

4

It was the first step in finding a viable solution.

Basically, when you set something to position: absolute, you take it out of the ‘flow’ of the document. (In the natural flow, elements come one after another, stacking naturally one above the other where they can fit down the screen.)

Once an element has position:absolute, it’s not a part of that natural flow any more. It has to decide where it’s going to appear. Its position is set in relation to other elements. If any parent elements (that is, elements around it, like divs etc.) have a position set (e.g. position: relative or position: absolute) then the elements will position itself in relation to the first positioned parent it finds going ‘up the chain’, so to speak. If you don’t set a top, left, right or bottom position on the element, it will sit in the tp left of that nearest positioned parent. If there are no positioned parents, then the elements will sit in relation to the browser window.

In your case, the button’s nearest positioned element is the #container div, which has position: relative. So if you want the button to sit at the bottom of the #container, you can set something like bottom: 0, right: 0 etc. to place it in the bottom right corner. But remember that the other elements inside the #container have no idea the button is there (because it’s out of the flow, being positioned absolutely). So to make sure the other elements don’t overlap the button or sit below it, I placed some bottom padding on the #container to make sure there was nothing else in the way of the button.

That said, if you just removed position:absolute from the button is would sit nicely below the other content (in the normal flow), so that’s a better option in this case anyway.