Floating and Minimising Windows 1

ro88o · Jun 25, 2005

I am trying to convert a page I currently have using tables into one that just uses css/div tags.

The code is as follows:

Code:

<html>
<head>
<title>Welcome to Exyt Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
  #topLeft { width: 190px;
             height: 125px;
             border-left: solid 1px #cccccc;
	     border-top: solid 1px #cccccc; 			    	     padding: 5 5 5 5;
	     float: left; }
			 
  #topMiddle { width: 390px;
               height: 125px;
	       border-top: solid 1px #cccccc;
	       padding: 5 5 5 5;			   
	       float: left; }

  #topRight { width: 140px;
              min-height: 125px;
              border-top: solid 1px #cccccc;
              border-right: solid 1px #cccccc; 
	      padding: 5 5 5 5;			  
	      float: left; }

  #greyBarTop { width: 740px;
                min-height: 50px;
		background-color: #cccccc;
		border-left: solid 1px #cccccc;
		border-right: solid 1px #cccccc;
  	        padding: 5 5 5 5;				
		clear: both; }
  
  #bottomLeft { width: 190px;
                border-left: solid 1px #cccccc;
	        padding: 5 5 5 5;				
                float: left; }
				
  #bottomMiddle { width: 390px;
  		  border-right: solid 1px #cccccc;
	 	  padding: 5 5 5 5;				                  float: left; }

  #bottomRight { width: 139px;
		 border-right: solid 1px #cccccc;
	 	 padding: 5 5 5 5;				                 float: left; }

  #greyBarBottom { width: 740px;
                   min-height: 30px;							   background-color: #cccccc; 			                   border-left: solid 1px #cccccc;
		   border-right: solid 1px #cccccc; 
 	   	   padding: 5 5 5 5;
		   clear: both; }
</style>
</head>

<body>
  <div id="topLeft">tl</div>
  <div id="topMiddle">tm</div>
  <div id="topRight">tr</div>
  <div id="greyBarTop">gbt</div>
  <div id="bottomLeft">bl</div>
  <div id="bottomMiddle">bm</div>
  <div id="bottomRight">br</div>
  <div id="greyBarBottom">gbb</div></div>
</body>
</html>

This displays correctly in FF 1.0.4 (note bottomRight has width 139px because otherwise the border was 1px too far over - couldn't work out why), however when opened in IE6 the middle white boxes don't line up with the other boxes. Can anybody tell me why ?

My second problem is that when the window is minimised the boxes that have float left are pushed onto separate lines and the layout is completely ruined. Couldn't work out how to stop this happening either =S

TIA, ro88o

rpgfan3233 · Jun 25, 2005

Putting all of it in a page container should work:

Code:

#pageContainer { width: 740px; border: 1px solid #ccc; }
  #topLeft { width: 190px;
             height: 125px;
             padding: 5 5 5 5;
             float: left; }
            
  #topMiddle { width: 390px;
               height: 125px;
           padding: 5 5 5 5;               
           float: left; }

  #topRight { width: 140px;
              min-height: 125px;
          padding: 5 5 5 5;              
          float: left; }

  #greyBarTop { width: 100%;
                min-height: 50px;
        background-color: #cccccc;
	     padding: 5 0 5 0;                
        clear: both; 
}
  
  #bottomLeft { width: 190px;
            padding: 5 5 5 5;                
                float: left; }
                
  #bottomMiddle { width: 390px;
           padding: 5 5 5 5;                                  float: left; }

  #bottomRight { width: 139px;
          padding: 5 5 5 5;                                 float: left; }

  #greyBarBottom { width: 100%;
                   min-height: 30px;                               background-color: #cccccc;                                      padding: 5 0 5 0;
           clear: both; }

Code:

<body>
<div id="pageContainer">
  <div id="topLeft">tl</div>
  <div id="topMiddle">tm</div>
  <div id="topRight">tr</div>
  <div id="greyBarTop">gbt</div>
  <div id="bottomLeft">bl</div>
  <div id="bottomMiddle">bm</div>
  <div id="bottomRight">br</div>
  <div id="greyBarBottom">gbb</div>
</div>
</body>

The entire page width is 750px, so that is why the page container is fixed at 750px. I added borders around the page container and removed the borders from the other divs (less clutter). I changed your grey bar declarations. They are supposed to fill the entire width, so I just changed it to 100%. This caused an overflow problem with Firefox, so the left/right padding had to be reduced to 0. For some reason, the padding wasn't applied in IE. I think that's it. . .

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Floating and Minimising Windows 1

ro88o

Programmer

rpgfan3233

Technical User

Similar threads

Part and Inventory Search

Sponsor