I'm creating a div(has a background image) that contains 2 divs inside it. The div with the background image disappears when I add a float left to the div's inside.
Please help!
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<body>
<h2>Linear Gradient as Background Image</h2>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1" style="background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg); width:100%; margin-top:50">
<div style="width:55%; padding: 10px; float:left;">
<img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " />
</div>
<div style="width:35%;padding: 10px;float:left;">
<h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;">
Header<br>
<h3 style="color:red; text-align:left;">(Subtitle)</h3>
</h1>
<p style="color:black;">
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>
The element needs a height: In your example the div with the id grad1 has a height of 0px.
<div id="grad1" style="background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg); width:100%; margin-top:50; height:200px">
<div style="width:55%; padding: 10px; float:left;">
https://jsfiddle.net/eza2zag4/
The reason why the element have a height of 0px is because you wrotefloat: left in the child element
If you put a <div style="clear: both;"></div> after the childs, the element have the ideal height.
https://jsfiddle.net/eza2zag4/1/
Set the height of div with an id="grad1" for example 100px and you background image will appear.
if you give a height to the div 'grad1', then it will work.
html, body
{
height:100%;
}
#grad1
{
height:100%;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<body>
<h2>Linear Gradient as Background Image</h2>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1" style="background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg); width:100%; margin-top:50;">
<div style="width:55%; padding: 10px; float:left;">
<img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " />
</div>
<div style="width:35%;padding: 10px;float:left;">
<h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;">
Header<br>
<h3 style="color:red; text-align:left;">(Subtitle)</h3>
</h1>
<p style="color:black;">
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>
Your main div not wrapping floated child elements. Add below code in your css.
#grad1:after{
content:"";
clear:both;
display:block;
visibility:hidden;
height:0;
}
Hope this will help.
Note: First Save the image in the same directory like that:
www => index.html , back.jpg
www is a folder name:
always used style tag for styling the html elements or the best choice is to create a new file for styling purpose style.css or 'anyname'.css this is the good pratice.
you can prefer this link: https://www.w3schools.com/css/css3_backgrounds.asp
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
#grad1 {
background-image: url('back.jpg');
background-repeat: no-repeat, repeat;
padding: 15px;
width: 550px;
}
</style>
</head>
<body>
<h2>Linear Gradient as Background Image</h2>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1">
<div style="width:55%; padding: 10px;">
<img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " />
</div>
<div style="width:35%;padding: 10px;float:left;">
<h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;">
Header<br>
<h3 style="color:red; text-align:left;">(Subtitle)</h3>
</h1>
<p style="color:black;">
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>
If you want to use your code then use the display: flex; to the background image.
or else check my updated answer.
https://www.w3schools.com/css/css3_flexbox.asp
html,body{
margin: 0;
padding: 0;
height: 100%;
}
#grad1{
background-image: URL(https://images.freecreatives.com/wp-content/uploads/2016/05/Awesome-Gradient-Background-.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
background-position: center;
min-height:100%;
margin-top:50;
/* display: flex;*/
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<body>
<h2>Linear Gradient as Background Image</h2>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1">
<div style="width:55%; padding: 10px; float:left;">
<img alt="abc" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Blue_computer_icon.svg" style="max-width: 75%; height: auto; margin:10%; " />
</div>
<div style="width:35%;padding: 10px;float:left;">
<h1 style="color:black; margin-top: 70px; font-weight:bolder; text-align:left;">
Header<br>
<h3 style="color:red; text-align:left;">(Subtitle)</h3>
</h1>
<p style="color:black;">
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>
Related
I want to make 2 responsive divs side by side, while keeping them the same height. One of them is an image, and the other div is a text. How would i make sure the image height equal, without using JavaScript. my image dimensions are 1000 × 1799.
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
}
#image img {
width: 50%;
}
.box {
display: flex;
flex-direction: row;
}
<div class="container">
<div class="box">
<div id="text">
<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 id="image">
<img src="lfc.png">
</div>
</div>
</div>
whats happening is that if the try to make the height a percentage then it will obviously change to fit current screen settings but i want to make it responsive and same height.
thanks in advance!
Your two columns actually are the same height already; you've just not allowed your image to expand to fill the height of the container. To allow this, simply set width: 100% and height: 100% on #image img. Be warned that in doing so you'll skew the image aspect ratio. If you want to maintain the ratio, you'll need to specify width: auto instead, though this will chop off parts of the image when there isn't room to display it all.
Note that you'll also want a width of 50% on #image, so that both the text container and image container take up half of the width.
Also note that due to the nature of text taking up a different number of lines at different widths, it will always be a different height to the image. However, the container will always be the same height. I've added a background to the container to demonstrate this.
This can be seen in the following.
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
background: cyan;
}
#image {
width: 50%;
}
#image img {
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-direction: row;
}
<body>
<div class="container">
<div class="box">
<div id="text">
<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 id="image">
<img src="http://placehold.it/100">
</div>
</div>
</div>
</body>
You can use flexbox:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">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.</div>
<div class="col"><img src="lfc.png"></div>
</div>
I am trying to achieve a complex layout with the top nav in a container that aligns with the body content that is also in a container. However, to the left of the nav container, which I assume should be a container-fluid. I would like there to be a logo to the left of that centered at all times.
I've tried positioning it absolutely but then that gets messy across devices. I would like a setup where I can just have it collapse above the nav container and the other containers/columns follow underneath it.
JS Fiddle:
https://jsfiddle.net/x58975c3/
Here is an example of the desired layout:
<div class="container-fluid">
<div class="col-md-4 logo">
Logo
</div>
<div class="col-md-8 nav">
Nav
</div>
</div>
<div class="container container-content">
<div class="row">
<div class="col-md-4">
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.
</div>
</div>
</div>
Is this possible with Bootstrap or better suited for something like Flexbox?
You can do a mix of FlexBox and positioned (absolute/relative).
https://jsfiddle.net/pablodarde/rt38mynd/
html
<div class="container">
<div class="nav-logo">Logo Here</div>
<div class="content">
<div class="nav-bar">
<span>NAV CONTAINER AND HEADER ITEMS</span>
</div>
<div class="body-container">
<div>
<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>
</div>
css
.container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
background: #dedede;
}
.nav-logo {
position: absolute;
width: 12.5%;
height: 50px;
background: #f0f;
}
.content {
width: 75%;
margin: 0 auto;
background: #000;
}
.nav-bar {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width 100%;
height: 50px;
background: red;
}
.body-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.body-container div {
background: yellow;
}
You can put the second container within the col-md-8 column, like so: https://jsfiddle.net/0kx5rz9x/
This will also cause the logo to stack on top of the main container on mobile.
I've been using Flexbox, because it's more easier, and it's pretty fun to build your own css structure without the help from frameworks. I recommend this site: http://the-echoplex.net/flexyboxes/. You can set the number of elements on a container and test the positioning. Take a look, The flex-flow= row | column and the justify-content is an big solution for the resposive ^^;
I also use this site to diference and remember a little of the syntax https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have this markup:
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">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 class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</article>
And I want to apply to the "content" div a full width background color.
How can I do this through CSS?
Here is a jsbin to show you exactly what I'm trying to do.
You could use the .jumbotron class for this purpose. Just make sure not to put it inside an element with .container class.
Jumbotron
So here is an example using .jumbotron.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin: 0;
}
.content {
background-color: green;
}
.jumbotron {
background-color: orange;
}
.no-left-right-padding {
padding-left: 0;
padding-right: 0;
}
#media screen and (min-width: 1200px) {
img {
width: 100%;
height: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<img class="bg-featured img-responsive" src="http://placehold.it/1200x400"></img>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">Title</h1>
<p class="info">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 class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
I answered the same question here: Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center
In summary, you simply add another element around the container, and style it as you like. It will cover the full width. A container inside a container-fluid is not considered good practice.
Just create a full width wrap element (div, section, etc.). Then, use .container class for a responsive fixed width container:
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="full-width"> /* ADD FULL WIDTH WRAP CLASS */
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">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 class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
Bootstrap .container class adds a left and right padding of 15px. Either use negative padding to fix it (padding-left: -15px; padding-right:-15px) or you can make a new .containerNew class in another css file and add these styles. For example in a file called myStyles.css do the following:
.containerNew {
background-color: green;
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
<div class="containerNew">
<div class="row">
<div class="col-md-12">
<!-- Your Content Here -->
</div>
</div>
</div>
I need two DIV to be put side by side and aligned vertically at their bottom.
The orange div doesn't have a width or height. It can grow depending of his content
I should be able to use padding and margin of the green div
I would like to have a solution that doesn't use javascript
See: http://jsfiddle.net/thirtydot/J9eds/
I've used display: inline-block combined with vertical-align: bottom.
HTML:
<div id="container">
<div id="left">
left<br />left<br />left<br />left<br />left<br />left<br />
leftleftleftleftleftleft
</div>
<div id="right"></div>
</div>
CSS:
#container {
border: 1px solid red;
float: left;
}
#left, #right {
border: 2px solid red;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
}
#right {
margin: 20px 20px 0 20px;
padding: 20px;
width: 100px;
}
Not 100% sure, but something like this should work:
<div class="wrapper">
<div class="orange"></div>
<div class="green"></div>
</div>
div.wrapper div {
position: relative;
float: left;
bottom: 0px;
}
May not even need the float.
This was some fun practice :) Its probably not the best answer, but it should get the job done.
html:
<table>
<tr>
<td>
<div id="div3">testing a whole<br/> bunch <Br/>of text and content t<br/>hat this co<br/>uld co<br/>ntain<br/> hadahdee<br/> wha da da deet</div>
</td>
<td>
<div id="div4">nick</div>
</td>
</tr>
</table>
css:
td
{
vertical-align:bottom;
}
#div3
{
border:solid 5px blue;
float:left;
}
#div4
{
width:50px;
height:20px;
border:solid 5px red;
float:right;
}
see code in jsfiddle. add margins to the divs if you'd like
I am sure you'll get something better but to get started this seems to work.
in the css sheet
#box1{
background-color:#FFFF99;
width: 350px;
height: auto;
float: left;
position:absolute;
bottom: 0;
}
#box2{
background-color:#CCFF99;
width:350px;
left: 500px;
position: absolute;
bottom: 0;
}
in the html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="try2.css" />
</head>
<body>
<div id="box1">
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.
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.
</div>
<div id="box2">
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.
</div>
</body>
</html>
I think you need an absolute left position for the second box.
What worked for me was applying this style to both divs:
.bottom-align {
vertical-align:bottom; display:inline-block; float:none;
}
Then between both divs I had to remove the pseudospace by adding a blank comment:
</div><!-- ---><div>
https://jsfiddle.net/panosang/96bnt3xa/
After some hours of working and a terrible headache i think that the perfect solution is to add some margin-botton and margin-top elements.
I really hate to add specific pixels or change percentage each time into my CSS file but i found it as the perfect solution in my problem.
I used <table> instead of <div>, but it works with <div> too.
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.