How to control floating of <div> elements

[uranuskid]

Hey guys,

I control my webappearance ewith a series of <div> elements. They are supposed to be in line and the main container is supposed to stay min 880px in wdth. However, the left infobox has somehow the bad habit to start under the main <div> element. Also, the min-width is not kicking in, instead the elements get floated to the left and no scroll bar appears.

#container { 
  font-size: 0.8em;
  width: 900px; 
  min-width: 880px;
  height: 1300px; 
  margin: auto;
}
 
#logo {
  background: url(../pics/logo_01.png) 0 0 no-repeat black;  
  height: 100px; 
  min-width: 880px;
  padding: 0 20px;
  margin: 0; 
}
 
#menue {
    width: 110px;
    margin: 0 0 1.2em; 
    padding: 0;
    border: 0px;
    height: 1200px;
}
 
#info {
   background: rgb(212,206,160);
   width: 150px; 
   height:1000px;
   float: right; 
   padding: 10px 2px 2px 10 px;
   margin: 5px;
}
 
#main {
  margin: 10px 0 0 120px;
  width: 550px;
  background:  0 rgb(245,237,180); 
  padding: 0 10px 10px 20px; 
  line-height: 1.5em; 
}
 
 

I can't figure out what is going wrong there. Any help would be much appreciated!

Cheers,
Frank

[AricC]

Hey guys,

I control my webappearance ewith a series of <div> elements. They are supposed to be in line and the main container is supposed to stay min 880px in wdth. However, the left infobox has somehow the bad habit to start under the main <div> element. Also, the min-width is not kicking in, instead the elements get floated to the left and no scroll bar appears.

#container { 
  font-size: 0.8em;
  width: 900px; 
  min-width: 880px;
  height: 1300px; 
  margin: auto;
}
 
#logo {
  background: url(../pics/logo_01.png) 0 0 no-repeat black;  
  height: 100px; 
  min-width: 880px;
  padding: 0 20px;
  margin: 0; 
}
 
#menue {
    width: 110px;
    margin: 0 0 1.2em; 
    padding: 0;
    border: 0px;
    height: 1200px;
}
 
#info {
   background: rgb(212,206,160);
   width: 150px; 
   height:1000px;
   float: right; 
   padding: 10px 2px 2px 10 px;
   margin: 5px;
}
 
#main {
  margin: 10px 0 0 120px;
  width: 550px;
  background:  0 rgb(245,237,180); 
  padding: 0 10px 10px 20px; 
  line-height: 1.5em; 
}
 
 

I can't figure out what is going wrong there. Any help would be much appreciated!

Cheers,
Frank

What browser are you testing on? IE doesn't support min-width (I think) also I think a link to your page would be helpful for your first problem.

[drhowarddrfine]

IE treats min-width as width but allows the container to expand.

Showing us only the css is not helpful.

[uranuskid]

Hey there,

I solved the issue with the info <div> element starting underneath the main <div>. It was just an issue of aligning them in the respective index.php. For the IE I've got another .css file that gets his bad manners out of the way. However still got to figure out how the main <div> element in the center keeps static there. Unfortunately I can't provide a link as the site is still under construction.

Cheers,
Frank

[drhowarddrfine]

Then post the html here.

[uranuskid]

Hey guys,

I found the issue in my internet explorer .css file. I did not define min/max width and height for the IE. Adjusted that and now it works fine. Here is the right code:

div#container {
width:expression(document.body.clientWidth 
        < 800? "800px": "auto" 
        && 
        document.body.clientWidth 
        > 900? "900px": "auto");
  height:expression(document.body.clientWidth 
        < 1000? "1000px": "auto" 
        && 
        document.body.clientWidth 
        > 1500? "1500px": "auto"); 
    }