Strange overflow behavior in Chrome

U

UseRifle2011-05-02 09:32:29

css

UseRifle, 2011-05-02 09:32:29

Hello!

I came across such a strange behavior in chrome ... I don’t even know which way to dig in order to make it work.

We have a simple page In chrome with overflow: auto; the right block recedes from the left edge not by 20%, but by an incomprehensible amount ... in other browsers, everything is as intended. If overflow is disabled, then in chrome everything is fine with an empty right block, but I need scrolling in the block, and not the entire page, if there is a lot of content. Maybe I didn't learn something? Chrome is way too tricky. I always suffer with it, even more than with IE. UPD Solved by adding 80% width for #content

<!DOCTYPE html> <html> <head> <style> html, body, div { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { line-height: 1; } html, body { height:100%; } #left { height:100%; width:20%; background:lightgreen; float:left; } #content { height:100%; margin-left:20%; background:lightblue; overflow: auto; } </style> </head> <body> <div id="left"></div> <div id="content"></div> </body> </html>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

M

mdss, 2011-05-02
@UseRifle

#content {
height:100%;
width:80%;
background:lightblue;
overflow: auto;
float:right;
}

A

Arthur Koch, 2011-05-02
@dudeonthehorse

Isn't it easier to use position:fixed for the left block, and at the same time scroll the entire page, as it is implemented here , for example ?

H

homm, 2011-05-02
@homm

Why do you need margin-left:20%; #content if overflow: auto; generates a new stream?