CSS floating div falls to bottom of the screen when reducing screen size

Question

I've been taking care of this website for friends of mine (but I barely know the original designer) since last week. I've been working on the PHP mainly, but something bothers me:

Basically the main page and the whole design look like:

----------------------------------
Banner
----------------------------------
|Nav  |   |Div #1 floats right   |
|     |   |80% width             |
|float|   |                      |
|left |   -----------------------
|     |   |Div #2 floats right   |
| 16% |   |80% width (same as #1)|
-------   |----------------------|

When reducing the window size, everything works alright until a certain point where Div#1 and Div#2 migrate to the bottom of the page, giving this arrangement :

---------------------------
Banner
---------------------------
|Nav  |   
|     |  
|float|  
|left |  
|     |  
| 16% |  
-------   
    |Div #1 floats right   |
    |80% width             |
    |                      |
     -----------------------
    |Div #2 floats right   |
    |80% width (same as #1)|
    |--------------------- |

I dont want this to happen but unfortunately I don't know a lot about CSS. I tried to position the divs absolutely and to write min-widths to prevent the browser from shrinking the page more than necessary.

Is there a cheap way to fix this without rewriting the CSS completely ?

Can you please accept an answer when you are done, otherwise, people may work on you question without realizing that you have found a solution, thank-you! — Marc Audet, May 20 '13 at 16:57
Yes, I found another way to solve my problem and was just thinking about answering my own question... — Yves, May 20 '13 at 16:59

score 2 · Accepted Answer · answered May 20 '13 at 16:37

2

Remove this rules from .texte element:

min-width: 584px;
padding: 10px;
margin-right: 5px;

[!] When you are working with percentage numbers, don't use padding and margin. Instead set them for inner childs.

Also remove this rules from #menu element:

min-width: 119px;

answered May 20 '13 at 16:37

Thx I'll try that. The "min-width:" were temporary measures i just added. – Yves May 20 '13 at 16:48
That did it! (now i have to cope with overflow but it shouldn't be a problem). Thank You! – Yves May 20 '13 at 16:52

score 0 · Answer 2 · answered May 20 '13 at 16:29

0

try to add a div under the floating divs. and give it a class name of clear. then in your css document add the following

.clear{clear:both}

answered May 20 '13 at 16:29

Rachid

101
1
9

thanks but I dont really get it to work. How do I position this div to the bottom ? – Yves May 20 '13 at 16:41

score 0 · Answer 3 · answered May 20 '13 at 16:35

0

Your issue is most likely the "min-width: 584px;" in the .texte class.

When I use the Ruler from the Web Developer extension, that div drops to the bottom when it gets to 584 pixels wide.

answered May 20 '13 at 16:35

Erik Nedwidek

6,134
1
25
25

Thanks for looking at the CSS. As I wrote I added these "min-width: 584px;" to try to fix the problem. 584px is the minimal "acceptable size". Unfortunately it didn't change nothing. – Yves May 20 '13 at 16:44

CSS floating div falls to bottom of the screen when reducing screen size

3 Answers3