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.
Related
[Output Image I'm getting
.featuress{
width:70%;
margin-left:20%;
display: flex;
align-items: center;
padding-bottom:30px;
}
.logo{
min-width: 60px;
margin:10px;
text-align:center;
}
.text{
display: inline-block;
background-color: #ffa600;
}
body, h2, p {
margin:0;
}
.featuress{
width:70%;
margin-left:20%;
display: flex;
align-items: center;
padding-bottom:30px;
}
.logo{
min-width: 60px;
margin:10px;
text-align:center;
}
.text{
display: inline-block;
background-color: #ffa600;
}
body, h2, p {
margin:0;
}
<div class="featuress">
<section id="features">
<div class="premium">
<div class="logo1">
<img class="logo" src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40" alt="premium" />
</div>
<div class="text text1">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="shipping">
<div class="logo2">
<img class="logo" src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" alt="shipping" width="60" />
</div>
<div class="text text2">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="quality">
<div class="logo3">
<img class="logo loggo3" src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" alt="quality" width="60"/>
</div>
<div class="text text3">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
][1]Intended Output Style
<div class="featuress">
<section id="features">
<div class="premium">
<div class="logo1">
<img class="logo" src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40" alt="premium" />
</div>
<div class="text text1">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="shipping">
<div class="logo2">
<img class="logo" src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" alt="shipping" width="60" />
</div>
<div class="text text2">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="quality">
<div class="logo3">
<img class="logo loggo3" src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" alt="quality" width="60" />
</div>
<div class="text text3">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
This is the HTML bit of the code I tried writing and the intended format I was looking for is attached along. I just cant quite get it the way its shown. It'd be really helpful if I could be helped with how to align and style just this part of the site using CSS
You can use display:flex and align-items:center on your features. I added some style to fit a little bit like your screen.
body, h2, p {
margin:0;
}
.feature {
display:flex;
align-items: center;
padding-bottom:30px;
}
.logo{
min-width: 60px;
margin:10px;
text-align:center;
}
<div class="feature">
<div class="logo">
<img src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40"/>
</div>
<div>
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="feature">
<div class="logo">
<img src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" width="60" />
</div>
<div>
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="feature">
<div class="logo">
<img src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" width="60" />
</div>
<div>
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
EDIT
Here is an exemple of what to select with display:flex, take a look at Flexbox (MDN).
.container{
border:1px solid black;
}
.d-flex{
display:flex;
}
.orange{
background-color:orange;
}
.green{
background-color:green;
}
.pink{
background-color:pink;
}
<div class="d-flex container">
<div class="box-container orange">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
<div class="box-container green">
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
</div>
<div class="d-flex box-container pink">
<div class="box">G</div>
<div class="box">H</div>
<div class="box">I</div>
</div>
</div>
Expected output image illustration:
html, body
{
max-width: 100vw;
max-height: 100vh;
}
html *
{
font-family: Arial !important;
}
.cand1
{
width: 50%;
float:left;
}
.cand2
{
width:50%;
float: right;
}
.prof1,.prof2
{
margin:0;
margin-top: 40;
text-align: center;
}
.name
{
font-weight: bold;
}
.post
{
font-weight: bolder;
}
.card
{
background: rgb(230, 230, 230);
}
h4
{
background: rgb(230, 230, 230);
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Current output image:
I am trying to implement a card like style with html and css.
the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.
also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section {
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
}
section h4 {
margin: 0 0 10px 0;
}
.card-wrapper {
display: flex;
justify-content: space-around;
}
.card--text {
text-align: center;
}
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>
imageI have a block of images but they are not connected to one another, I need to remove the spaces and make them looked attached. I have tried the following but doesn't work
img {
border: 0 none;
box-shadow: none;
padding:0px;
float: left;
display:block;
float:left;
line-height:0;
}
This is my html
<div class="col-xs-4 col-md-3 ">
<div class="hovereffect">
<img src="images/plasma.jpg" alt="Plasma" id="space">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
</div>
Please see the image where the problem is.
.test{
display:flex
}
<div class="test">
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
</div>
is it something like this you are looking for?
I did this with flexbox you just give the parent of the images display:flex;
if you not want them one next to each other you can do it this way
.test{
display:flex;
flex-direction:column
}
.hovereffect{
display:flex;
}
<div class="test">
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
</div>
Please try this:
img {
border: 0 none;
box-shadow: none;
padding:0px;
float: left;
display:block;
margin:0;
line-height:0;
}
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;
}
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.