sorry for the probably dumb question...
My footer div is being placed behind the divs recentWinnersContainer and recentWinnersMapContainer, even though it should be underneath them.
Here is my jsFiddle and code.
http://jsfiddle.net/gjtd8tw7/
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="mainContainer">
<div id="navContainer">
<div id="logoImgContainer">
<img src="logo.png">
</div>
<p id="navLinks">Prizes Winners FAQ Contact Us</p>
</div>
<div id="slideShowContainer">
<img src="slide1.jpg">
</div>
<div id="offersContainer">
<div class="offersArrowImg">
<img src="leftOffersArrow.jpg">
</div>
<div class="offerContainer">
<img class="offerImg" src="offer1.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer2.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer3.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer4.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offersArrowImg">
<img src="rightOffersArrow.jpg">
</div>
</div>
<div id="recentWinnersHeadlineContainer">
<p id="recentWinnersHeadline">Recent Winners</p>
</div>
<div id="recentWinnersContainer">
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
</div>
<div id="recentWinnersMapContainer">
Map
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
CSS
* {
margin:0px;
padding:0px;
}
#mainContainer {
width:1000px;
margin:0 auto 0 auto;
}
#navContainer {
width:1000px;
height:75px;
background-color:#3299bb;
}
#logoImgContainer {
float:left;
margin:13px 0px 0px 20px;
}
#navLinks {
float:right;
margin: 15px 20px 0 0;
font-family: 'Roboto Slab', serif;
font-size:30px;
color:#ffffff;
}
#slideShowContainer {
width:1000px;
height:380px;
background-color:#000000;
}
#offersContainer {
width:1000px;
height:188px;
background-color:blue;
}
.offerContainer {
width:227px;
height:188px;
float:left;
background-color:red;
}
#offerImg {
width:227px;
height:146px;
}
.offersArrowImg {
float:left;
}
#recentWinnersHeadlineContainer {
width:1000px;
height:60px;
background-color:#ff9900;
}
#recentWinnersContainer {
width:495px;
height:320px;
float:left;
margin-right:10px;
background-color:yellow;
}
#recentWinnersHeadline {
}
.recentWinnerContainer {
height:50px;
}
.recentWinnerImg {
display:inline-block;
}
.recentWinnerName {
display:inline-block;
}
.recentWinnerPrizeName {
display:inline-block;
}
#recentWinnersMapContainer {
width:495px;
height:320px;
float:left;
background-color:green;
}
#footer {
width:1000px;
height:60px;
background-color:grey;
}
Change the #footer in your css file to this:
#footer {
width:1000px;
height:60px;
background-color:grey;
<!-- I ADDED THESE TWO LINES TO YOUR #FOOTER SELECTOR -->
position: fixed;
bottom: 0;
}
Related
I am trying to stack 2 column rows with and image in one of the columns and text in the other alternating for each different row. I have not been able to get my pictures to fill the container they are in. I am also unable to make them the same size (I have been able to make the top picture fill its container).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ESQ_Main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>ESQ BUILDS:RESIDENTIAL</title>
</head>
<body>
<div class="menu">
<div class="container">
<div class="row">
<div class = "col-md-2">
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Home</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">About</a>
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Services</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">Conact Us</a>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="header_r">
<div class="container-fluid">
<div class="head">
<h1>
RESIDENTIAL
</h1>
</div>
</div>
</div>
<div class="label">
<div class="container">
<h2>
Open Projects
</h2>
</div>
</div>
<div class="project">
<div class = "container-fluid">
<div class="row">
<div class="col-md-6 col-xs-9">
<h3>
Nantucket
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
<div class="col-md-6 col-xs-9">
<img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg">
</div>
</div>
</div>
</div>
<div class="project">
<div class = "container">
<div class="row">
<div class="col-md-6 col-xs-9">
<img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg">
</div>
<div class="col-md-6 col-xs-9">
<h3>
Nantucket
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
</div>
</div>
</div>
<div class="label">
<div class="container">
<h2>
Past Projects
</h2>
</div>
</div>
<div class="project">
<div class = "container">
<div class="row">
<div class="col-md-6 col-xs-9">
<h3>
PAST PROJECT
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
<div class="col-md-6 col-xs-9">
<img class="img- responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
html,body{
margin:0;
background-color:#CDB389;
}
/*This code is for a different html page. Look under the
Residential heading at the bottom of this code*/
/*HOME HOME HOME HOME HOME HOME HOME HOME HOME*/
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:#CDB389;
text-align:center;
margin-bottom:0px;
padding-top:-3px;
}
.menu .row{
padding-top:5px;
padding-bottom:10px;
}
.menu .btn{
color:black;
font-size:20px;
font-weight:900;
}
/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder- houston2.jpg");
background-size:cover;
margin-top:-2px;
margin-bottom:-10px;
}
/*LABEL*/
.label{
margin-top:-5px;
background-color:#CDB389;
}
.label h2{
letter-spacing:15px;
font-size:60px;
text-decoration:uppercase;
font-family:cursive;
color:black;
}
/*Services*/
#extend{
padding-bottom:50px;
}
/*FOOTER*/
/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{
}
/*RESIDENTIAL RESIDENTIAL RESIDENTIAL RESIDENTIAL*/
.head {
text-align:center;
}
.project .row {
width:100%;
}
.project img {
min-height:300px;
min-width:400px;
}
html,body{
margin:0;
background-color:#CDB389;
}
/*This code is for a different html page. Look under the
Residential heading at the bottom of this code*/
/*HOME HOME HOME HOME HOME HOME HOME HOME HOME*/
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:#CDB389;
text-align:center;
margin-bottom:0px;
padding-top:-3px;
}
.menu .row{
padding-top:5px;
padding-bottom:10px;
}
.menu .btn{
color:black;
font-size:20px;
font-weight:900;
}
/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder-houston2.jpg");
background-size:cover;
margin-top:-2px;
margin-bottom:-10px;
}
/*LABEL*/
.label{
margin-top:-5px;
background-color:#CDB389;
}
.label h2{
letter-spacing:15px;
font-size:60px;
text-decoration:uppercase;
font-family:cursive;
color:black;
}
/*Services*/
#extend{
padding-bottom:50px;
}
/*FOOTER*/
/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{
}
/*RESIDENTIAL RESIDENTIAL RESIDENTIAL RESIDENTIAL*/
.head {
text-align:center;
}
.project .row {
width:100%;
}
.project img {
min-height:300px;
min-width:400px;
}
You could wrap the images in a div with the overflow:hidden; and set the width:100%; height:auto;
Alternatively you could set your images to be the background image and set them to background-size:cover; this will be responsive.
I figured it out! So, I added the class:
size{
max-width:500px
height:auto;
}
Then I wrapped each of my images in a link and added the img-responsive class to the image.
<div class="col-md-6 col-xs-9">
<a class"size" href="https://www.google.com/">
<img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg"/>
</a>
</div>
This gives me the full image on one side of the screen and allows room for text on the other side. It also keeps the image within the width of the screen. Additionally, it stacks relatively nicely when the screen is shrunk (the stack could be a bit more even/centered). Still have to check mobile responsiveness.
I am so happy.
I tried to use property overflow-x:scroll in css property but it does not work at all but overflow-y:scroll works in the same div. I want to use overflow for scrolling images horizontally in one specific div.
Heres my code:
html:
<div class="inner-images">
<div class="imageHolder">
<img src="images/interior2.png">
</div>
</div>
<div class="inner-images">
<div class="imageHolder">
<img src="images/house.png">
</div>
</div>
<div class="inner-images">
<div class="imageHolder">
<img src="images/house.png">
</div>
</div>
<div class="inner-images">
<div class="imageHolder">
<img src="images/house.png">
</div>
</div>
<div class="inner-images">
<div class="imageHolder">
<img src="images/house.png">
</div>
</div>
<div class="inner-images">
<div class="imageHolder">
<img src="images/house.png">
</div>
</div>
<div class="inner-images">
<div class="imageHolder">
<img src="images/house.png">
</div>
</div>
<div class="inner-images">
<div class="imageHolder">
<img src="images/house.png">
</div>
</div>
</div>
css:
.int-images{
height:85px;
overflow:scroll;
.inner-images{
padding:0px 32px;
.imageHolder{
img{
height:85px;
width:85px;
#include box-shadow(0px 1px 4px rgba(0,0,0,0.5));
display:block;
float:left;
margin-right:15px;
}
}
}
}
How about this?
.int-images {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
.inner-images {
display: inline-block;
padding:0px 32px;
margin-right:15px;
.imageHolder {
img{
height: 85px;
width: 85px;
#include box-shadow(0px 1px 4px rgba(0,0,0,0.5));
}
}
}
}
fiddle
Try this
.int-images{
overflow:scroll;
white-space:nowrap;
}
.imageHolder img{
height:85px;
width:85px;
#include box-shadow(0px 1px 4px rgba(0,0,0,0.5));
display:inline-block;
margin-right:15px;
}
<!-- language: lang-html -->
<div class="int-images">
<div class="inner-images">
<div class="imageHolder">
<img src="images/interior1.png">
<img src="images/interior2.png">
<img src="images/house.png">
<img src="images/house.png">
<img src="images/house.png">
<img src="images/house.png">
<img src="images/house.png">
<img src="images/house.png">
<img src="images/house.png">
</div>
</div>
</div>
<!-- end snippet -->
So I'm trying to create a div that displays and image and has a title of the image at the bottom. The image should be have enough room so that it isn't stretched and look weird.Then I want to take that div and reproduce it over and over for as many images as I have.
I drew and image of what I'm trying! to describe I hope you guys and understand it.
This is the code I have so far. I know its not a lot but I'm a little lost.
.box{
height:250px;
width:200px;
margin-top:10px;
margin-right:15px;
margin-left:15px;
margin-bottom:10px;
float:left;
background-color:yellow;
}
.photo-div{
height:50px;
width:50px;
background-color:blue;
}
.title-wrap{
height:40px;
width: 200px;
background:pink;
}
<div class="box">
<div class="photo-div">
</div>
<div class="title-wrap">
</div>
</div>
Looking for something like this?
.box{
height:250px;
width:200px;
margin-top:10px;
margin-right:15px;
margin-left:15px;
margin-bottom:10px;
float:left;
background-color:yellow;
}
.row{
height:70px;
width:200px;
display: inline;
}
.column{
height:70px;
width:50px;
display: inline;
float:left;
}
.photo-div{
height:50px;
width:50px;
background-color:blue;
}
.title-wrap{
height:20px;
width: 50px;
background:pink;
text-align: center;
}
<div class="box">
<div class="row">
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
<div class="column">
<div class="photo-div">
<img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>
</div>
<div class="title-wrap">IMG</div>
</div>
</div>
</div>
try this
http://jsfiddle.net/jtx16Lf2/7/
<div id="main">
<div id="box">
<script>
for(var i=0;i<3;i++){
var image = document.createElement('div');
var titleBar = document.createElement('div');
image.className = "photo-div";
titleBar.className = "title-wrap";
document.getElementById('box').appendChild(image);
document.getElementById('box').appendChild(titleBar);
}
</script>
</div>
</div>
CSS
#box{
height:750px;
width:200px;
margin-top:10px;
margin-right:15px;
margin-left:15px;
margin-bottom:10px;
float:left;
background-color:yellow;
position:relative;
}
.photo-div{
height:50px;
width:50px;
background-color:blue;
margin-left:35%;
margin-top:20%;
float:left;
position:relative;
}
.title-wrap{
height:40px;
width: 200px;
background:pink;
margin-top:105%;
position:relative;
}
was working on a websites design and for some reason, there is a linebreak between 2 divs that really shouldn't exist. Here is the JSFiddle http://jsfiddle.net/d593fdea/
I know the design is ugly right now, but ignore most of it. My question only has to do with the gap between the div offersContainer and recentWinnersHeadlineContainer.
It is really bugging me because that gap shouldn't exist and I have no clue why it does. Any help would be greatly appreciated, thank you!
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="mainContainer">
<div id="navContainer">
<div id="logoImgContainer"><img src="logo.png"></div>
<p id="navLinks">Prizes Winners FAQ Contact Us</p>
</div>
<div id="slideShowContainer">
<img src="slide1.jpg">
</div>
<div id="offersContainer">
<div class="offersArrowImg">
<img src="leftOffersArrow.jpg">
</div>
<div class="offerContainer">
<img class="offerImg" src="offer1.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer2.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer3.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer4.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offersArrowImg">
<img src="rightOffersArrow.jpg">
</div>
</div>
<div id="recentWinnersHeadlineContainer">
<p id="recentWinnersHeadline">Recent Winners</p>
</div>
<div id="recentWinnersContainer">
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner1.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner2.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner3.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner4.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner5.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
</div>
<div id="recentWinnersMapContainer">
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
#mainContainer {
width:1000px;
margin:0 auto 0 auto;
}
#navContainer {
width:1000px;
height:75px;
background-color:#3299bb;
}
#logoImgContainer {
float:left;
margin:13px 0px 0px 20px;
}
#navLinks {
float:right;
margin: 15px 20px 0 0;
font-family: 'Roboto Slab', serif;
font-size:30px;
color:#ffffff;
}
#slideShowContainer {
width:1000px;
height:380px;
background-color:#000000;
}
#offersContainer {
width:1000px;
height:188px;
background-color:blue;
}
.offerContainer {
width:227px;
height:188px;
float:left;
background-color:red;
}
#offerImg {
width:227px;
height:146px;
}
.offersArrowImg {
float:left;
}
#recentWinnersHeadlineContainer {
width:1000px;
height:60px;
background-color:#ff9900;
}
#recentWinnersContainer {
width:495px;
height:320px;
}
it's the default margin on the p tag, in the future you should either use a reset or just globally clear margin and padding from all elements
#recentWinnersHeadline{
margin: 0;
}
FIDDLE
It's the margin-top property for the contained <p> element.
You need to add this code:
#recentWinnersHeadlineContainer p {
margin-top: 0;
}
Here's your fiddle updated: http://jsfiddle.net/d593fdea/1/
Your problem has already been solved, but this is another problem:
<div id="mainContainer">
<div id="navContainer">
<div id="logoImgContainer"><img src="logo.png"></div>
<p id="navLinks">Prizes Winners FAQ Contact Us</p>
</div>
<div id="slideShowContainer">
<img src="slide1.jpg">
</div>
<div id="offersContainer">
<div class="offersArrowImg">
<img src="leftOffersArrow.jpg">
</div>
<div class="offerContainer">
<img class="offerImg" src="offer1.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer2.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer3.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer4.jpg">
div class="offerBtn">Offer Name</div>
</div>
<div class="offersArrowImg">
<img src="rightOffersArrow.jpg">
</div>
</div>
<div id="recentWinnersHeadlineContainer">
<p id="recentWinnersHeadline">Recent Winners</p>
</div>
<div id="recentWinnersContainer">
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner1.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner2.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner3.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner4.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner5.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
</div>
<div id="recentWinnersMapContainer">
</div>
<div id="footer"></div>
</div>
^Notice that the last closing div tag has no matching opening counterpart. This is very obvious with indenting. It is impossible to see without.
and thanks for the help.
I am having a somewhat confusing issue with IE7 when using margins.
I have a contaner, and inside that container I have some floated boxes.
These boxes have margins applied, top, right, left, bottom, except the first box that has no margin on the left, and the last box that has no margin on the right.
Looks fine in all browsers except IE7, where the margin is not applying for the first element in each row (at least this is what I think is happening.
If I remove margin right in ie7 using the dev tools and then check it back on it displays correctly.
Has anyone seen anything like this before?
I am stumped.
EDIT
It appears to being caused by position:relative on the container divs. Changing this back to static fixes the margin issue, but now means my divs are mis aligned in ie7. Does anyone know why position relative would screw up margins??
NEW EDIT
Example download can be found here:
www.jimplode.co.uk/content/stackoverflow.zip
Incorrect view
Correct Margins, after unchecking and rechecking just one of the margin styles.
The HTML:
<div class="lowerContent">
<div class="mediumContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h1>Car Insurance</h1>
<ul>
<li>Protected NCD for life</li>
<li>NCD Accelerator</li>
<li>European Cover Included</li>
<li>Multiple Drivers and Vehicles</li>
<li>Breakdown Cover Included</li>
<li>Legal Cover Included</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="imageContainer">
<img src="/images/misc/boxphoto_1.jpg" alt="box image 0" />
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginRight contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Home Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_2.jpg" alt="box image 2" />
</div>
<ul>
<li>Working at home Equipment</li>
<li>Helmet and Leathers</li>
<li>Legal Cover</li>
<li>Caravan Cover</li>
<li>Personal Accident Cover</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginBottom">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" />
<div class="textContainer">
<h2>Life Insurance</h2>
<div class="imageContainer">
<img src="/images/misc/boxphoto_3.jpg" alt="box image 3" />
</div>
<ul>
<li>Cover From £5 a month</li>
<li>Your loved ones protected</li>
<li>Immediate cover available</li>
<li>We search, you save</li>
</ul>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_4.jpg" alt="box image 4" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_5.jpg" alt="box image 5" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_6.jpg" alt="box image 6" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft">
<div class="expandableBox">
<div class="topLeft">
<div class="topRight">
<div class="top"></div>
</div>
</div>
<div class="middleLeft">
<div class="middleRight">
<div class="middle">
<img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" />
<div class="imageContainerAlternate">
<img src="/images/misc/boxphoto_7.jpg" alt="box image 7" />
</div>
<div class="boxButtons">
<a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a>
</div>
<div class="emptyClear"></div>
</div>
</div>
</div>
<div class="bottomLeft">
<div class="bottomRight">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
<div class="emptyClear"></div>
</div>
The CSS:
.lowerContent
{
position:relative;
margin:0px 0px 0px 0px;
}
.expandableBox
{
display:block;
width:100%;
}
.expandableBox .top
{
background-image:url("/images/backgrounds/bkg_whitebox_t.png");
background-repeat: repeat-x;
height:10px;
}
.expandableBox .topLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_tl.png");
background-repeat: no-repeat;
background-position:left top;
}
.expandableBox .topRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_tr.png");
background-repeat: no-repeat;
background-position:right top;
}
.expandableBox .middleLeft
{
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_l.png");
background-repeat: repeat-y;
background-position:left top;
}
.expandableBox .middle
{
background-color:#FFFFFF;
}
.expandableBox .middleRight
{
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_r.png");
background-repeat: repeat-y;
background-position:right top;
}
.expandableBox .bottom
{
background-image:url("/images/backgrounds/bkg_whitebox_b.png");
background-repeat: repeat-x;
background-position:bottom;
height:10px;
margin-bottom:7px;
}
.expandableBox .bottomLeft
{
height:10px;
padding:0px 0px 0px 10px;
background-image:url("/images/backgrounds/bkg_whitebox_bl.png");
background-repeat: no-repeat;
background-position:left bottom;
}
.expandableBox .bottomRight
{
height:10px;
padding:0px 10px 0px 0px;
background-image:url("/images/backgrounds/bkg_whitebox_br.png");
background-repeat: no-repeat;
background-position:right bottom;
}
.contentBoxMarginLeft
{
margin-left:10px;
}
.contentBoxMarginRight
{
margin-right:10px;
}
.contentBoxMarginTop
{
margin-top:10px;
}
.contentBoxMarginBottom
{
margin-bottom:10px;
}
.fullContentBox
{
width:940px;
float:left;
}
.largeContentBox
{
width:700px;
float:left;
}
.mediumContentBox
{
width:460px;
float:left;
}
.smallContentBox
{
width:220px;
float:left;
}
.mediumContentBox .textContainer
{
float:left;
width:210px;
}
.mediumContentBox .imageContainer
{
float:right;
width:210px;
}
.smallContentBox .textContainer
{
}
.smallContentBox .textContainer .imageContainer
{
float:right;
padding:5px 0px 0px 0px;
}
.smallContentBox .imageContainerAlternate
{
float:left;
padding:0px 0px 0px 0px;
}
a.smallButtonLeft,
a.smallButtonRight
{
display:inline-block;
background-image:url('/images/backgrounds/bkg_sprites_buttons.png');
height:30px;
background-position:left top;
background-repeat:no-repeat;
padding:0px 10px;
line-height:23px;
color: #0F4DBC;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
text-transform: capitalize;
}
a.smallButtonLeft:hover
{
background-position:left -44px;
}
a.smallButtonRight
{
background-position:right -217px;
color: #4D4F52;
}
a.smallButtonRight:hover
{
background-position:right -262px;
}
.boxButtons
{
float:left;
padding:10px 0px 0px 0px;
}
.smallContentBox .boxButtons
{
width:200px;
text-align:center;
}
Thanks in advance.
Could be something to do with margins collapsing. I would tempted to only have the margin on the left, then margin-left:0 on the first one.
Alternatively, try our old friend "zoom:1" on the floated divs or the parent container. Often fixes a lot of the more obscure IE weirdness.