Floating Divs and Positioning

willscarlet · 10-04-2012, 03:23 AM

I built a website for some friends www.crossfitsumter.com, go to the about page to see the div's in question. and It seems to work well, but not on mobile devices and lower resolution monitors. in low res situations, the right hand sidebar ends up underneath the center content. I know i'm supposed to wrap all the floating div's inside a main content wrapping div but I cannot get it to work right and still have the content positioned in the center of the screen the dive 'white' is the main content wrapper and the three div's that need to fit on the screen are transboxleft, center, ad right. Any help or advice would be greatly appreciated. Here is my CSS:

Code:

* { margin:0; padding:0; }
body{ 
   background:url(../img/background/water2.jpg); 
   background-attachment:fixed;
   background-color:#111; 
}
 
/* Main Body Box: Begin */
div.white
  {
  text-align: center;
  width:90%;
  /*height:900px; */
  margin:30px 60px;
  background: transparent url(../img/background/transparent.png) repeat;
  /*border:1px solid #00ff01;*/
  }
/* Main Body Box: End */
  
/* Left Box: Begin */
div.transboxleft
  {
  float: left;
  width:200px;
  height:autopx;
  margin:30px 60px;
  background: #373b3c; 
  border:1px solid #00ff01;
  }
div.transboxleft p
  {
  margin:30px 40px;
  font-weight:bold;
  color:white;
  }
 div.transboxleft h2
  {
  margin:30px 40px;
  text-decoration: none;
  border-bottom: 1px solid #00ff01;
  border-top: 1px solid #00ff01;
  font-weight:bold;
  font-size: 18px;
  color:white;
  }
div.transboxleft ul
  {
  margin:10px ;
  text-align: left;
  text-decoration: none;
  font-weight:bold;
  font-size: 14px;
  } 
div.transboxleft a
  {
  text-align: left;
  margin:10px ;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
  color: white;
  }
div.transboxleft a.active
  {
  text-align: left;
  margin:10px ;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
  color: #00ff01;
  }
/* Left Box: End */

/* Center Box: Begin */
div.transboxcenter
  {
  float: left;
  width:600px;
  height:auto;
  margin:50px -25px;
  background: #373b3c; 
  border:1px solid #00ff01;
  }
  
hr
{
  margin: 50px;
  
  width: 80%;
  border:1px solid #00ff01;
}

div.transboxcenter p
  {
  font-family: Times new roman;
  text-align: left;
  margin-right:15px;
  margin-left:15px;
  font-weight:bold;
  font-size: 16px;
  color:white;
  }
 div.transboxcenter a
  {
  font-family: Times new roman;
  text-align: center;
  margin-right:15px;
  margin-left:15px;
  font-weight:bold;
  font-size: 16px;
  color:#00ff01;
  }
 div.transboxcenter p1
  {
  font-family: Times new roman;
  text-align: center;
  margin-right:15px;
  margin-left:15px;
  font-weight:bold;
  font-size: 16px;
  color:white;
  }
 div.transboxcenter center
  {
  font-family: Times new roman;
  text-align: center;
  margin-right:15px;
  margin-left:15px;
  font-weight:bold;
  font-size: 16px;
  color:white;
  }
div.transboxcenter strong
  {
  text-decoration: underline;
  font-family: Times new roman;
  margin-right:15px;
  margin-left:15px;
  font-weight:bold;
  font-size: 18px;
  color: #b2b0b3;   
  }
 div.transboxcenter h2
  {
  margin:30px 40px;
  text-decoration: underline;
  font-weight:bold;
  font-size: 18px;
  color:white;
  }
 div.transboxcenter h1
  {
  margin:30px 40px;
  font-family: Palatino Linotype;
  text-decoration: none;
  font-weight:bold;
  border-bottom: 1px solid #00ff01;
  border-top: 1px solid #00ff01;
  font-size: 34px;
  color:white;
  } 
 div.transboxcenter ul
  {
  text-align: center;
  margin:30px 40px;
  font-family: Palatino Linotype;
  text-decoration: none;
  font-weight:bold;
  font-size: 16px;
  color:white;
  }
 div.transboxcenter img
  {
  text-align: center;
  border: 1px solid #00ff01;
  }
 div.transboxcenter strong
  {
  font-family: Palatino Linotype;
  text-decoration: none;
  font-weight:bold;
  border-bottom: 1px solid #00ff01;
  border-top: 1px solid #00ff01;
  }
  
