I'd like to create some "table rows" using <div> and <span>. (Why not use actual table rows? Because I want to set rounded corners on each table row using the awesome jquery corner plugin, and it doesn't seem to like table rows.)
I'd like three-cell rows, with LH and RH cells of fixed width, and a central cell of fluid width, in which the text should wrap.
[fixedwidth][wrapwrapwrapwrap ][fixedwidth]
[fixedwidth][wrapwrapwrapwrapwrapwrapwr][fixedwidth]
apwrapwrapwrapwrapwrapwr
[fixedwidth][wrapwrapwrapwrap ][fixedwidth]
This is what I have so far, but it's disastrously wrong:
<html>
<head>
<style>
.table-row {
width:100%;
}
.cell1 {
float: left;
width: 200px;
}
.cell2 {
float: left;
}
.cell3 {
float: right;
width: 200px;
}
</style>
</head>
<body>
<div class='table-row'>
<span class="cell1">Title</span>
<span class="cell2">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.</span>
<span class="cell3">Available</span>
</div>
</body>
</html>
The central text doesn't wrap, and pushes down onto the next line.
Please could anyone advise?
Try this:
<style>
.table-row {
display: table-row;
}
.cell1, .cell2, .cell3 {
display: table-cell;
}
.cell1, .cell3 {
width: 200px;
}
</style>
First of all, it doesn't make sense to float inline elements. Secondly, that's not how you create a liquid column.
Try these changes:
<div class="cell1">Title</div>
<div class="cell3">Available</div>
<div class="cell2">consequat.</div>
and
.cell2 {
margin-left: 200px;
margin-right: 200px;
}
Note: If you add padding/borders/margins to the cells don't forget to add the sum of the sizes to margin-left and margin-right for cell2.
Can't you just add divs and spans inside regular table cells?
Edit:
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
Related
I am trying to make a child div appear as wide as its grandparent. My desired effect is similar to the one desired in this question, but with the key difference that the grandparent is not the width of the viewport; instead, it is determined dynamically.
<div class="outer">
<div class="content">
<div class="inner">
</div>
</div>
</div>
In my example below, the green .inner div should appear as wide as the .outer div, whose width is dynamically calculated by the flexbox <body>. Ideally the text wrapping would be the same in the .inner and .content divs. I also want the inner to remain in the document flow, or at least appear to be. The inner div is generated by a Markdown converter, so it's not easy to edit the content/inner relationship.
How do I make the inner div appear as wide as its grandparent? I would strongly prefer a pure-CSS solution.
Here are some things that do not work:
Absolutely positioned .inner div (with left:0; right:0;), with the .outer div marked position: relative to make it the containing box. This almost works but it removes the inner element from the flow.
Setting the inner element's width to 100vw and shifting it around. There's no way to access the result of the automatic width calculation, so in addition to being very hard to reason about, this also causes problems when scrollbars appear.
body {
display: flex;
}
.sidebar {
flex: initial;
width: 9rem;
text-align: center;
background: lightblue;
}
.outer {
flex: 1;
}
.content {
max-width: 15rem;
margin-left: 1rem;
margin-right: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.inner {
background: lightgreen;
padding-top: 1rem;
padding-bottom: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
<html>
<body>
<div class="sidebar">sidebar</div>
<div class="outer">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="inner">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
</html>
This is what display: contents does (more info), but browser support is a bit limited. You may be able to get by with fallback styles for non-supporting browsers (using #supports in your CSS), or with this JS polyfill.
Not sure if I understood your question correct, but adding
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
to the .inner class would solve it, wouldn't it?
I'm trying to make 2 columns:
The first is an image taking 50% of the page and the other would be a text box taking the remaining 50% of the page. No margins.
Is it possible to have something like this that's responsive? I'm struggling to get the background colour to line up with the image.
.imagebox {
width: 50%;
float: left;
}
.textbox {
width: 50%;
float: right;
text-align: center;
padding-top: 20px;
background-color: #666;
color: #fff;
}
<div class="imagebox">
<img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" />
</div>
<div class="textbox">
<h2>Title Here</h2>
<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.</p>
Read More
</div>
Here the first half is an <img> and the second is a <textbox>
https://jsfiddle.net/b8ow0noy/1/
The code from the link is here
<div style="width: 50%; float:left">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
</div>
<div style="width: 50%; float:right">
<textbox>
#right content in there<br>
#right content in there<br>
#right content in there<br>
#right content in there<br>
#right content in there<br>
#right content in there<br>
#right content in there<br>
#right content in there<br>
#right content in there<br>
#right content in there<br>
</textbox>
</div>
css:
div{
margins:0 px;
overflow:hidden;
}
Wrap your .textbox inside a container (in my case the class of the container is .textbox-cont). Give imagebox and textbox-cont a fixed height. Remove floating property from textbox apply it to the .textbox-cont. Now position both the image and the textbox relative to the .imagebox and .textbox-cont respectively.
Use position absolute for img and .textbox and position it 50% from the top of their container like so:
.imagebox img{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.textbox{
background-color: #666;
color: #fff;
position:absolute;
text-align: center;
width:100%;
top:50%;
transform:translateY(-50%);
}
This will do the trick. Also if you want to make it responsive use media queries like so:
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont{
width:100%;
height:200px;
}
}
Play around with the breakpoint (max-width) and change it to whatever suits you best.
Also change the box-sizing property of every element to border-box like so to fix any margin or padding issue:
*{
box-sizing:border-box;
}
Final snippet :
*{
box-sizing:border-box;
}
.imagebox {
width: 50%;
float: left;
height:300px;
position:relative;
}
.imagebox img{
position:absolute;
top:50%;
transform:translateY(-50%);
overflow:hidden;
}
.textbox-cont {
width: 50%;
height:300px;
float: right;
position:relative;
overflow:hidden;
}
.textbox{
background-color: #666;
color: #fff;
position:absolute;
text-align: center;
width:100%;
padding:20px;
top:50%;
transform:translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont{
width:100%;
height:200px;
}
}
<div class="imagebox">
<img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" />
</div>
<div class="textbox-cont">
<div class="textbox">
<h2>Title Here</h2>
<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.
</p>
Read More
</div>
</div>
if you want to read about box-sizing:border-box check this out => https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
here is a great article on responsive webdesign :https://blog.froont.com/9-basic-principles-of-responsive-web-design/
The following answer is responsive but at small widths the image will be very narrow and probably cropped too much. At a certain breakpoint you might want to convert the side-by-side layout to a stacked single column.
.wrap {
display: flex;
}
.wrap>* {
flex: 1;
}
.imagebox {
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.textbox {
padding: 1rem;
background-color: #666;
color: #fff;
}
<div class="wrap">
<div class="imagebox">
<img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" />
</div>
<div class="textbox">
<h2>Title Here</h2>
<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.</p>
Read More
</div>
</div>
I'm looking for an explanation for the following behaviour.
I have a <div> container with three <span> elements. The first and third elements are cosmetic, their purpose is fill the width of the browser window with different background colours. This is achieved by adjusting the horizontal padding and margins of the elements.
There is an unwanted gap between the second and third <span> elements. I've determined that the width of the gap is exactly a quarter of the font size which was set for the parent <div> element.
My solution to the issue is to add a negative margin to the third <span> element. The following code snippet demonstrates the issue and also my solution to the problem.
http://codepen.io/danag/pen/RKZQxE
Can someone explain to me the reason for the behaviour?
I'd also be happy to learn of a better solution to this layout problem.
body {
margin : 0;
padding: 0;
overflow-x: hidden;
}
h2 {
font-size: 32px;
}
.bg-blue {
background-color: #1111ee;
}
.bg-red {
background-color: #ee1111;
}
#my-container {
background-color: #ffffff;
}
#my-content,
#my-content-too {
width: 80%;
margin: auto;
background-color: #ffffe0;
padding: 1.5em;
}
.heading-wrapper {
display: inline;
font-size: 100px;
line-height: 1.2;
background-color: #ffff00;
}
.heading-wrapper .heading {
display: inline;
text-transform: uppercase;
background-color: #eee;
}
.heading h2 {
display: inline;
padding-left: 0.3em;
padding-right: 0.3em;
}
.extend-left {
margin-left: -2000px;
margin-right: 0;
padding-left: 2000px;
padding-right: 0;
}
.extend-right {
margin-left: 0;
margin-right: -2000px;
padding-left: 0;
padding-right: 2000px;
}
.left-25 {
margin-left: -25px;
}
<div id="my-container">
<div id="my-content">
<div class="heading-wrapper">
<span class="extend-left bg-blue"></span>
<span class="heading"><h2>Heading Text</h2></span>
<span class="extend-right bg-red"></span>
</div>
<div class="text-wrapper"><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.</p></div>
</div>
<div id="my-content-too">
<div class="heading-wrapper">
<span class="extend-left bg-blue"></span>
<span class="heading"><h2>Heading Too</h2></span>
<span class="extend-right bg-red left-25"></span>
</div>
<div class="text-wrapper"><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.</p></div>
</div>
</div>
You seem to have ran into the whitespace issue where any whitespace results in a space ( ) in that position. The best solution is either float (which causes numerous other issues) or setting the font-size to font the parent element and then setting it back to your value in the child.
.parent { font-size: 0; }
.parent > * { font-size: 1rem; }
Hope that helps.
In CSS, I can do something like this:
But I've no idea how to change that to something like:
Is this possible with CSS?
If yes, how can I do it without explicitly specifying the height (let the content grow)?
Grid
Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:
.row {
display: grid;
grid-auto-flow: column;
gap: 5%;
}
.col {
border: solid;
}
<div class="row">
<div class="col">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.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col">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.</div>
</div>
Flexbox
Use Flexbox if you want children to control column width:
.row {
display: flex;
justify-content: space-between;
}
.col {
flex-basis: 30%;
box-sizing: border-box;
border: solid;
}
<div class="row">
<div class="col">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.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col">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.</div>
</div>
Give overflow: hidden to the container and large (and equal) negative margin and positive padding to columns. Note that this method has some problems, e.g. anchor links won't work within your layout.
Markup
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
CSS
.container {
overflow: hidden;
}
.column {
float: left;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
The Result
Yes.
Here is the completed CSS the article uses. It is well worth reading the entire article, as the author goes step by step into what you need to make this work.
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
This isn't the only method for doing it, but this is probably the most elegant method I've encountered.
There is another site that is done completely in this manner, viewing the source will allow you to see how they did it.
You can do this easily with the following JavaScript:
$(window).load(function() {
var els = $('div.left, div.middle, div.right');
els.height(getTallestHeight(els));
});
function getTallestHeight(elements) {
var tallest = 0, height;
for(i; i < elements.length; i++) {
height = $(elements[i]).height();
if(height > tallest)
tallest = height;
}
return tallest;
};
You could use CSS tables, like so:
<style type='text/css">
.container { display: table; }
.container .row { display: table-row; }
.container .row .panel { display: table-cell; }
</style>
<div class="container">
<div class="row">
<div class="panel">...text...</div>
<div class="panel">...text...</div>
<div class="panel">...text...</div>
</div>
</div>
Modern way to do it: CSS Grid.
HTML:
<div class="container">
<div class="element">{...}</div>
<div class="element">{...}</div>
<div class="element">{...}</div>
</div>
CSS:
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.element {
border: 2px solid #000;
}
Live example is here.
repeat(auto-fit, minmax(200px, 1fr)); part sets columns width. Every column takes 1 fraction of available space, but can't go less than 200px. Instead of shrinking below 200px it wraps below, so it's even responsive. You can also have any number of columns, not just 3. They'll all fit nicely.
If you need exactly 3 columns, use grid-template-columns: repeat(3, 1fr); instead. You can still have more elements, they will wrap, be responsive, but always be placed in 3 column layout.
More on CSS Grid on MDN or css-tricks.
It's clean, readable, maintainable, flexible and also that simple to use!
You ca try it... it works for me and all browser compatible...
<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>
Another option is to use a framework that has this solved. Bootstrap currently doesn't have an equal height option but Foundation by Zurb does, and you can see how it works here: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
Here's an example of how you'd use it:
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
</div>
<div class="large-6 columns panel" data-equalizer-watch>
</div>
</div>
Basically they use javascript to check for the tallest element and make the others the same height.
So, if you want just css this would add more code, but if you are already using a framework then they have already solved this.
Happy coding.
Use Flexbox to create equal height columns
* {box-sizing: border-box;}
/* Style Row */
.row {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
/* Make the columns stack on top of each other */
.row > .column {
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* When Screen width is 400px or more make the columns stack next to each other*/
#media screen and (min-width: 400px) {
.row > .column {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
}
<div class="row">
<!-- First Column -->
<div class="column" style="background-color: #dc3545;">
<h2>Column 1</h2>
<p>Some Text...</p>
<p>Some Text...</p>
</div>
<!-- Second Column -->
<div class="column" style="background-color: #ffc107;">
<h2>Column 2</h2>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
</div>
<!-- Third Column -->
<div class="column" style="background-color: #007eff;">
<h2>Column 3</h2>
<p>Some Text...</p>
<p>Some Text...</p>
<p>Some Text...</p>
</div>
</div>
Responsive answer:
CSS flexbox is cute, but cutting out IE9 users today is a little insane. On our properties as of Aug 1 2015:
3% IE9
2% IE8
Cutting those out is showing 5% a broken page? Crazy.
Using a media query the way Bootstrap does goes back to IE8 as does display: table/table-cell. So:
http://jsfiddle.net/b9chris/bu6Lejw6/
HTML
<div class=box>
<div class="col col1">Col 1<br/>Col 1</div>
<div class="col col2">Col 2</div>
</div>
CSS
body {
font: 10pt Verdana;
padding: 0;
margin: 0;
}
div.col {
padding: 10px;
}
div.col1 {
background: #8ff;
}
div.col2 {
background: #8f8;
}
#media (min-width: 400px) {
div.box {
display: table;
width: 100%;
}
div.col {
display: table-cell;
width: 50%;
}
}
I used 400px as the switch between columns and a vertical layout in this case, because jsfiddle panes trend pretty small. Mess with the size of that window and you'll see the columns nicely rearrange themselves, including stretching to full height when they need to be columns so their background colors don't get cut off part-way down the page. No crazy padding/margin hacks that crash into later tags on the page, and no tossing of 5% of your visitors to the wolves.
Here is an example I just wrote in SASS with changeable column-gap and column amount (variables):
CSS:
.fauxer * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.fauxer {
overflow: hidden; }
.fauxer > div {
display: table;
border-spacing: 20px;
margin: -20px auto -20px -20px;
width: -webkit-calc(100% + 40px);
width: -moz-calc(100% + 40px);
width: calc(100% + 40px); }
.fauxer > div > div {
display: table-row; }
.fauxer > div > div > div {
display: table-cell;
width: 20%;
padding: 20px;
border: thin solid #000; }
<div class="fauxer">
<div>
<div>
<div>
Lorem column 1
</div>
<div>
Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
<div>
Lorem column 3
</div>
<div>
Lorem column 4
</div>
<div>
Lorem column 5
</div>
</div>
</div>
</div>
Note: I only found the time to test it in some new browsers. Please test it well before you will use it :)
The editable example in SCSS you can get here: JSfiddle
I have 3 divs inside a wrapper div. Inside my wrapper div, my leftmost div is an arrow image I'm using to navigate between sliders using js. The middle div is the slider, and the right div is the right arrow to move to the next slider.
Here's the code for the slider:
<div class="twocol_double">
<div class="btn_left"></div>
<div id="slide_wrapper">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">
<h3>Heading1</h3>
<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 vol</p>
</div>
</div>
<div class="btn_right"></div>
</div>
There will be multiple slide classes, but for the sake of the question I only added 1.
For some reason though, my right div with my right arrow is being pushed down. Looking at it in Chromes element inspector there is a 50px right margin on my slider div that I'm not defining anywhere (I see the orange color, but there's no CSS markup for it).
I've recreated the problem in jsfildde here: http://jsfiddle.net/maZbF/1/
I want that right arrow to line up with the other two divs. I've wrecked my brain trying to figure this out and debug it in chrome with no avail. Am I missing something simple?
In order for floated content to stay on the same line, all floated content has to be defined before any normal content.
In this case, you have your left button floated to the left first, which works because it was first. Then you have your division which is not floated and is display: block. A block-level element will always push anything after it down to the next line, even if you define a width for it. So when it gets to your right button after that, it is starting on a new line and floating to the right of that new line. It's starting 131px down from the top, since your division before that has a height: 131px defined on it (and the other content inside it is just overflowing past the boundaries, not interfering with your right-floated element).
So, you have a couple options:
Define your right button immediately after the left button.
Float all three elements to the left so they stack on top of each other.
I think the issue you're having is that your right div is position:relative while the left is position:absolute. I think you can simplify this layout using simple floats though:
HTML
<div class="twocol_double">
<div class="btn_left"></div>
<div id="slide_wrapper">
<div class="slide">
<h3>Heading1</h3>
<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 vol</p>
</div>
</div>
<div class="btn_right"></div>
</div>
CSS
.twocol_double {
width: 500px;
float: left;
font-size: 1.2em;
}
.btn_left {
cursor: pointer;
display: block;
width: 20px;
height: 170px;
float: left;
background: #ccc url("http://i.imgur.com/7bYsZJD.gif") no-repeat center center;
}
#slide_wrapper {
width: 460px;
height: 131px;
display: block;
float:left;
}
.btn_right {
cursor: pointer;
width: 20px;
height: 170px;
float: right;
background: #ccc url("http://i.imgur.com/0QRkQ2M.gif") no-repeat center center;
}
h3 {
font-size: 1.5em;
color: #7DAC20;
}
p, blockquote {
padding-bottom: 20px;
font-size: 1.3em;
color: #636B75;
line-height: 20px;
}
http://jsfiddle.net/Eb3TA/