This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 5 years ago.
I am a relatively new self taught front-end developer. I have this problem with the top margin on my documents. It remains a margin on top.
Usually I have been using the * selector, and it leaves no margin what so ever on every element. But I have been told that is not a good way of doing it, and you don't want to remove all margin and padding from every element(?).
So I have tried to use the body selector, and gave that margin: 0; and padding: 0; but still it's this margin on top. What is the "right" way of doing this?
Followed under is my html and css.
#import url('https://fonts.googleapis.com/css?family=Work+Sans:500');
body {
padding: 0;
margin: 0;
}
header {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<header id="top">
<h1>My Website</h1>
<nav>
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="about">
<h2>Semi heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h2>Semi Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</body>
</html>
The cause is a phenomenon called "collapsing margins": Whatever element is first inside the body, its margin-top will "collapse" (=unite) with the body margin-top. So, in your case, that's the first h1 element (its default margin defined by the browser stylesheet), whose margin-top extends the body, creating a maring-top for the body.
You can apply this to avoid this phenomenon:
h1:first-of-type {
margin-top: 0;
}
Note: Usually, that h1 would be inside a header or something similar, which usually would be a DIV, with padding etc. So you wouldn't have to apply this, because the container of that h1probably wouldn't have a margin-top and the h1 wouldn't be placed at the very top of the header.
#import url('https://fonts.googleapis.com/css?family=Work+Sans:500');
body {
padding: 0;
margin: 0;
}
header {
background-color: red;
}
h1:first-of-type {
margin-top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<header id="top">
<h1>My Website</h1>
<nav>
<ul>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="about">
<h2>Semi heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h2>Semi Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</body>
</html>
Related
What I want is relatively simple. I wanted to know how I get get the H1 elements on this page centered ABOVE the paragraph elements in the middle. I'm having a ton of trouble here and need some assistance with how I can work this out in flexbox.
Thanks, here's my code
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="flex.css">
</head>
<body>
</div>
<div class="parent">
<div class="col1">
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div class="col2">
<h1>Heading 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum
</p>
</div>
</div>
</body>
</html>
Here's my CSS
.parent, .col1, .col2 {
display: flex;
flex-flow row wrap;
}
h1 {
align-self:center;
}
You dont have to use flex property in .col1, .col2 making them flex you expect the item inside eg h1 and p to also align as flex items. So remove the display:flex form .col1, .col2 and set text-align in h1
.parent {
display: flex;
flex-flow row wrap;
}
h1 {
text-align:center;
}
<body>
</div>
<div class="parent">
<div class="col1">
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum
</p>
</div>
<div class="col2">
<h1>Heading 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum
</p>
</div>
</div>
</body>
Add justify-content: center; to col1 and col2 divs
Just a small adjustment that you need to make, instead of using the align-self: center styling, use the text-align: center property since that aligns the text to be centered instead of the box itself. Also in flexbox only the parent needs to have the display: flex; property, not the columns. Replace the styling you provided in your question with this one and it should work as expected. Please let me know if that answered your question. You also had an extra tag below the opening body tag which did not have an opening div tag and should be removed.
https://codepen.io/Katercode/pen/BxOWvw
.parent {
display: flex;
flex-flow: row wrap;
}
h1 {
text-align: center;
}
I can't seem to get z-index working properly. There are a lot of StackOverflow questions about this, but in most of them, the issue is that position is not set. I have set position, yet I still cannot get it to work. I would like the box with the text to be on top of the grey bar.
Any guidance would be appreciated.
https://jsfiddle.net/8sfz5wrj/1/
.pictures{
height: 45vh;
background-color: gray;
position: relative;
z-index: 0;
}
.main{
margin-top: -30vh !important;
flex-shrink: 0;
position: relative;
z-index: 100;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
<link rel="stylesheet" href="/personal-site-page.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="mdl-layout">
<div class="pictures"></div>
<div class="mdl-layout__content">
<div class="main mdl-grid">
<div class="mdl-cell mdl-cell--2-col"></div>
<div class="mdl-cell mdl-cell--8-col mdl-shadow--4dp">
<h3>Title</h3>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
</p>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
</p>
</div>
</div>
</div>
</div>
</body>
z-index with position: relative work best with elements next to each other
You then need to set the z-index on the most parent div of your text (the one with mdi-layout__content class in this case), which is next to the pictures div
.pictures {
height: 45vh;
background-color: gray;
position: relative;
z-index: 0;
}
.mdl-layout__content {
margin-top: -30vh !important;
flex-shrink: 0;
position: relative;
z-index: 100;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
<link rel="stylesheet" href="/personal-site-page.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="mdl-layout">
<div class="pictures"></div>
<div class="mdl-layout__content">
<div class="main mdl-grid">
<div class="mdl-cell mdl-cell--2-col"></div>
<div class="mdl-cell mdl-cell--8-col mdl-shadow--4dp">
<h3>Title</h3>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
</p>
<p>
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
</p>
</div>
</div>
</div>
</div>
</body>
The div that contains the content that you want to overlay has its overflow-x and overflow-y properties set to hidden and auto, respectively. These styles are coming from the material CSS file you are using.
The fix is to override these rules so that the content that overflows the container is visible. We set overflow-x and overflow-y to visible:
.overflow-fix.mdl-layout__content {
overflow-x: visible;
overflow-y: visible;
}
Note I also added an overflow-fix class to the div so that this fix is opt-in.
See updated JSFiddle here.
I'd like to display an image on the right side of a text with a caption. The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>figure example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<figure class="is-pulled-right">
<img src="https://bulma.io/images/placeholders/128x128.png"
width="128" height="128" alt="Example">
<figcaption>
<small>Long Text. Longer than the image is wide. Lorem ipsum dolor
sit amet.</small>
</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</section>
</body>
</html>
The result:
Because the text of the caption is long the image gets a lot of real estate. How can I wrap the text of the caption so that is doesn't take more width than the image? I want the image to be on the right side of the text.
BTW: Is <figure class="is-pulled-right"> the right way of tackling this problem? columns work but obviously don't let the text flow around the <figure> element.
Try this. I have added css for this.
.is-pulled-right {
margin-left: 4%;
width: 128px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>figure example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<figure class="is-pulled-right">
<img src="https://bulma.io/images/placeholders/128x128.png"
width="128" height="128" alt="Example">
<figcaption>
<small>Long Text. Longer than the image is wide. Lorem ipsum dolor
sit amet.</small>
</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</section>
</body>
</html>
My code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html,body {margin: 0;padding: 0;box-sizing: border-box;}
html{
height: 100%;
}
body{
height: 100%;
}
.app {
height: 100%;
}
.page {
height: 100%;
background: linear-gradient(to bottom, #c2e59c , #64b3f4);
position: relative;
}
.chat {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: scroll;
}
p{
padding: 155px 5px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="app">
<div class="page">
<div class="chat">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>
This is a simple full page chat box. It looks good. Just one problem, it can not scroll well on mobile, it stops scrolling when you untouch, it doesn't have continuity like it should.
Any idea why is that?
live demo for mobile test: http://demo.thatilike.com
note: you won't see the problem on chrome mobile mode, it needs to be tested on real mobile
Add -webkit-overflow-scrolling: touch; to the scrollable element. This will add momentum scrolling to the element on touch devices. But be sure to leave overflow-y: scroll for desktop.
I need to create a page that has quotes side-by-side for a large number of rows.I am looking for a clean CSS2 presentation where the quotes of each row line up vertically and don't run below each other.Also, I am looking for a solution with the least amount of code and preferably one that doesn't float DIVs and does utilize the display attribute.
Re: the code below, my thinking is to contain each quote in its own DIV (in hopes to have the quotes of one row display side-by-side) and have the DIVs of one row be contained by a parent DIV (in hopes of having the quotes in the next row line up vertically). shred the code apart.Start a new.Do whatever you need to let me know where I'm going wrong.
<html>
<head>
<style type="text/css">
body
{
font-family:Verdana;
font-size:11px;
}
div#mainContainer
{
width:570px;
}
div#mainContainer div.subContainer
{
margin:30px;
}
div#mainContainer div.subContainer div
{
vertical-align:top;
width:285px;
}
div#mainContainer div.subContainer div.contentLeft
{
float:left;
margin-right:45px;
}
div#mainContainer div.subContainer div.contentRight
{
display:inline;
}
</style>
</head>
<body>
<div id="mainContainer">
<h1>Title</h1>
<div class="subContainer">
<div class="contentLeft">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."
<p>Bill, New York</p>
</div>
<div class="contentRight">
"Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation."
<p>Fred, Detroit</p>
</div>
</div>
<div class="subContainer">
<div class="contentLeft">
"Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint."
<p>Sarah, Seattle</p>
</div>
<div class="contentRight">
"Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."
<p>Phil, Austin</p>
</div>
</div>
<div class="subContainer">
<div class="contentLeft">
"Labore et dolore magna aliqua. Ut enim ad."
<p>Jon, Petrolia</p>
</div>
<div class="contentRight">
"Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."
<p>Chris, Burlington</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
body {
font-family:Verdana;
font-size:11px;
}
#mainContainer {
width: 600px;
}
.quoteBox {
width: 300px; /* Half the width of the mainContainer to ensure there is always space to exactly TWO quotes on each row */
float: left;
}
.clearer {
height: 0;
font-size: 0;
clear: both; /* Clear the line to ensure no quotes end up partly below another one. Follow the pattern: Two quotes, clear, two quotes, clear etc... */
}
blockquote,cite { margin: 12px }
</style>
</head>
<body>
<div id="mainContainer">
<h1>Title</h1>
<div class="quoteBox">
<blockquote>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote>
<cite>Bill, New York</cite>
</div>
<div class="quoteBox">
<blockquote>"Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." </blockquote>
<cite>Fred, Detroit</cite>
</div>
<div class="clearer"> </div>
<div class="quoteBox">
<blockquote>"Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint."</blockquote>
<cite>Sarah, Seattle</cite>
</div>
<div class="quoteBox">
<blockquote>"Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."</blockquote>
<cite>Phil, Austin</cite>
</div>
<div class="clearer"> </div>
<div class="quoteBox">
<blockquote>"Labore et dolore magna aliqua. Ut enim ad."</blockquote>
<cite>Jon, Petrolia</cite>
</div>
<div class="quoteBox">
<blockquote>"Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."</blockquote>
<cite>Chris, Burlington</cite>
</div>
</div>
</body>
</html>
Like this, for example? Reduced the number of excess DIV-elements a bit, plus cleaned the CSS a little. Looks cleaner, and should work the way you described your problem.
blockquote and cite-elements used to add semantic meanings to the document.
without deviating much from your original elements (although the suggestion that you add semantic meaning to inner elements is good), I got success by replace your element with this:
body
{
font-family: Verdana;
font-size: 11px;
}
div#mainContainer
{
width: 645px;
}
div.subContainer
{
margin: 30px;
}
div.subContainer div
{
vertical-align: top;
float: left;
width: 285px;
}
div.contentLeft
{
margin-right: 45px;
}
Note that your calculations on widths were too low. I tested this with IE8, not FF, but it should work. If you are using IE8, there's a new very powerful Developer Toolbar built in, which includes a Layout pane that shows effective Offset, Margin, Border, and Padding values on all sides of an element.