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>
Related
This question already has answers here:
How to avoid wrapping in CSS float
(2 answers)
Closed 3 years ago.
On the left we have a context sensitive navigation/information bar. At times there is very little information in it and other times it takes up the entire height of the page. I've seen a bunch of suggestions on other posts about floating, etc but nothing I've tried works.
.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
.groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}
So two divs for the sidebar - one to create the background layer which will take up the entire height of the page and then tablebox with the actual content on it - it could have a different background color as required.
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
Then we have the right hand side main content... again the idea being that tablebox would have a different background colour and appear to float on top of the page.
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
Now if the browser width gets to be too small the right hand div falls below the sidebar. Whether there's room there or not.
SOLUTION:
The problem was that the two sets of divs's parent did not have a defined size. As the browser window was resized the children got shuffled to fit inside of the new size. By defining a parent div with a fixed width and adding a overflow:auto the parent would not change even if the browser window was.
Note: This is not the best way to resolve this obviously - this means that the content does not dynamically format itself. It now has a fixed width. In my case I have no other choice. It is a band aid solution but if you're in the design stage think about people viewing your page from a cellphone or old people with their low resolution screens and giant text.
To be clear for those easily confused:
<div style="width:1053px;overflow:auto">
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
</div>
But again - if you have a choice don't do this! Fixed width will not make your site very pretty on some devices.
<head>
<style>
body {
padding:0;
margin:0;
}
div {
width:25%;
height:25%;
}
div.left {
background-color:red;
float:left;
}
div.right {
background-color:yellow;
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
http://jsfiddle.net/8gNDU/2/
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
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
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.
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...