This looks like IE8 issue. I have two divs that are side by side because I float one of them to left. However, if the content inside of right div gets too big for the window, the right div breaks line and goes under left div. How do I make both divs stay on same level, side by side?
Here is the code:
css:
<style type="text/css">
#left_div
{
float: left;
width: 250px;
height: 400px;
border: solid 1px red;
}
#right_div
{
width: 3000px;
border: solid 1px blue;
}
</style>
html:
<div id="left_div">
text in left_div
</div>
<div id="right_div">
text in right_div
</div>
-
Add float: left to the right_div as well.
If it is anything similar to the examples shown by Matthew James Taylor and his Perfect 2 Column Left Menu take a look at how he is doing it and maybe copy it!
IE has in the past also had the issue that it took height and width to mean height-min and width-min, thus still allowing boxes to resize eventhough they had specific limits set. See Webcredible's article, most notably number 2 on their list!
dev.e.loper : thank you. these are very helpful links! -
You can also add a left margin of at least 250px (the width of the left_div) to the right_div, that way there will always be space for the left_div next to the right_div.
dev.e.loper : that is not a problem. the problem is that in ie8, right div breaks line and goes under left div.jeroen : Maybe I am missing something here, but is that not normal behaviour for all browsers?dev.e.loper : not if you float one element to left. -
change the doctype: (IE8 needs it to render correctly the webpage)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
<html xmlns="h t t p://w w w.w3.org/1999/xhtml" xml:lang="en-GB">(I edited the urls with whitespaces so don't forget remove them :) )
