Got an issue here regarding making other div-elements hidden when and other div has been visible.
As you see in my code below, when f.ex. star trek have been visible, I want pacific rim and world war z to disappear using z-index.
My HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header id="header">
<h1>BluShop</h1>
</header>
<section id="leftContent">
<div id="pacificrimContent">
<h2>Pacific Rim</h2>
<img alt="pacificrim image" src="../bilder/pacificRim.jpg">
<p>Blahblahblah</p>
</div>
<div id="startrekContent">
<h2>Star Trek</h2>
<img alt="startrek image" src="../bilder/starTrek.jpg">
<p>blahblahblah</p>
</div>
<div id="worldwarzContent">
<h2>World War Z</h2>
<img alt="worldwarz image" src="../bilder/worldWarZ.jpg">
<p>blahblahblah</p>
</div>
</section>
<aside id="rightContent">
<div id="pacificrimPoster">
<img alt="pacificrim poster" src="../bilder/pacificRim.jpg">
</div>
<div id="startrekPoster">
<img alt="startrek poster" src="../bilder/starTrek.jpg">
</div>
<div id="worldwarzPoster">
<img alt="worldwarz poster" src="../bilder/worldWarZ.jpg">
</div>
</aside>
<footer id="footer">
</footer>
</div>
</body>
</html>
The CSS code
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
}
#container{
width: 960px;
height: 600px;
margin: auto;
background-color: rgb(78, 80, 85);
border: solid 1px rgb(213, 214, 215);
}
#header{
height: 60px;
background-color: rgb(66, 69, 74);
margin-bottom: 10px;
}
#header h1{
float: left;
margin: 0px 10px 0px 10px;
color: rgb(14, 177, 238);
}
#leftContent{
float: left;
position: relative;
margin: 0px 10px 10px 10px;;
height: 460px;
width: 780px;
background-color: rgb(230, 231, 232);
}
#leftContent h2{
font-size: 20px;
margin: 10px 0px 0px 10px;
}
#leftContent img{
float: left;
margin: 0px 20px 10px 10px;
width: 310px;
height: 420px;
}
#leftContent p{
margin: -4px 20px 10px 0px;
}
#pacificrimContent, #startrekContent, #worldwarzContent{
position: absolute;
overflow: hidden;
transition: height .5s ease-in;
-webkit-transition: height .5s ease-in;
-moz-transition: height .5s ease-in;
}
#startrekContent, #worldwarzContent{
z-index: -1;
height: 0;
}
#rightContent{
float: right;
width: 140px;
height: 460px;
margin: 0px 10px 10px 10px;
background-color: rgb(230, 231, 232);
}
#rightContent img{
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 20px
}
#pacificrimContent:target, #startrekContent:target, #worldwarzContent:target{
height: 100%;
z-index: 10;
}
#footer{
height: 60px;
margin: 0;
background-color: rgb(16, 163, 210);
clear: both;
}
As you see I need Pacific Rim to be the standard movie that show up when people vist the website, and the other should be visible when I target them. Then the movie I target should be visible. Per now, Pacific Rim is ALWAYS visible and in the background of the other movie.
So if i f.ex. choose to target the star trek movie, and then so the world war z movie. I see the Pacific Rim movie behind when the transition is working.
I am not allowed to use javascript, so is there a way I can get this working?
Thanks!
jsfiddle.net/f8ns4 - JSFiddle to show what i mean!
Give your individual movie divs a background color so you cant see whats underneath it.
#pacificrimContent, #startrekContent, #worldwarzContent{
position: absolute;
overflow: hidden;
transition: height .5s ease-in;
-webkit-transition: height .5s ease-in;
-moz-transition: height .5s ease-in;
background-color: rgb(230, 231, 232);
}
Demo: http://jsfiddle.net/f8ns4/1/
Related
I have a side navigation bar, and I have images beside the text, which show the destination of each link. I want the images and their respective link to be side-by-side. Additionally, I want each link's border to be equal. Here's how it looks now.
In the first line, I need the guitar icon next to the Chords link, and the same for the following links and their icons. Here's the CSS I'm using.
.sidebar {
display: inline-block;
overflow: hidden;
position: fixed;
margin-top: 60px;
width: 200px;
height: 300px;
background-color: rgba(50, 50, 50, .8);
transition: width .3s ease;
}
.sidebar a {
font-size: 1.8em;
text-decoration: none;
color: white;
border: 1px solid rgba(25, 25, 25, .5);
background-color: rgba(50, 50, 50, 1);
border-collapse: collapse;
transition: background-color .1s ease;
}
<div class="sidebar" id="sidebar">
<img src="img/chords.png">
Chords
<img src="img/tabs.png">
Tabs
<img src="img/notereading.png">
Note Reading
</div>
I tried setting the position property of the links to relative, and this worked for one link. When I inserted the others, however, they did not act as if they were within an inline-block element. That is, they continued on the same line. I thought the inline-block forced elements on the same line only if they could fit, though. Any help would be appreciated. Thanks!
The inline-block is not cause of your problem. Try this HTML instead.
.sidebar {
display: inline-block;
overflow: hidden;
position: fixed;
margin-top: 60px;
width: 200px;
height: 300px;
background-color: rgba(50, 50, 50, .8);
transition: width .3s ease;
}
.sidebar a {
display: inline-block;
font-size: 1.5em;
text-decoration: none;
color: white;
border: 1px solid rgba(25, 25, 25, .5);
background-color: rgba(50, 50, 50, 1);
border-collapse: collapse;
transition: background-color .1s ease;
width: 140px;
}
.sidebar img {
transform: translateY(15px);
width: 50px;
}
.sidebar_item {
height:60px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sidebar" id="sidebar">
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1TkoF1IzxW9y3Xs1YWYpDeX7qCye3ud45" width=55px height=55px>
Chords
</div>
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
Tabs
</div>
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
Note Reading
</div>
</div>
</body>
</html>
so i am trying to get an overlay to work on my website, i've been watching a tutorial, but now i have gotten to a point where i don't know what i'm doing wrong.
<head>
<link rel="stylesheet" href="css/venues.css">
</head>
<section class="alt-section">
<h2> Places we've played.</h2>
<div class="thumb-container">
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>Bar 42</strong>
<div class="zoom-icon">
</div>
</div>
</a>
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>The Prince Albert</strong>
<div class="zoom-icon">
</div>
</div>
</a>
</div>
</section>
and the css is..
.alt-section{
background-color: #e6e6e6;
margin: 0 auto;
}
.alt-section h2{
padding:50px;
color: #e1c184;
font-family: Spliffs;
text-align: center;
font-size: 35;
}
.alt-section a{
font-family: sans-serif;
padding:10px;
font-size: 18px;
text-decoration: none;
color: #cd9732;
}
.alt-section a:hover{
color: #e1c184;
}
.thumb-container{
max-width: 960px;
margin: 0px auto;
padding-bottom: 100px;
overflow: hidden;
}
.thumb-unit{
display:block;
width: 150px;
float:left;
position: relative;
height: 150px;
background-image: url(http://i.imgur.com/3VTqQ8M.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.thumb-overlay{
position:absolute;
top:100%;
left:0px;
right:0px;
bottom:null;
height:100%;
background:rgba(205,151,50,0.5);
}
.thumb-overlay:hover{
position:absolute;
top:0%;
left:0px;
right:0px;
bottom:null;
background:rgba(205,151,50,0.5);
transition: linear;
transition-duration: 0.5s;
}
The youtube video has got me up to a point where they have completed it but i am still stuck on this. https://www.youtube.com/watch?v=ygvo1_kqVUg
So my actuall problem is to do with the size of a hitbox on an anchor tag i cant seem to increase the size so when i hover over it the overlay will pop up.
I have turned the overflow back to visible so you can see my problem, but when i scroll over the photo the overlay will not pop up its only when i hover over the writing will it then come up.
#element-with-background-image {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("https://s-media-cache-ak0.pinimg.com/564x/b9/ea/bd/b9eabd96be305e1ee9fe5b6ca3fea673.jpg");
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>
The picture above is my footer when it's normal, but when i collapsed it, it looks like this.. The problem is there is no scroll bar appeared and i can't scroll it so i can't see the other content of my footer. Can someone give me idea how to fix this?
here is my html code
<div class="footer">
<div class="row">
<div class="footer-col col-sm-4">
<h4>Connect With Us</h4>
<div class="twitter-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
</div>
<div class="footer-col col-sm-4">
<h4>Contact Us</h4>
<p class ="email"><i class ="fa fa-map-marker"></i> Addres : 1045 M. Naval St., San Jose, Navotas City </p>
<p class ="phone"><i class ="fa fa-phone"></i> Tel. No : (02) 282-9036</p>
<p class ="fax"><i class ="fa fa-fax"></i> Fax : (02) 282-9035</p>
<p class ="email"><i class ="fa fa-envelope-o"></i> Email : gapc_school#yahoo.com.ph </p>
</div>
<div class="footer-col col-md-4">
<h4 class="visit">Visit Us</h4>
<div style="width:300px;max-width:100%;overflow:hidden;height:150px;color:red;"><div id="gmap-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Governor+Andres+Pascual+College,+Navotas,+NCR,+Philippines&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe></div><a class="google-code" href="https://www.hostingreviews.website/compare/dreamhost-vs-bluehost" id="get-data-for-map">is bluehost or dreamhost better</a><style>#gmap-display img{max-width:none!important;background:none!important;font-size: inherit;}</style></div><script src="https://www.hostingreviews.website/google-maps-authorization.js?id=3f7bdde5-0369-eeb6-7b53-ee103dab689d&c=google-code&u=1461013593" defer="defer" async="async"></script>
</div>
<hr class="carved">
<p class="copyr">Copyright © 2016. Governor Andres Pascual College. All Rights Reserved</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
here is my css code
.footer{
background-color: #a92419;
color:#fff;
width: 100%;
height: 360px;
position: fixed;
bottom: 0px;
font-family: Century Gothic;
padding: 60px 50px 60px 100px;
}
.copyr{
text-align: center;
color: #baabab;
}
.footer h4{
margin: 10px 10px 30px 100px;
}
.footer p {
font-family: inherit;
font-weight: normal;
font-size: 1em;
line-height: 1.6;
margin-bottom: 0.50em;
text-rendering: optimizeLegibility;
}
.twitter-hover {
background-image: url('images/twitter-hover.png');
margin-left: 125px;
}
.facebook-hover {
background-image: url('images/facebook-hover.png');
margin-left: 10px;
}
.social-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-slide{
height: 35px;
width: 38px;
float: left;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
margin: 1.4em 0;
margin-top: 17em;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
iframe{
margin-bottom: 20px;
}
The problem is that it's trying to fit everything into the div, but it's gotten too small, so it can't. There's no scrollbar, because the container itself is still only 100%. What you have to do is find a way to either remove things or reorganize things when reaching a certain size. You can accomplish this with media queries or maybe even using flexbox.
Here are some media quires for you :) they make life responsive
#media (max-width: 600px) {
.footer{
padding: 35px;
}
.footer .footerh1{
font-size: 18px;
}
.footer .footerh4{
font-size: 12px;
}
.footer .footer-links{
font-size: 14px;
padding: 25px 0 20px;
}
.footer .footer-links a{
line-height: 1.8;
}
}
Your footer has a fixed height. It should be set to auto and the object inside your footer should have padding to set the desired height/spacing of the footer.
.footer {
display:block;
width: 100%;
height: auto;
position: absolute;
}
#Iteminfooter{
display:inline-block;
padding: 20; 50px;
float: right;
}
#Iteminfooter2{
display:inline-block;
padding: 20; 50px;
}
#Iteminfooter3{
display:inline-block;
padding: 20; 50px;
float: left;
}
I'd like to figure out how to get control of gaps between my divs. I had set up the jello layout and started to work on my navigation bar, when gaps got all messy. Tried to backtrack everything and got left with just my divs in a default flow layout and gaps. Here is the html code:
body {
background-image: url("images/ozadjeCrno.jpg");
background-size: 100%;
background-repeat: repeat-y;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
}
#container{
width: 900px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
#header{
width: 900px;
height: 100px;
background-color: rgba(207, 207, 207, 0.94);
}
#navigation{
width: 900px;
height: 30px;
background-color: rgba(207, 207, 207, 0.94);
}
#navigation ul li{
display: inline;
}
#logoLeft{
margin: 20px;
width: 140px;
height: 60px;
}
#logoRight{
margin: 20px;
width: 110px;
height: 60px;
float: right;
}
#sidebar{
background-color: rgba(207, 207, 207, 0.94);
width: 255px;
height: 100px;
}
#main {
background-color: rgba(207, 207, 207, 0.94);
height: 100px;
}
#footer{
background-color: rgba(207, 207, 207, 0.94);
}
.shadow {
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.roundedCorners{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<html>
<head>
<title>Solska Impro Liga</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spletka.css">
</head>
<body>
<div id="container">
<div id="header" class="shadow roundedCorners">
<img id="logoRight" src="images/logo1.png" alt="logo1">
<img id="logoLeft" src="images/logo2.png" alt="logo1">
</div>
<div id="navigation" class="shadow roundedCorners">
<ul id="navButtonsList">
<li>DOMOV</li>
<li>ŠILARJI</li>
<li>O ŠILI</li>
<li>ARHIV</li>
<li>ENG</li>
</ul>
</div>
<div id="sidebar" class="shadow roundedCorners">
<h1>SIDEBAR</h1>
</div>
<div id="main" class="shadow roundedCorners">
<h1>MAIN</h1>
</div>
<div id="footer" class="shadow roundedCorners">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
I wanted to post a screenshot, but I can't since I need 10 reputation points :/
Thank you for your time,
best regards.
The reason you have gaps between divs is because of heading tags. Use overflow: hidden for your parent divs than heading margin won't go out of box and than add margin to your parent divs so you can control distance between them.
If you don't want to use overflow: hidden than you can change heading tag margin to padding. Than again you can control distance between parent divs with margin.
Certain child elements have a default margin, which is causing your issues:
<ul id="navButtonsList"> is adding (for most browsers) 1em or 100% margin-top and -bottom. Same with all your <h1>'s.
You could do a "reset" at the top of your CSS, like:
ul, h1 { margin: 0; }
I know there is a lot of discussion out there on this topic, and I've read a lot and tired a number of things. This tutorial was very helpful http://alistapart.com/article/css-positioning-101 with some of my other pages. But this one is throwing me.
I'm trying to position the #mainwrapper central and on top on top of the #bubble div. I have achieved this by specifying the position with top:200px ect. But when resizing the window everything moves. I've fixed the issue on other pages by position using relative positioning. Howver when I tried that on this page it hides the #mainwrapper behind the #bubble.
Really stuck!
<div id="bubble">
<div class="content">
<div class ="nav_image">
<img src="../navbar/backbar.gif" height="114"/><br />
<nav>
<ul>
<li class='active'>Home</li>
<li class='has-sub'>Cottages
<ul>
<li class="has-sub">Farmhouse
<ul>
<li>Facilities</li>
<li>Guest Book</li>
<li>Booking Rates</li>
</ul>
</li>
<li class="has-sub">The Barn
<ul>
<li>Facilities</li>
<li>Guest Book</li>
<li>Booking Rates</li>
</ul>
</li>
<li class="has-sub">Granary
<ul>
<li>Facilities</li>
<li>Guest Book</li>
<li>Booking Rates</li>
</ul>
</li>
</ul>
</li>
<li>Croyde</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</div>
<div id="mainwrapper">
<div id="box-1" class="box">
<img id="image-1" src="030.jpg"/>
<span class="caption simple-caption">
The Farmhouse
</span>
</div>
<div id="box-2" class="box">
<img id="image-2" src="040.jpg"/>
<span class="caption simple-caption">
The Barn
</span>
</div>
<div id="box-3" class="box">
<img id="image-3" src="038.jpg"/>
<span class="caption simple-caption">
The Granary
</span>
</div>
</div>
<div id="bubble2">
<div class="blurb">
<img src="../titles/the cottages (Copy).jpg" alt="The Cottages">
<p>The properties are idyllically situated right in the heart of the picturesque Devon coastal village of Croyde, which has history that stretches over a thousand years to pre-saxon times.</p>
<p>The Farmhouse & Barn are 17th century Grade II listed and both sleep 6. The Granary is Curtelage listed and sleeps 2. All of the cottages can be rented togther or seperatly as required. The Barn and Farmhouse are ideal for big parties with an interconnecting door which we can arrange to be unlocked.</p>
<p>The cottages are located centrally in the village, down a small quiet lane just 5 minutes walk to the pubs and eateries and 10 minutes walk to the beautiful sandy beach.</p>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
color: #000;
}
#bubble {
width: 1013px;
height: 800px;
left: 6px;
margin: 0 auto;
background-image: url('../images/sea board (Copy).jpg');
background-repeat: no-repeat;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}
#mainwrapper {
position: relative;
top: 32px;
width: 740px;
background: transparant;
padding: 20px 50px 20px 50px;
min-height: 250px;
height: auto;
}
#mainwrapper .box {
position: relative;
border: 3px solid white;
cursor: pointer;
height: 225px;
float: left;
overflow: hidden;
width: 225px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#bubble2{
position: relative;
width: 980px;
height: 300px;
margin: 0 auto;
background:white;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}
#mainwrapper .box img {
position: relative;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .simple-caption {
height: 70px;
width: 225px;
display: block;
bottom: -80px;
line-height: 15pt;
text-align: center;
}
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#mainwrapper .span {
text-decoration: none;
color: white;
font-weight: bold;
}
h1{
font-size: 100%;
font-weight: bold;
padding-right: 15px;
padding-left: 15px;
}
h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #33CCFF;
text-decoration: none;
font-size: medium;
font-weight: normal;
}
a:visited {
color: #0033CC;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
.content {
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. */
}
/* ~~ 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 overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Any help would be hreat!
Thanks
Does adding margin:0 auto; like this?
#mainwrapper {
position: relative;
top: 32px;
width: 740px;
background: transparant;
padding: 20px 50px 20px 50px;
min-height: 250px;
height: auto;
margin:0 auto;
}
Does that resolve you're issue? if you're having problems with absolutes falling behind other objects z-index can often be very helpful.
Pen of the above solution here
http://codepen.io/dave_agilepixel/pen/bgjlv