I ran into the following problem:
how to make a general container (HTML + CSS; no javascript)
that is contrained vertically (it has a fixed outer height), so it may have a vertical scrollbar
but that can grow horizontally (as needed by the content of the container), so it never has a horizontal scrollbar
it has to work in IE8, FF, Chrome (no IE7 or earlier)
the solution semms to be be trivial at first
but I can not get rid of the horizontal scrollbar in IE8:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="display: table;" class="container-div-1">
<div style="display: table-cell;" class="container-div-2">
<div style="overflow-y: scroll; height: 19em;" class="container-div-3">
<div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div>
</div>
</div>
</div>
</body>
</html>
in this example, we need a 19em high container, that can grow horizontally, as needed by the content (in this case, the "example-cotent" div)
please don't suggest to modify the "example-content" div, as it is just a sample content (any content could be there)
this problem is the generalization of this issue:
IE8 horizontal scrollbar problem
Floating will probably get the result you're looking for. Check out my example here:
http://jsbin.com/ivegi4/4/edit
I took away the containing divs, as I didn't think they were necessary, but I wouldn't see a problem adding them back in if you absolutely needed them.
Set position: absolute on the container-div-3 div. This will cause the div to shrink-wrap whatever is inside, and works fine in IE8.
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 am trying to create a purely HTML and CSS-based layout that presents the main content of a page on the left (which expands to the full width of the page, minus the box) and a smaller box on the right, say for navigation or information of some sort. Here is an example of the code that is causing the problem, with the problems described therein:
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {margin:20px; font-size:0px; color:#000000}
div.page {margin-right:120px; background-color:#AAAAFF; float:left}
div.wide {width:300px; background-color:#AAFFAA}
div.box {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
h1 {font-size:x-large}
p {padding-bottom:5px; font-size:small}
</style>
</head>
<body>
<div class="page">
<h1>MAIN PAGE</h1>
<p>This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px, to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface, but...</p>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.</p>
<p>Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).</p>
<div class="wide">
<p>If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class="box">
<h1>BOX</h1>
<p>(this could be navigation, or anything else)</p>
</div>
</body>
</html>
I would like to keep the box (light red) later in the code for semantic reasons, but this is optional. Here are some of the more successful things I've already tried, and why they don't seem to work:
Absolute positioning: This appears just as nicely as my own code when the browsers are not resized. It does address the disappearing body margin in Firefox to some degree. However, when the window size gets small enough, the box (light red) will go over or under the main page div (light blue), depending on the which z-index I have higher or lower.
Floating only the box: This involves changing the HTML and placing the box (light red) before the rest of the content in the code. This automatically expands the main page div (light blue), something I haven't found a way to do (without a given amount of content) using the float method. However, the margins of the body are still removed in Firefox, the text still squishes in IE, and box (light red) will still go over or under (again depending on the z-index) the main page div (light blue) when the window gets small enough.
Assigning min-width to everything: This was very successful in stopping the IE problem, but requires some CSS work on a page that is any more complex than this and which will support different media types. And, it still doesn't address the body margin in Firefox or give me a way to expand the main page div (light blue) without content, since it is still floating.
Changing the body margin to a border: This doesn't solve the Firefox problem either; whether it is a border or a margin, it gets chopped off on the right and bottom of the page when I use floats.
Add the margin to the box: This doesn't work for Firefox, either. I can get a bottom margin on the main page content (light blue) to stay in place (this is something that seems especially curious to me), but a right margin on the box (light red) still gets cut.
Any help would be greatly appreciated, as I cannot find any sites or posts answering these problems, much less describing that these problems exist; I've certainly put in a large number of hours looking for and testing solutions!
Good day to you dear sir, you seem to have trouble building layouts.
As I understood it you want a 2 column layout. Left column auto expands to the width of w/e it is in minus the right columns width minus 20 pixes for margin. Right column is a fixed width and will contain a menu or assorted html structures...
In the left column you have text and among other things, a fixed width box, the fixed width box in this column should always stay inside it. This means we want a minimum width wich is the fixed width box width + 20 px margin + the right column width.
I did that by making a container arround all of the content, applying min width to that and making a dummy container to solve the min width problem in IE6.
Here is a working example of how this looks: http://jsfiddle.net/uXyPu/
I don't have a version of IE6 or firefox 3.5 running to test it but I am fairly confident this will work.
As a side note, you used a margin on the body tag, don't do it. As a base rule keep your body fully expanded, at most apply a padding. Aside this, avoiding margins is a good way to prevent a merriad of problems in IE6 while still keeping your layout compatible with modern browsers. And don't use padding / margin at all on floated elements...
The gentleman in the first comment on your question was right about avoiding ie6 altogether, I hope you asked big bux to do this project so the company might actually start thinking about their abuse of ie6...
I moved your right side box to above the rest of the code, gave it a float right, then gave main page a width in a percentage.
Edit:
Maybe this is better. I absolute positioned the side box with top: 20px; right: 20px; and gave the main page a margin-right: 120px so it doesn't go under the side div.
Try the new code:
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {
margin:20px;
font-size:0px;
color:#000000; }
div.page {
background-color:#AAAAFF;
margin-right: 120px; }
div.wide {
width: 300px;
background-color:#AAFFAA; }
div.box {
position: absolute;
top: 20px;
right: 20px;
width:100px;
background-color: #FFAAAA; }
h1 {font-size:x-large}
p {
padding-bottom:5px;
font-size:small }
</style>
</head>
<body>
<div class="page">
<h1>MAIN PAGE</h1>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.</p>
<p>Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).</p>
<div class="wide">
<p>If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class="box">
<h1>BOX</h1>
<p>(this could be navigation, or anything else)</p>
</div>
</body>
</html>
Use a table...
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table width="100%">
<tr>
<td valign="top">
page content
</td>
<td width="100" valign="top">
<div class="box">
menu content
</div>
</td>
</tr>
</table>
</body>
</html>
given the following code:
<!doctype html>
<div style="position:relative;border:1px solid red;width:500px;overflow:visible;">
<div style="height:200px;border:1px solid orange;float:right;">test</div>
</div>
stuff
Every browser other than IE7 (and IE8 in IE7 compatibility) displays this properly, however in IE7 the parent div automatically expands to the height of the floated child.
Is there any way to disable this "feature" so that I can have a floated div go beyond the parent's closing tag?
You have to prevent your outer div from obtaining hasLayout.
Certain things force hasLayout, and width: <anything other than "auto"> is one of them.
(Your original code for comparison: http://jsfiddle.net/T6QsS/)
For instance, removing the width works in IE7: http://jsfiddle.net/T6QsS/1/
To use width, you must add it to an extra wrapper element: http://jsfiddle.net/T6QsS/2/
One option is if you know the desired height of the parent, you can specify it in the parent div. For example, in your case:
<!doctype html>
<div style="position:relative;border:1px solid red;width:500px;overflow:visible; height: 0px;">
<div style="height:200px;border:1px solid orange;float:right;">test</div>
</div>
stuff
Here's a fiddle to test.
You could target IE7 using the * CSS hack. Try this:
http://jsbin.com/ufoqo5/2/edit
I thought I was pretty knowledgeable about CSS but this simple problem baffles me.
<div><span>sample text</span></div>
results in the div's height being smaller than the height of the span if the span has padding.
I realize that there are ways to use "float" to make the div size correctly, but floats always seem to introduce undesired side effects.
Isn't there a clean simple way to tell the div to size to fit its contents? Seems pretty basic to me. Maybe I'm missing something.
In the basic case, just use display: inline-block on the span.
Here is my test case (works in FF, Chrome, and IE 6-8):
<!DOCTYPE HTML>
<html>
<head>
<title>Span padding test</title>
</head>
<body>
<div style="background-color: yellow; border: 1px solid red;">
<span style="padding: 50px; display: inline-block;">test</span>
</div>
</body>
</html>
The reason why adding float: left to the div and span fixes this is because floating an inline element implicitly converts it to a block element. If you are unfamiliar with the nuances between divs and spans (aka the difference between block and inline elements), reading http://www.maxdesign.com.au/articles/inline/ should help.
There are a few other ways to solve this but it is hard to say which one is best without know more about the rest of the markup and styles.
Add overflow:auto to the div.
I have a div set to overflow: auto, max-width of 250px.
Inside the div I have a paging control, which allows users to pull back 10, 20, 50, or 100 results. If they pull back enough results, the inner content (table) will grow larger than the div and should then be scrollable.
This works fine in Firefox 3.5 and IE8, however in IE7, the scrollbar only shows after the first postback that requires a scrollbar (e.g. user selecting 20). If the user then selects another amount that requires the scrollbar (50, 100), the bar in IE7 will disappear.
If the user goes back to 10 results (no scroll needed), then proceeds to 20 results (scroll needed) the scrollbar will once again show up in IE7.
I can still scroll the inner content with my mousewheel, there is just no scrollbar.
Anyone know what the issue could be? I'm stumped... can provide details if needed.
Clarification: The scrollbar is disappearing even when the content is overflowing the Div.
Change the CSS property overflow from auto to scroll
See http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
I had a similar issue and managed to resolve it. Now, understand I had the width of a table set to 100%. I believe the problem is related to the doctype. I tried setting the doctype to
<!DOCTYPE html> <!-- HTML5 -->
and I still had the same problem. It was only after removing the doctype declaration that the IE7 bug went away (quirks mode, which I wouldn't recommend). I have also tested it using XHTML 1.0/1.1/HTML 4.01 doctype declarations (Strict, Transitional, Frameset) and the same problem occurs. It appears this issue arises because using a doctype declaration tells the browser to use standard mode. IE7 and less does not handle standard mode browsing very well.
To resolve it for IE7, I set the width to 99%.
Here is working sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#Content
{
overflow-y: auto;
overflow-x: hidden;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="Content">
<table width="99%" border="1">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
</div>
</body>
</html>