Choose from our various pricing plans. There is a package for everyone!


Div Floating and Positioning

View previous topic View next topic Go down

Div Floating and Positioning

Post by willscarlet on Wed Oct 03, 2012 9:08 pm

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 -- */
avatar
willscarlet
Member
Member

Age : 34
Posts : 2
Join date : 2012-10-03
Reputation : 0

View user profile

Back to top Go down

Re: Div Floating and Positioning

Post by Mati™ on Wed Dec 25, 2013 11:35 am

User inactive and seems not to need help. Because of this, the support topic has been closed.


If you have other questions, please open a new topic.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum