I am trying float two columns called column_l and column_r side by side on an about page but the problem I am having is that its moves and messes up the footer and hangs outside of the container div.
column_l contains the info about the company while column_r contains a picture.
I will show my code, but basically, the body contains a container which I have put all my code on.
For this, I created a wrapper to include the two columns.
body{
background-image:url('../img/small_logo.jpg');
background-repeat:repeat;
position:relative;
background-position:50% 50%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.8em;
/*padding-left:25px;
padding-right:25px;*/
overflow:visible;
margin:0px auto;
background-attachment:fixed;
min-height:100%;
width:100%;
/* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;*/
}
#container{
margin: auto;
padding:10px;
background-color:#F5F5DC;
width:720px;
border:2px black solid;
position:relative;
background-attachment: scroll;
display:block;
height:auto;
margin-bottom:10px;
padding-bottom:15px
}
#logo{ margin:0;
padding:auto;
position: inherit;
display:block;
height:auto;
width:auto;
}
#wrapper{margin:auto; height:auto; width:100%;}
#column_l {
width: 60%;
margin: 0;
padding: 0;
background-color: #FFFF99;
float:left;
}
#column_r {
width: 40%;
margin: 0;
margin-right:0px;
float: right;
background-color: #FFFF99;
position: absolute;
left:60%;
}
#column_r p {
font-size: 11px;
margin: 7px;
}
#nav{
background-color: #800000;
margin-left: 0px;
text-align: center;
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
padding:10px 0 10px 0;
font-family:"Buxton Sketch";
font-size:16px;
}
#rightContainer{
float:right;
margin:0;
padding:0;
border:2px solid;
width:25%;
height:400px;
}
th{font-size:large;
}
#footer{
margin-left:0;
padding:10px 0 10px 0;
text-align:center;
opacity:0.6em;
filter:alpha(opacity=60); /* For IE8 and earlier */
height:40px;
vertical-align:bottom;
font-family:"Buxton Sketch";
font-size:16px;
}
#copyright{
margin:auto;
padding:3px;
text-align:center;
}
#copyright p{
font-size: 12px;
color:#000000;
}
#fb {padding:2px;margin:auto; float:left; }
/* Styles for Navigation */
#nav ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
float: left;
}
#nav a {
color: #fff;
text-decoration: none;
margin: 0 3px;
padding: 5px;
display: inline;
}
#nav a:hover {
border: 1px solid #456;
background-color: #F0E68C;
font-size:large;
color:black;
}
/* Styles for Footer */
#footer ul {
list-style-type: none;
width: 100%;
margin: 0px;
padding: 5px;
padding-top:5px;
}
#footer li {
float: left;
}
#footer a {
color: black;
text-decoration: none;
margin-top: 0px;
padding-top: 5px;
display: inline;
}
#footer a:hover {
border: 1px solid ;
background-color: #F0E68C;
font-size:medium;
}
/*Classes */
.largehead h1{font-size:x-large;}
.shadow:before,
.shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.shadow p {
font-size:16px;
font-weight:bold;
}
.shadow img {
font-size:16px;
font-weight:bold;
}
/* Shadow Style */
.shadow {
-moz-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue; /* For Older Versions */
-webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
/* For 'IE' */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5) /* Top */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3) /* Right */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3) /* Bottom */
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/* Left */
}
-webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
/* For 'IE' */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5) /* Top */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3) /* Right */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3) /* Bottom */
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/* Left */
}
/* Rotated box*/
.rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
/* Curled corners */
.curled {
border:1px solid #efefef;
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.curled:before,
.curled:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
}
.curled:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
dl.border-around
{
margin: 2em 0;
padding: 0;
width: 20em;
float:right;
}
.border-around dt
{
background-color: #131210;
color: #959289;
padding: .5em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-top: 1px solid #131210;
}
.border-around dd
{
margin: 0 0 1em 0;
background: #DBD8D8;
text-align: center;
padding: 1em .5em;
font-style: italic;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-bottom: 1px solid #131210;
}
div.wrapperleft{
float:left;
position:relative;
}
}
div.wrapper{
float:right; /* important */
position:relative; /* important(so we can absolutely position the description div */
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
width:60%;
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
opacity:0.6; /* transparency */
filter:alpha(opacity=60); /* IE transparency */
}
p.description_content{
padding:0px;
margin:0px;
}
/*Feedback*/
form {float:left; width:50%; text-align:left; padding-top:30px;color:white; margin-left:200px; list-style:none;}
textarea {border:0; padding-top:0px; font-family:"Lucida Console";}
input {border:0; padding:0; font-family:"Lucida Console";}
submit {border:0; padding:0; font-family:"Lucida Console";}
label {border:0; padding:0; font-family:"Lucida Console";}
label {float:left; width:150px; text-align:right; display:block;margin-top:5px;}
textarea {border:1px gray solid; margin-left:10px; padding:5px;}
input, datalist {border:1px gray solid; margin-left:10px; padding:5px;}
input {width:280px; margin-bottom:16px;}
textarea {width:280px; height:150px; text-align:justify; margin-bottom:16px;}
#feedback {padding-top:10px; margin-right:100px;}
and for the html:
<body > <!-- START BODY -->
<!-- START CONTAINER -->
<div id="container" class="shadow lifted">
<div id="logo"> <!-- START LOGO -->
<img src="img/cropped_logo.jpg" alt="logo" width=720px height=300px />
</div> <!-- END LOGO -->
<!-- START NAV-->
<div id="nav" class="shadow">
<a href="index.html" > Home</a>
Menu
Wholesale
Our Story
Contact Us
</div> <!-- END NAV-->
<div id="wrapper">
<!-- Begin Left Column -->
<div id="column_l">
<h1>Our Story</h1>
<p> What started out as making ice cream for family and friends, in our home kitchen, quickly flourished into a labor of love and creativity for ice cream aficionado Hugh Balthrop. "For me, ice cream is all about real flavor using natural and local ingredients. This is where the passion is for me. Ice cream brings out the inner kid in everyone". Ever had Sweet Potato Ice Cream with candied pecans? What about lemon sweet tea sorbet? Wild Blueberry Frozen Yogurt? Blackberry or Watermelon Sorbet? The list goes on and on... Where can you find it, you ask? Right now, you can grab some at Oxbow Restaurant, in Clarksdale, MS, Mississippi Grounds and Cleveland Country Club in Cleveland, MS, Delta Bistro and TurnRow Books, in Greenwood, MS.</p>
</div><!-- End Left Column -->
<!-- Begin Right Column -->
<div id="column_r">
<img alt="" height="288" src="img/hugh.jpg" width="193" />
<p>Hugh Balthrop</p>
</div><!-- End Right Column -->
</div><br> <!--end wrapper-->
<div id="footer" class="shadow lifted">
<div class="fb-like" data-href="https://www.facebook.com/pages/Sweet-Magnolia-Ice-Cream-Co/303952586284264?fref=ts" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" clear:both></div>
Home
Menu
Wholesale
Our Story
Contact Us
</div> <!-- end of footer -->
<div id="copyright" class="lifted">
<p id="copyright">Sweet Magnolia Ice Cream Company © 2013. All Rights Reserved.</p>
</div>
</div> <!-- End of Container -->
</body>
</html>
I tried pushing column_r over with left:60% but it now covers up the footer.
You are forgetting to clear the floats.
Add
#footer { clear: both; }
And it will fix the problem.
Adding
float:left;
to the #wrapper CSS class will make the outer containing div expand to hold the contents of the article.
There are still some left over style issues you will have to deal with but hopefully this gets you on your way.
Add the rule 'clear: both; to the footer css styling, should do the trick!
None of the div elements on my page seem to be adjustable to 100% height. I've been trying since last night. Any help would be appreciated. Thanks.
<style type="text/css">
html, body {
height: 100%;
background-color: #E1E1E1;
}
body, td, th {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
</style>
<style type="text/css">
<!--
/* ~~ this fixed width container surrounds all other divs~~ */
.container {
width: 965px;
height: 100%;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
}
.sidebar1 {
float: left;
width: 200px;
padding-bottom: 10px;
min-height: 100%;
}
.content {
padding: 10px 0;
width: 380px;
background: #fcfcfc;
float: left;
height: 100%;
position: relative;
}
.content2 {
float: left;
width: 380px;
background: #fcfcfc;
padding: 10px 0;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The footer styles ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="container_8 clearfix">
<h1 class="grid_1"><img src="resources/img/kite2.png" width="35" height="16"></h1>
<nav class="grid_5">
<ul class="clearfix">
<li class="fr">administrator<span class="arrow-down"></span>
<ul>
<li>Account</li>
<li>Users</li>
<li>Groups</li>
<li>Sign out</li>
</ul>
</li>
</ul>
</nav>
<form class="grid_2">
<input class="full" type="text" placeholder="Search..." />
</form>
</div>
</header>
<section>
<div class="container">
<div class="sidebar1">
<div style="padding-top: 5px;">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" style="border-right: 0px;"><img src="resources/img/tab1.png" alt=""></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab2.png"></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab3.png"></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab4.png"></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
</div>
</div>
<div class="content" style="border-left: solid 1px #CCC;"><!-- end .content --></div>
<div class="content2" style="border-left: solid 1px #CCC;"><!-- end .sidebar2 --></div>
<!-- end .container -->
</div>
</section>
</div>
i have another attached css file (style.css)
#wrapper {
min-height:100%;
height:auto!important;
height:100%;
margin:0 auto -50px;
}
footer, #push {
height:50px;
}
html { height: 100%; }
body {
font:normal normal normal 11px/16px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
background:#8ec2da;
height: 100%;
}
.no-border {
border:none!important;
-moz-border-radius:0!important;
-webkit-border-radius:0!important;
-khtml-border-radius:0!important;
border-radius:0!important;
}
nav>ul {
padding:0;
}
a {
color:#06f;
outline:none;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
abbr, acronym {
font-size:85%;
letter-spacing:.1em;
text-transform:uppercase;
}
abbr[title], dfn[title] {
border-bottom:1px dotted black;
cursor:help;
}
abbr[title], acronym[title], dfn[title] {
border-bottom:1px dotted #CCC;
cursor:help;
}
code, kbd, samp, pre, tt, var, .code {
font-family:Monaco, 'Panic Sans', 'Lucida Console', 'Courier New', Courier, monospace, sans-serif;
}
h1 {
font-size:20px;
}
h2 {
font-size:18px;
}
h3 {
font-size:14px;
}
h4 {
font-size:13px;
}
h5 {
font-size:12px;
}
h6 {
font-size:11px;
}
h1, h2, h3, h4, h5, h6, p {
margin:1em 0;
}
h1, h2, h3 {
color:#000;
}
h4, h5, h6 {
color:#444;
font-weight:normal;
}
h6, p {
color:#676767;
}
h1, h2, h3, b, strong, caption, th, thead, dt, legend {
font-weight:bold;
}
ul, ol {
padding-left:2em;
}
li ul, li ol, ul ul, ol ol, dl dd {
margin-bottom:0;
margin-left:0;
margin-top:0;
}
small, sup, sub {
font-size:90%;
}
.code {
background-color:#EAEFF4;
color:#069;
overflow:auto;
padding:2px 6px;
}
.al {
text-align:left!important;
}
.ar {
text-align:right!important;
}
.ac {
text-align:center!important;
}
.fl {
float:left!important;
}
.fr {
float:right!important;
}
body.login {
height:0;
overflow:hidden;
}
.login-box {
margin:0 auto!important;
margin-top:-140px!important;
margin-left:-175px!important;
position:absolute!important;
top:50%;
left:50%;
width:350px;
}
.login-box form {
border-bottom:1px solid #DDD;
margin:10px 0;
}
.login-box ul {
list-style-type:none;
padding:0;
}
.login-box.main-content {
min-height:0;
}
#promo {
border-bottom:1px solid #000;
background:#f9d835;
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
-pie-background:linear-gradient(top, #f9d835, #f3961c);
padding:10px 0;
}
#promo p {
color:#fff;
margin:0;
line-height:26px;
text-shadow:0 1px 0 #000;
}
#promo .close {
color:#e83;
font-family:'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size:10px;
font-weight:bold;
padding:1px 5px;
text-shadow:0 1px 1px #fff;
text-decoration:none;
}
#wrapper>header {
background:#434343;
background:-moz-linear-gradient(top, #434343, #191919);
background:-webkit-gradient(linear, left top, left bottom, from(#434343), to(#191919));
-pie-background:linear-gradient(top, #434343, #191919);
-moz-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-khtml-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-pie-box-shadow:#bbb -2px 1px 2px;
box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
margin-bottom:20px;
position:fixed;
top:0;
width:100%;
z-index:999;
zoom:1;
}
#wrapper>header h1 {
color:#fff;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-size:16px;
line-height:40px;
margin-top:0;
margin-bottom:0;
text-shadow:0 1px 1px #000;
}
#wrapper>header h1 a {
color:#fff;
text-decoration:none;
}
#wrapper>header nav {
background:transparent url(../../resources/img/line_vert.png) repeat-y top left;
}
#wrapper>header nav ul {
padding:0;
}
#wrapper>header nav>ul {
padding-left:10px;
}
#wrapper>header nav>ul>li {
display:block;
float:left;
position:relative;
}
#wrapper>header nav>ul>li a {
color:#eee;
display:block;
font-size:13px;
line-height:40px;
padding:0 10px;
text-decoration:none;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
}
#wrapper>header nav>ul li:hover>a {
color:#fff;
}
#wrapper>header nav>ul>li:hover:not(.action)>a {
background:#555;
background:-moz-linear-gradient(top, #555, #222);
background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
-pie-background:linear-gradient(top, #555, #222);
}
#wrapper>header nav>ul>li.active>a {
background:#191919!important;
color:#fff;
font-weight:bold;
}
#wrapper>header nav>ul>li.action {
border:1px solid #444;
border:1px solid rgba(255, 255, 255, 0.07);
border-bottom:1px solid rgba(255, 255, 255, 0.15);
margin-top:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
margin-right:4px;
}
#wrapper>header nav>ul>li.action>a.button {
color:#fff;
font-size:10px;
font-weight:bold;
line-height:16px;
padding:4px 10px;
border:1px solid #111;
}
#wrapper>header nav>ul>li>a span.arrow-down {
background:transparent url(../../resources/img/arrows.png) no-repeat 0 -103px;
display:inline-block;
height:6px;
margin-left:8px;
width:10px;
}
#wrapper>header nav>ul>li:hover>a span.arrow-down {
background:transparent url(../../resources/img/arrows.png) no-repeat -10px -103px;
}
#wrapper>header nav>ul ul {
background:#191919;
-moz-border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
display:none;
padding-bottom:5px;
position:absolute;
width:150px;
z-index:999;
-moz-box-shadow:0 2px 2px #777;
-webkit-box-shadow:0 2px 2px #777;
-khtml-box-shadow:0 2px 2px #777;
box-shadow:0 2px 2px #777;
}
#wrapper>header nav>ul li:hover ul {
display:block;
}
#wrapper>header nav>ul ul li a {
padding:0 10px;
line-height:30px;
}
#wrapper>header nav>ul ul li a:hover {
background:#434343;
}
#wrapper>header form input[type=text] {
background:#777;
border:1px solid #191919;
margin-top:7px;
-moz-box-shadow:0 1px 0 #ddd;
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow:0 1px 0 #ddd;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-khtml-box-shadow:0 1px 0 #ddd;
-khtml-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
#wrapper>header form input[type=text]:hover {
background:#888;
}
#wrapper>header form input[type=text]:focus {
background:#eee;
}
#wrapper>section {
padding-top:60px;
}
.has-promo #wrapper>section {
padding-top:110px;
}
.main-section {
background:#afd4e6;
background:rgba(255, 255, 255, 0.3);
margin-bottom:20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
height: 100%;
}
.main-section .content {
padding:20px 20px 20px 0;
height: 100%;
}
.main-section .content h3:first-child {
margin-top:0;
}
.main-content {
background:#fff;
-moz-box-shadow:0 0 3px #555;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 3px #555;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-khtml-box-shadow:0 0 3px #555;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
min-height:100%;
position:relative;
z-index:1;
}
.main-content>header {
background:#eee;
background:-moz-linear-gradient(top, #fafafa, #e1e1e1);
background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e1e1e1));
-pie-background:linear-gradient(top, #fafafa, #e1e1e1);
border-bottom:1px solid #999;
-moz-border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-khtml-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
padding:15px 30px;
-moz-box-shadow:0 1px 1px #bbb;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 1px #bbb;
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-khtml-box-shadow:0 1px 1px #bbb;
-khtml-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-pie-box-shadow:none;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
}
.main-content>header h2 {
font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
font-weight:normal;
font-size:18px;
margin:0;
text-shadow:0 1px 0 #fff;
}
.main-content>header h4 {
margin:0;
}
.main-content>header .avatar {
background:#fff url(../../resources/img/user_32.png) no-repeat center center;
-moz-box-shadow:0 0 3px #777;
-webkit-box-shadow:0 0 3px #777;
-khtml-box-shadow:0 0 3px #777;
box-shadow:0 0 3px #777;
display:block;
float:left;
height:60px;
margin-right:10px;
width:60px;
}
.main-content>header .tags {
background:transparent url(../../resources/img/icons/tag_blue.png) no-repeat 0 0;
float:left;
margin:0;
padding-left:20px;
}
.main-content>header .tags a {
font-size:9px;
}
.main-content>header .view-switcher {
font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
font-size:18px;
text-shadow:0 1px 0 #fff;
position:relative;
}
.main-content>header .view-switcher>h2>a {
background:transparent url(../../resources/img/arrow-updown.png) no-repeat center center;
display:inline-block;
text-indent:-999em;
width:10px;
height:17px;
}
.main-content>header .view-switcher ul {
background:#dedeff;
border:1px solid #999;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 3px #888;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 0 3px #888;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0 0 3px #888;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
box-shadow:0 0 3px #888;
box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
display:none;
list-style-type:none;
padding:10px 20px;
position:absolute;
z-index:999;
margin:-10px -20px;
top:-12px;
left:-1px;
min-width:160px;
}
.main-content>header .view-switcher ul li {
font-size:12px;
}
.main-content>header .view-switcher ul li.separator {
border-bottom:1px solid #999;
margin:10px 0;
}
.main-content>header .view-switcher ul li a {
color:#222;
display:block;
font-size:18px;
line-height:40px;
margin:0 -20px;
padding:0 20px;
text-decoration:none;
}
.main-content>header .view-switcher ul li a:hover {
background:#afd4e6;
}
.main-content>header .action-buttons {
position:relative;
top:-4px;
z-index:999;
}
.main-content>section {
padding:20px 30px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
.main-content>section.container_6 {
padding:20px;
}
.main-content>section hgroup {
margin-top:10px;
}
.main-content>section hgroup h2 {
padding-top:10px;
margin:0 0 3px 0;
line-height:1.3em;
text-transform:uppercase;
}
.main-content>section hgroup h4 {
line-height:1.4em;
margin:0 0 30px;
}
.main-content>section .other-options h3 {
color:#555;
border-bottom:1px dotted #999;
padding-bottom:5px;
}
.main-content>section .other-options ul {
list-style-type:none;
padding:0;
}
.main-content>section .other-options h4 {
margin-bottom:0;
}
.main-content>section .other-options h4+p {
margin-top:0;
}
.list-view {
border-top:1px solid #ddd;
font-size:12px;
margin-left:-30px;
margin-right:-30px;
}
.list-view>li {
border-bottom:1px solid #ddd;
padding:10px 30px 10px 55px;
position:relative;
zoom:1;
}
.list-view>li.contact {
background:transparent url(../../resources/img/icons/vcard.png) no-repeat 30px 10px;
}
.list-view>li.company {
background:transparent url(../../resources/img/icons/building.png) no-repeat 30px 10px;
}
.list-view>li.note {
background:transparent url(../../resources/img/icons/note.png) no-repeat 30px 10px;
}
.list-view>li.tick {
background:transparent url(../../resources/img/icons/tick.png) no-repeat 30px 10px;
}
.list-view>li.calendar {
background:transparent url(../../resources/img/icons/calendar.png) no-repeat 30px 10px;
}
.list-view>li:hover {
background-color:#fafafa;
}
.list-view>li.current {
background-color:#f1f1f1;
}
.list-view>li .more {
background:#bcf url(../../resources/img/arrow-right.png) no-repeat center center;
display:block;
width:16px;
height:100%;
position:absolute;
right:0;
top:0;
text-align:center;
text-decoration:none;
text-indent:-999em;
visibility:hidden;
}
.list-view>li .more:hover {
cursor:pointer;
}
.list-view>li:hover .more {
visibility:visible;
}
.list-view>li.current .more {
background-image:url(../../resources/img/arrow-left.png);
visibility:visible;
}
.list-view>li .timestamp {
color:#555;
float:right;
font-size:9px;
}
.list-view>li a {
font-weight:bold;
}
.list-view>li p {
color:#111;
margin:0;
}
.list-view>li .entry-meta {
color:#555;
}
.list-view>li .avatar {
border:1px solid #ddd;
float:left;
height:32px;
margin-right:4px;
width:32px;
}
.list-view>li .avatar img {
width:32px;
height:32px;
}
.grid-view li {
background:#fff;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
-moz-box-shadow:0 0 3px #777;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow:0 0 3px #777;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
-khtml-box-shadow:0 0 3px #777;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
box-shadow:0 0 3px #777;
box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
float:left;
margin:5px;
padding:5px;
position:relative;
width:180px;
}
.grid-view>li .more {
background:#bcf url(../../resources/img/arrow-right.png) no-repeat center center;
-moz-border-radius:0 3px 3px 0;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-khtml-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
display:block;
width:16px;
height:100%;
position:absolute;
right:0;
top:0;
text-align:center;
text-decoration:none;
text-indent:-999em;
visibility:hidden;
}
.grid-view>li .more:hover {
cursor:pointer;
}
.grid-view>li:hover .more {
visibility:visible;
}
.grid-view>li.current .more {
background-image:url(../../resources/img/arrow-left.png);
visibility:visible;
}
.grid-view li .timestamp {
position:absolute;
bottom:0;
right:15px;
display:block;
font-size:9px;
}
.grid-view li .name {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.grid-view li .entry-meta {
font-size:9px;
}
.grid-view li .avatar {
border:1px solid #ddd;
float:left;
height:60px;
margin-right:4px;
width:60px;
}
.grid-view>li .avatar img {
width:60px;
height:60px;
}
.listing {
list-style-type:none;
padding:0;
}
.listing>li.contact .avatar {
background:transparent url(../../resources/img/user_32.png) no-repeat center center;
}
.listing>li.company .avatar {
background:transparent url(../../resources/img/users_business_32.png) no-repeat center center;
}
.preview-pane {
position:relative;
z-index:0;
}
.preview-pane .preview {
background:#fcfcfc;
display:block;
top:0;
left:-370px;
padding:20px;
position:absolute;
height:350px;
width:310px;
-moz-border-radius:0 5px 5px 0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
-moz-box-shadow:0 2px 2px #777;
-webkit-box-shadow:0 2px 2px #777;
-khtml-box-shadow:0 2px 2px #777;
box-shadow:0 2px 2px #777;
}
.preview-pane .preview>h3:first-child, .preview-pane .preview>h4:first-child {
margin-top:0;
}
#wrapper>section>div>aside nav {
padding:10px 0;
margin-right:-20px;
}
#wrapper>section>div>aside nav>ul {
display:block;
}
#wrapper>section>div>aside nav>h4 {
color:#333;
font-size:10px;
font-weight:bold;
margin-top:0;
padding-left:8px;
text-transform:uppercase;
text-shadow:0 1px 0 #eee;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
#wrapper>section>div>aside nav>ul>li {
float:left;
width:100%;
}
#wrapper>section>div>aside nav>ul>li a {
color:#333;
display:block;
font-size:11px;
padding:5px 4px 5px 8px;
text-decoration:none;
text-shadow:0 1px 1px #fff;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-moz-border-radius:4px 0 0 4px;
-webkit-border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
-khtml-border-radius:4px 0 0 4px;
border-radius:4px 0 0 4px;
line-height:16px;
}
#wrapper>section>div>aside nav>ul>li>a:hover {
background:#9ecbe0;
background:rgba(255, 255, 255, 0.15);
}
#wrapper>section>div>aside nav>ul>li.active>a {
background:#afd4e6;
background:rgba(255, 255, 255, 0.3);
color:#111;
font-weight:bold;
}
#wrapper>section>div>aside nav>ul>li a h5, #wrapper>section>div>aside nav>ul>li a h6 {
line-height:140%;
margin:0;
}
#wrapper>section>div>aside nav>ul>li a h5 {
margin-bottom:3px;
}
#wrapper>section>div>aside nav>ul>li a h6 {
font-size:9px;
text-shadow:none;
}
#wrapper>section>div>aside nav.global>ul>li>a span {
background:#def;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
float:right;
font-size:9px;
font-weight:normal;
padding:0 4px;
margin-right:2px;
}
#wrapper>section>div>aside nav.subnav {
background:transparent url(../../resources/img/line.png) repeat-x top left;
}
#wrapper>section>div>aside nav>ul>li a.nav-icon {
background-position:5px 50%;
background-repeat:no-repeat;
padding-left:25px;
}
.icon-book {
background-image:url(../../resources/img/icons/book.png)!important;
}
.icon-house {
background-image:url(../../resources/img/icons/house.png)!important;
}
.icon-note {
background-image:url(../../resources/img/icons/note.png)!important;
}
.icon-tick {
background-image:url(../../resources/img/icons/tick.png)!important;
}
.icon-time {
background-image:url(../../resources/img/icons/time.png)!important;
}
.apple_overlay {
display:none;
background-image:url(resources/img/white.png);
width:640px;
padding:35px;
font-size:11px;
}
.apple_overlay .close {
background-image:url(../../resources/img/close-icon.png);
position:absolute;
right:14px;
top:14px;
cursor:pointer;
height:30px;
width:30px;
}
.apple_overlay.black {
background-image:url(../../resources/img/transparent.png);
color:#fff;
}
third css file (reset.css)
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
/*content:none;*/
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
Try adding overflow: auto; to your elements :)
div#wrapper is the first div mentioned in your HTML - and it has no styles applied at all.
100% height will only work if the parent has an absolute height defined. You need to define the height for the parent first and then the child will get 100% of its height.