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.
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>
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've got my footer with four columns inside a container. It needs to be inside the container to line up with the content above.
My problem is I want the left column to have a background of red, however currently it will not stretch because it's obviously in a container.
How can I stretch it full width to the left whilst keeping it lined up with the content above.
<footer class="cf">
<div class="container">
<div class="test11" style="width: 25%; float: left; background: red;">
<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 class="test11" style="width: 25%; float: left;">
<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 class="test11" style="width: 25%; float: left;">
<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 class="test11" style="width: 25%; float: left;">
<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>
</footer>
.container {
width: 1170px;
margin: 0 auto;
}
footer {
background: grey;
}
You cannot do it directly like you said "stretch" it as far as I know.
However, I made a little workaround for you here
It consists of:
using pseudo-element :before (assigned to the first footer column using :nth-of-type(1)) which we'll use for creating same red background to place on the left of the first column
positioning the :before element to position: absolute; in order to use left: 0; which will place the red background on the left edge of last positioned element
now our :before element is positioned relatively to the closest positioned ancestor - which is in our case the html element itself. But we want it to be positioned relatively to the footer which is not positioned yet, we do so using position: relative; on it (more on that here)
adding content: " "; height: 100%; width: 25%; so it appears actually
adding z-index: -1; to which places the before element behind the actual element. Read about it here
adding z-index: 0; to the footer element to include it to the positioning context
adding background-color: red;
final added code:
footer{
z-index: 0;
position: relative;
}
.test11:nth-of-type(1):before{
position: absolute;
left: 0;
content: " ";
height: 100%;
width: 25%;
z-index: -1;
background-color: red;
}
Few tips:
Don't use inline styles. Just don't
Use cf class to wrap just the floated elements (not e.g. footer containig them in your case)
For your future questions, it would be great, if you'd provided all the relating code, so people who want to help you could reproduce (and eventually find the solution) it as quickly as possible. (I had to include clearfix to css)
Hope this helps. Good luck!
Set container class width to 100%
.container {
width: 100%;
margin: 0 auto;
}
I'm making a simple layout as part of a web site. It has multiple blocks, each with similar content. Here's the html/css:
<html>
<head>
<style>
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
h2, p, img {
display:block;
float: left;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<img class='auto' src='img/test.jpg' alt='test image' />
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
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='content'>
<h2>Title two</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.
</p>
<p>
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 <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img class='auto' src='img/test.jpg' alt='test image' />
</div>
</body>
</html>
The second image is displayed lower than expected. What causes this, and is there a way to fix it?
Thank you!
Try putting the img tag in the second div above the p elements.
Adjust your html...
<html>
<head>
<style>
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
h2, p, img {
display:block;
float: left;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<img class='auto' src='img/test.jpg' alt='test image' />
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
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='content'>
<img class='auto' src='img/test.jpg' alt='test image' />
<h2>Title two</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.
</p>
<p>
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 <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body></html>
You should use CSS to float your text and images:
<html>
<head>
<style>
.left {
float:left;
}
.right {
float:right;
}
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
h2, p, img {
display:block;
float: left;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<div class="left">
<img class='auto' src='img/test.jpg' alt='test image' />
</div>
<div class="right">
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
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 class='content'>
<div class="right">
<img class='auto' src='img/test.jpg' alt='test image' />
</div>
<div class="left">
<h2>Title two</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.
</p>
<p>
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 <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body></html>
Your image as well the paragraphs and the h2 are defined with float: left.
As both p and h2 have a fixed width, you can't put two of these into one line (580px*2 > 900px), so they wrap.
However, an image will fit next to a paragraph (or a title), so it will be displayed at the same height.
To display the image right tothe title, you'll have to swap your floating style for the image to "float: right" and place the image before the h2 tag.
You can find a (cleaned-up) fiddle here:
http://jsfiddle.net/Xmujr/
I removed most of the float directives, as they aren't needed for anything except the image. I also added a class (left / right) to the image to make clear where the image will be shown.
HTH
Add the second image before <h2> inside <div class="content"> with following style:
<div class='content'>
<img class='auto' src='img/test.jpg' alt='test image' style="float:right;"/>
<h2>Title two</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.
</p>
<p>
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 <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
EDIT
Or you can use css class to achieve the same:
Check the to_right and to_left css classes in below code.
<html>
<head>
<style>
.content {
width: 900px;
display: block;
overflow: hidden;
padding: 10px;
background: #fea;
margin: 20px;
}
h2, p {
display: block;
width: 580px;
}
img {
background: white;
padding: 5px;
width: 270px;
height: 330px;
}
.to_right{float:right;}
.to_left {float:left;}
h2, p, img {
display:block;
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class='content'>
<img src='img/test.jpg' alt='test image' class="auto to_left"/>
<h2>Title one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor <em>incididunt</em> ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
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='content'>
<img src='img/test.jpg' alt='test image' class="auto to_right"/>
<h2>Title two</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.
</p>
<p>
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 <a href='#'>cupidatat non proident</a>,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body></html>
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.