I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye
Related
When I create say a div container with a say 100px width and place 2 div elements one floating to the left and the other to the right with a border of 2px and a width of 46px each they should be drawn on the same line side by side covering the whole width of the parent container. This happens in Firefox and Chrome but IE9 draws them on separate lines and in order to have the same effect as in the other browsers I need to specify a width of 102px in the parent element.
Why is that?
Here's the code:
<html>
<head>
<style>
div {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="border: 5px solid;width:100px;height:100px">
<div style='border:2px solid green;width:46px;height:46px;float:left'></div>
<div style='border:2px solid
green;width:46px;height:46px;float:right'></div>
<div>
</body>
</html>
Personally, I'd much rather use display: inline-block than much around with floats.
Anyway, the most likely cause of the problem is the empty whitespace between the two <div> elements. It could be shifting the second one down. Try removing it (ie. <div...>...</div><div...>...</div>)
OK I found a solution to the problem.
What you have to do is you have to add the Doctype declaration e.g.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It doesn't seem to be because of the ie box model bug http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
As this behaviour would result in smaller elements...
I'm really confused...
I need to put two divs side by side. First div should have constant width, second take rest free space. Both of the div should has the same height but at least should takes all browser screen. I have written the following code:
<head id="Head1" runat="server">
<title>My Testing page</title>
<style type="text/css">
#mainDiv { height:100%;}
#leftDiv {float:left; width:200px; height:100%;}
#rightDiv { height:100%; }
</style>
</head>
<body>
<div id="mainDiv">
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</div>
</body>
But height of the right div is always set to 100% of browser screen, Even if content of this div is bigger. I would like have resizable height of those divs.
As far as I know height:100% would act as a fixed height according to the browser's height.
so why dont you put
min-height:100%.
This should work but I havent tested it myself tbh.
Can anyone explain why I get a vertical overflow with this code please?
<html>
<body style="width:120px; height:120px; background-color:white;">
<div style="padding:20px; background-color:blue;">
<div style="width:100%; height:100%; background-color:white">
<div style="padding:20px; background-color:green;">
<div style="width:100%; height:100%; background-color:white">
</div>
</div>
</div>
</div>
</body>
</html>
In Chrome 8 it renders like this:
I'm assuming you want it to look as it does, but with the green border not protruding outside the blue one, and the whole thing fitting inside 120px * 120px.
You aren't specifying a doctype in that code, so it becomes difficult to make things work between different browsers - some browsers will fall into "quirks mode".
With the code you gave, IE8 for instance stretches the layout to the width of the window.
The first step to make it look consistent is to add a doctype, such as the HTML5 doctype:
<!DOCTYPE html>
Adding that makes it look consistent between Chrome, IE8, Firefox, Opera:
..but it also makes it look wrong, and there's no simple way to fix it because you're trying to mix % and px based measurements (a simple fix would be to use just % or just px). Using height: 100% and padding: 20px will make the element too tall because it's total height will be the padding plus the height of the parent element (this is the reason for your "overflow").
So here's some new code which gives the visual effect you're looking for using a different method:
Live Demo
<!DOCTYPE html>
<html>
<body style="width:120px; height:120px">
<div style="background:blue; width:100%; height:100%; position:relative">
<div style="background:green; position:absolute; top:20px; right:20px; bottom:20px; left:20px">
<div style="background:white; position:absolute; top:20px; right:20px; bottom:20px; left:20px"></div>
</div>
</div>
</body>
</html>
The following are 2 div, side by side. But once a width: 100px is added to #right, they won't be side by side any more. The second div will wrap to the next line. The browser's width is like 1200px, so it is not a concern, and this happens on both Firefox and Chrome. What is a reason for that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<style>
#left {
width: 100px;
float: left;
}
#right {
}
</style>
<div id='left'>
hello
</div>
<div id='right'>
world
</div>
Floats are funny things in CSS. They can easily cause this kind of confusion.
I recommend using display:inline-block; (on both the divs) instead of float:left; in your example. It'll probably behave closer to how you're expecting.
Add float:left to the #right, it will fix the problem. Divs are positioned on new lines if the float is not specified.
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!
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.
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 :) )