All geek questions in one place

Floating Div Madness When Changing Window

I am trying to create a purely HTML and CSS layout that represents the main content of the page on the left (which expands to the full width of the page, minus the margin) and a smaller rectangle on the right, for example, for navigation or some information. The following is an example of the code causing the problem, with the problems described in it:

<!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 leave the field (light red) later in the code for semantic reasons, but this is not necessary. Here are some of the most successful things I've tried and why they don't seem to work:

  • Absolute positioning: it looks as good as my own code when browsers don't change. To some extent, it eliminates the edge of the endangered body in Firefox. However, when the window size becomes small enough, the box (light red) will either go below the main page div (cyan), depending on which z index I have above or below.

  • Floating field only: this includes changing the HTML and placing the field (light red) in front of the rest of the content in the code. This automatically expands the div of the main page (light blue), something that I did not find a way to do (without a certain amount of content) using the float method. However, the body fields are still removed in Firefox, the text is still compressed in IE, and the field (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 a minimum width for everything: this very successfully stopped the IE problem, but it requires some CSS work on the page, which is more complex than this one and which will support different types of media. And it still doesn't touch the body field in Firefox or gives me a way to expand the main div (light blue) without content, as it is still floating.

  • Changing the body field to the border: this also does not solve the problem of Firefox; regardless of whether it is a border or a border, it is chopped off to the right and bottom of the page when I use floats.

  • Add a field to the field: this also does not work for Firefox. I can get a lower limit for the contents of the main page (cyan) to stay in place (this seems especially interesting to me), but the right edge of the box (light red) is still shrinking.

Any help would be greatly appreciated, since I cannot find sites or messages that respond to these problems, let alone describing that these problems exist; Of course, I put many hours to search and test solutions.

+6
source share
3 answers

Good day to you, dear sir, you seem to have layout problems.

As I understand it, you need a two-column layout. The left column is automatically expanded to the width w / e, it is located minus the right column width minus 20 pixels for the field. The right column has a fixed width and will contain a menu or various html structures ...

In the left column you have text and, among other things, a fixed-width field, a fixed-width field in this column should always remain inside it. This means that we want the minimum width to be the width of the width of the width + 20 px + the width of the right column.

I did this by creating a container around all the content, applying a minimum width to it and creating a dummy container to solve the minimum width problem in IE6.

Here is a working example of how it looks: http://jsfiddle.net/uXyPu/

I do not have IE6 or firefox 3.5 to check, but I am sure it will work.

As a side note, you used a field on a body tag, do not do this. As a basic rule, keep your body fully extended, at most apply a pad. In addition, avoiding margins is a good way to prevent flickering problems in IE6, while keeping your layout compatible with modern browsers. And don't use padding / edges on floating elements at all ...

The gentleman in the first comment on your question was right about avoiding ie6 in general, I hope you asked big bux to do this project so that the company can start thinking about its abuse of ie6 ...

+1
source

I moved your right sidebar over the rest of the code, gave it a float to the right, and then gave the main page a percentage width.

Edit:

Maybe this is better. I completely positioned the side box on top: 20px; right: 20px; and gave the main page margin-right: 120px, so it doesn’t fall 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>
0
source

Use the 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>
-2
source

Source: https://habr.com/ru/post/890356/

More articles:


All Articles