.red {
   color: red;
   font-size: 18px;
}

img.floatLeft { 
    float: left; 
   margin-right: 15px;
   margin-top: 15px;
}
img.floatRight { 
    float: right; 
    margin-left: 15px;   
    margin-top: 15px;   
   
}
#mytable {
   width: 90%;
   padding: 0;
   margin: 0;
}

th {
   font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   color: white;
   border-right: 1px solid #00ff01;
   border-bottom: 1px solid #00ff01;
   border-top: 1px solid #00ff01;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-size: 14px;
   text-align: left;
   padding: 6px 6px 6px 12px;
   background: #b2b0b3;
}

th.nobg {
   border-top: 0;
   border-left: 0;
   border-right: 1px solid #00ff01;
   background: none;
}

td {
   border: 1px solid #00ff01;
   background: #fff;
   padding: 6px 6px 6px 12px;
   color: #4f6b72;
}

table.center {
    margin-left:auto; 
    margin-right:auto;
  }
  
b {
   text-align: left;
   padding: 5px;
   background: #fff;
   font-size: 16px;
   text-decoration: underline;
   color: #4f6b72;
}

td.alt {
   background: #F5FAFA;
   color: #797268;
}

td.times {
   background: none;
   border: none;
   color: white;
}

th.spec {
   border-left: 1px solid #00ff01;
   border-top: 0;
   background: #fff url(images/bullet1.gif) no-repeat;
   font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
   border-left: 1px solid #C1DAD7;
   border-top: 0;
   background: #f5fafa url(images/bullet2.gif) no-repeat;
   font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   color: #797268;
}

th.times {
   background: none;
   border: none;
   color: white;
   text-decoration: underline;
}

/* Center Box: End */

/* Right Box: Begin */
div.transboxright
  {
  float: left;
  width:auto;
  height:auto;
  margin:30px 60px;
  background: #373b3c; 
  border:1px solid #00ff01;
  }
  
div.transboxright p
  {
  margin:30px 40px;
  font-weight:bold;
  color:white;
  }
  
div.transboxright h2
  {
  margin:30px 40px;
  text-decoration: none;
  border-bottom: 1px solid #00ff01;
  border-top: 1px solid #00ff01;
  font-weight:bold;
  font-size: 18px;
  color:white;
  }
div.transboxright a
  {
  margin:10px ;
  text-decoration: none;
  font-weight:bold;
  font-size: 18px;
  color: #00ff01;
  }
div.transboxright ul
  {
  margin:10px ;
  text-align: left;
  text-decoration: none;
  font-weight:bold;
  font-size: 14px;
  color: #00ff01;
  } 

 div.transboxright img {
  border-width: 0px;
}
/* Right Box: End */      

/* -- Menu : Begin -- */
#menu_outline {
   border-top:5px solid white;
   border-bottom:5px solid white;
   width: 100%;
   height:30px;
   background: #18191a;
   padding: 1px 0;
}

menu {
   width: 970px;
   margin: 0 auto;
   position: relative;
}

menu a.menu_btn {
   font-family: sans-serif;
   text-transform: uppercase;
   font-size: 14px;
   color: #fff;
   text-decoration: none;
   font-weight: bold;
   outline: none;
   padding: 10px 60px;
   float: left;
   
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   position: relative;
   behavior: url(../js/PIE.html);
   
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   -o-transition: all .3s linear;
   transition: all .3s linear;
}

menu a.menu_btn u {
   font-family: "calluna-sans-1","calluna-sans-2", sans-serif;
   text-transform: uppercase;
   font-size: 14px;
   color: #fff;
   text-decoration: none;
   outline: none;
   padding: 10px 60px;
   float: left;
   list-style-type: none;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   position: relative;
   behavior: url(../js/PIE.html);
   
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   -o-transition: all .3s linear;
   transition: all .3s linear;
}

