CODEWITHSUNDEEP
htmlcsscss-floatfloating
Yves
Yves

Reputation: 1057

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

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 ?

Upvotes: 0

Views: 807

Answers (3)

user1823761
user1823761

Reputation:

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;

Upvotes: 2

Erik Nedwidek
Erik Nedwidek

Reputation: 6184

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.

Upvotes: 0

Rachid
Rachid

Reputation: 101

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}

Upvotes: 0

Related Questions