Reputation: 23
Im having 2 Div's , one Div should appear beside another Div, and its working the same way as expected in all the browsers but in IE8, the right div is appearing below left div, the same is working fine in IE9, But the issue is with only IE8,how to overcome this as i dont have much experience on working with Css
.leftcontent {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:25%;
}
.rightcontent {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:80%;
}
Upvotes: 0
Views: 659
Reputation: 190
Mind your width: 25% + 80% = 105%.. that's not right..
A known IE 8 bug is that it parses widths differently from other browsers. It parses 20% + 80% + [something else] > 100%.. (see comments: might be related to inline-block as suggested by avrahamcool)
A common (and the easiest) way to fix this is to slightly lower the widths ex:
.left_content {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:19%;
}
.cal_content {
background: none repeat scroll 0 0 #;
float: left;
height: 500px;
width:79%;
}
19% + 79% = 98% and IE will behave.
Upvotes: 0
Reputation: 2066
you can also make an overload with a specific css for IE thanks to IE conditional comments
<!--[if IE 8]> pour IE 8.0 <![endif]-->
There are several ways to use them, 2 examples:
in the header to add a specific css
and / or to initialize a body with an ie8 class, so that in your css you can define:
_
.yourCssClass{
/*common css attributes*/
}
.ie8 .yourCssClass{
/*ie8 specific css attributes*/
}
Upvotes: 1