menu a.menu_btn:hover, menu a.menu_btn.active {
   background: #b2b0b3;
   height: 10px;
   color: white;
}

menu .linebreak {
   float: left;
   padding-top: 13px;   
}

menu .linebreakright {
   float: right;
   padding-top: 13px;   
}
/* -- Menu : End -- */

/* -- Main Logo : Begin -- */
#logo1 {
   background-image: url(../img/background/photo.JPG);
    position: absolute;
    top: -20px;
   left: 330px;
   height: 100px;
   width: 280px;
   z-index: 999;
   border: 2px solid #00ff01;
}
/* -- Main Logo : End -- */

/* -- Logo : Begin -- */
#logomain {
   background-image: url(../img/background/photo.JPG);
    position: absolute;
    top: -20px;
   left: 330px;
   height: 100px;
   width: 280px;
   z-index: 999;
   border: 2px solid #00ff01;
}

#logocs {
    position: absolute;
    bottom: -10px;
   left: 30px;
   height: 100px;
   width: 280px;
   z-index: 999;
}
/* -- Logo : End -- */

/* -- Facebook Logo : Begin -- */
#logof {
   background-image: url(../img/background/facebook.png);
   background-repeat:no-repeat;
    position: absolute;
   border-width: 0px;
    top: 10%;
   left: 90%;
   height: 100%;
   width: 100%;
   z-index: 999;
}
/* -- Facebook Logo : End -- */

/* -- Facebook Logo : Begin -- */
#journal {
   background-repeat:no-repeat;
    position: absolute;
   border-width: 0px;
    top: 10%;
   right: 90%;
   z-index: 999;
}
/* -- Facebook Log

/* -- Footer : Begin -- */
#footer{
   height: 75px;
   width: 100%;
   border-top:5px solid white;
   border-bottom:5px solid white;
   background: #18191a;
   padding: 1px 0;
   position:fixed;
    bottom:-0;
    width:100%;
}
.clear {
   clear:both;
   padding:0px;
   margin:0px;
}

.bottommenu {
}

.bottommenu p {
   text-align: center;
   color: #B4AA7F;
}

.bottommenu a {
   font:bold 12px Georgia, Arial, Helvetica, sans-serif;
   color:white;
   text-decoration:none;
}

.bottommenu ul {
   margin:0px;
   text-align: center;
   padding:10px;
}

.bottommenu li {
   display:inline;
   border-right:1px solid #B4AA7F;
   padding:0px 9px 0px 9px;
}

.bottommenu li a {
   font:bold 12px Georgia, Arial, Helvetica, sans-serif;
   color:#B4AA7F;
   text-decoration:none;
}

.bottommenu li a:hover {
   color:#B39A82;
   text-decoration:none;
}
/* -- footer : End -- */

Johnb21 · 10-04-2012, 03:34 AM

for responsive layouts... the ones that are used for mobile and handheld, you can't set any of the widths, left and right margins or left and right paddings using pixels. If you are using pixels for widths (even with a wrapper using %) your elements will have issues with their layout.

Change every pixel to % on the left and right sides. Heights are never a concern for these kinds of layouts, just the horizontal stuff. Be aware though.. setting a div to 80% makes it 80% of the parent element... so in the case of a div inside your wrapper, it would be 80% of the wrappers 90% and not 80% of the screen. Divide your widths, margins, etc by the pixeled variation of your width (90% of 1280 pixels = 1134 pixels for your wrapper... 300 pixel for your div / 1134 = 26.45502645502646 % width for that div. 20 pixel margin on the right would be 1.7636684303351%... etc.

Johnb21 · 10-04-2012, 03:41 AM

By the way... to properly center your entire wrapper (.white) delete your margins on it and put margin: 30px auto; The 30px will give it a margin on top and bottom of 30px (if that's what you wanted) and the auto will center the content on the page. Also, if you have floating elements inside a parent element, you should try overflow:hidden; so that the parent takes up the space and doesn't collapse.