By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

How to control floating of <div> elements

uranuskid
P: 19
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.
Expand|Select|Wrap|Line Numbers
  1. #container { 
  2.   font-size: 0.8em;
  3.   width: 900px; 
  4.   min-width: 880px;
  5.   height: 1300px; 
  6.   margin: auto;
  7. }
  8.  
  9. #logo {
  10.   background: url(../pics/logo_01.png) 0 0 no-repeat black;  
  11.   height: 100px; 
  12.   min-width: 880px;
  13.   padding: 0 20px;
  14.   margin: 0; 
  15. }
  16.  
  17. #menue {
  18.     width: 110px;
  19.     margin: 0 0 1.2em; 
  20.     padding: 0;
  21.     border: 0px;
  22.     height: 1200px;
  23. }
  24.  
  25. #info {
  26.    background: rgb(212,206,160);
  27.    width: 150px; 
  28.    height:1000px;
  29.    float: right; 
  30.    padding: 10px 2px 2px 10 px;
  31.    margin: 5px;
  32. }
  33.  
  34. #main {
  35.   margin: 10px 0 0 120px;
  36.   width: 550px;
  37.   background:  0 rgb(245,237,180); 
  38.   padding: 0 10px 10px 20px; 
  39.   line-height: 1.5em; 
  40. }
  41.  
  42.  

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

Cheers,
Frank
Apr 3 '07 #1
Share this Question
Share on Google+
5 Replies


Expert 100+
P: 1,892
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.
Expand|Select|Wrap|Line Numbers
  1. #container { 
  2.   font-size: 0.8em;
  3.   width: 900px; 
  4.   min-width: 880px;
  5.   height: 1300px; 
  6.   margin: auto;
  7. }
  8.  
  9. #logo {
  10.   background: url(../pics/logo_01.png) 0 0 no-repeat black;  
  11.   height: 100px; 
  12.   min-width: 880px;
  13.   padding: 0 20px;
  14.   margin: 0; 
  15. }
  16.  
  17. #menue {
  18.     width: 110px;
  19.     margin: 0 0 1.2em; 
  20.     padding: 0;
  21.     border: 0px;
  22.     height: 1200px;
  23. }
  24.  
  25. #info {
  26.    background: rgb(212,206,160);
  27.    width: 150px; 
  28.    height:1000px;
  29.    float: right; 
  30.    padding: 10px 2px 2px 10 px;
  31.    margin: 5px;
  32. }
  33.  
  34. #main {
  35.   margin: 10px 0 0 120px;
  36.   width: 550px;
  37.   background:  0 rgb(245,237,180); 
  38.   padding: 0 10px 10px 20px; 
  39.   line-height: 1.5em; 
  40. }
  41.  
  42.  

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.
Apr 3 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
IE treats min-width as width but allows the container to expand.

Showing us only the css is not helpful.
Apr 3 '07 #3

uranuskid
P: 19
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
Apr 4 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Then post the html here.
Apr 4 '07 #5

uranuskid
P: 19
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:
Expand|Select|Wrap|Line Numbers
  1. div#container {
  2. width:expression(document.body.clientWidth 
  3.         < 800? "800px": "auto" 
  4.         && 
  5.         document.body.clientWidth 
  6.         > 900? "900px": "auto");
  7.   height:expression(document.body.clientWidth 
  8.         < 1000? "1000px": "auto" 
  9.         && 
  10.         document.body.clientWidth 
  11.         > 1500? "1500px": "auto"); 
  12.     }
  13.  
  14.  
Apr 4 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.