I need apply a style only whit content "something"
Here is an example on how you can do that :
<style>
.small {
color: #000 !important;
}
.small[value^="something"] {
font-size: 12px !important;
color: red !important;
}
</style>
<div class="small" value="soething">Lorem ipsum dolor sit amet.</div> <!-- Not working -->
<div class="small" value="something">Lorem ipsum dolor sit amet.</div> <!-- Working -->
It's as simple as that ! :)
Related
I have an issue where the cursor jumps to wrong place when user clicks inside of contenteditable div but outside of the actual text. It seems to be a problem only in newer versions of Chrome (and also Opera): coincidentally I tested my example in an older browser (Chrome version 55) and the issue was not present at all. No problem in Edge/IE11/FireFox either.
The issue occurs only when user clicks behind a line of text or on an empty line that sits between the two yellow divs with class pagebreak. The cursor ends up above the first pagebreak div. And whether or not it is directly related, I don't know, but the problem disappears when the div with class flowbox is removed. Unfortunately I can not remove this div with class flowbox from the App.
I have put together an example showing my problem in this fiddle: https://jsfiddle.net/dymcn1ao/
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
The textfield on the left has the problem, the one on the right works as expected because the .flowbox div has been removed.
Edit 1:
I have created a new example that maybe is easier to understand. The other elements in the .textframe (like the pagebreak and flowbox elements) do actually have specific purposes so they can not be disregarded. Here is the link to the improved demo: https://jsfiddle.net/q4pu37dn/15/
Update 3 (Demo 3)
Changes
I noticed that there are no longer any position: relative used in most current OP code which is good, but I believe this was was forgotten:
<span class='pagebreak spacer'contenteditable="false"></span>
I believe that you originally used contenteditable="false" in order to give your .pagebreaks extra functionality and also prevent them from being deleted, so I added them back in.
Comparison
Demo 3 has my solution side by side to OP code to compare behavior. Demo 3 also features 2 buttons (1 for each content editor) which highlights each <span> of text. The following is a list of the classes from OP code (the content editor on the right) and the list of each classes equivalent from my code (content editor on the left.)
div.textframe................section.editor
p.textOutline................article.content
span.flowbox.spacer......mark.vertRule
span.pagebreak.spacer ..mark.breaker
There are 2 requirements that the OP is concerned about:
When the empty areas surrounding the <span>s are clicked, the cursor will jump to the corner of the content area.
The number of characters per line must be consistent with the OP code's current capacity.
This problem has been around for years but the reason why is nebulus, so if you treat this aberration as just behavior, you can just counter it by instilling different behavior.
Demo2 and Demo3 meet these criteria by simply applying the following style rulesets:
Demo 2
article p {display: table;...
Demo 3
.content {display:table-cell;...
The behavior of tables-cells are rigid and well established, and AFAIK are the only non-replaced element that by default conforms to it's content and conforms to the surrounding table elements. As a bonus an element with display: table-cell (not <td>) isn't required to be nested within a <tr> that's within a <table>.
Demo 3
.content { display: table-cell;...
Fiddle
/* Begin Defaults */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
background: white;
font: 400 16px/1.45 Arial;
height: 100%;
width: 100%;
}
/* End Defaults */
/* Begin Optional Layout */
#page01 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
background: rgba(45, 99, 198, 0.6);
margin: 0 auto 20px;
height: fit-content;
min-width: 100%
}
/* End Optional Layout */
/* Begin Primary Styles */
.editor {
width: 350px;
height: 600px;
border: 1px solid black;
background: #fff;
}
.vertRule {
float: right;
clear: right;
width: 30px;
height: 600px;
}
.content {
display: table-cell;
word-break: break-word;
}
mark {
display: block;
pointer-events: none;
}
.break {
min-height: 80px;
}
/* End Primary Styles */
/* Begin Control */
/* https://jsfiddle.net/q4pu37dn/15 */
.textframe {
width: 350px;
height: 600px;
border: 1px solid black;
background: #fff;
}
.flowbox {
float: right;
clear: right;
width: 30px;
height: 600px;
}
.spacer {
background: yellow;
}
.pagebreak {
display: block;
min-height: 80px;
}
/* End Control */
/* Begin Demo Test */
.btn {
display: inline-block;
font: inherit;
margin: 5px 10px;
padding: 2px 5px;
border: 5px outset grey;
border-radius: 8px;
color: #000;
cursor: pointer;
}
[type='checkbox']:checked+label {
background: rgba(255, 12, 34, 0.75);
border: 5px inset grey;
color: #fff;
}
#outline1:checked+label+#outline2+label+hr+#page01>.editor>.content *,
#outline2:checked+label+hr+#page01>.textframe>#textOutline *:not(.spacer) {
color: #fff;
background: tomato;
outline: 2px solid red;
}
#outline1:checked+label+#outline2+label+hr+#page01>.editor>.content>.break,
#outline2:checked+label+hr+#page01>.textframe>#textOutline>.spacer {
background: yellow;
outline: none;
}
/* End Demo Test */
<!-- Begin Demo Test -->
<input id="outline1" type='checkbox' hidden>
<label for='outline1' class='btn'>Outline 1</label>
<input id="outline2" type='checkbox' hidden>
<label for='outline2' class='btn'>Outline 2</label>
<hr>
<!-- End Demo Test -->
<!-- Begin Optional Layout Part 1 -->
<main id='page01'>
<!-- End Optional Layout Part 1 -->
<!-- Begin Primary Markup -->
<section class="editor" contenteditable='true'>
<mark class="vertRule" contenteditable='false'></mark>
<article class='content'>
<span>
Clicking here is not a problem
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<mark class="break" contenteditable='false'></mark>
<span>
Clicking here (on empty space, not directly on text) will put the caret above the first .break element.
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<mark class="break" contenteditable='false'></mark>
<br>
<span>
Clicking here is not a problem
</span>
<br>
<br>
</article>
</section>
<!-- End Primary Markup -->
<!-- Begin Control -->
<div class="textframe" contenteditable>
<p id='textOutline'>
<span class="spacer flowbox"></span>
<span>
Clicking here is not a problem
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<span class="spacer pagebreak"></span>
<span>
Clicking here (on empty space, not directly on text) will put the caret above the first .pagebreak element.
</span>
<br>
<br>
<span>
Lorem ipsum
</span>
<span class="spacer pagebreak"></span>
<br>
<span>
Clicking here is not a problem
</span>
<br>
<br>
</p>
</div>
<!-- End Control -->
<!-- Begin Optional Layout Part 2 -->
</main>
<!-- End Optional Layout Part 2 -->
Update 2 (Demo 2)
OP regarding Demo 1:
"you solved it for my contrived example, yes. Unfortunately it is not possible to set those values on the elements in the actual app, the flow gets totally out of wack there."
See Demo 2, it works better than Demo 1. Since it uses only positioned elements, there are no conflicts in flow. In order to adapt Demo 2 to your app, all you need to do is add position:relative to the parent elements. The relevant style is as follows:
article p {display: table;...
It was necessary to assign position:relative to everything nested within .textframe, otherwise the static elements would not interact with the positioned elements. There are rules that tables and table components adhere to that not only apply to its' content but how they interact with their neighboring elements as well.
Demo 2
article p {display: table...
.container {
width: 400px;
float: left
}
.textframe {
width: 350px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
/* Needed for long words */
word-break: break-word;
}
.textframe article {
position: relative;
height: 650px;
}
article p {
display: table;
margin: 0;
position:relative;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
.pagebreak {
display: block;
pointer-events:none;
position:relative;
}
<div class="container">
<h4>
article p {display: table; position: relative;}<br>
all children of .textframe have: position: relative;
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<mark class="pagebreak" contenteditable="false" style="min-height: 80px"></mark>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<mark class="pagebreak" contenteditable="false" style="min-height: 80px"></mark>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
<hr>
</article>
</div>
</div>
Refences
MDN - Float
MDN - Position
CSS Tricks - Absolute Positioning Inside Relative Positioning
CSS Tricks - All About Floats
display: table/table-cell
word-break:break-word
The issue is with the display, I am also new to this but when I changed your span to div it worked fine, do let me know if it is right or I was not able to understand your question rightly.
Now I am not sure why this was happening, so not able to provide you with an in-depth explanation.
Note - Usage of span and div will not be proper after this, so will have to change to div at other places too.
.title {
left: 20px;
}
.container {
float: left;
width: 400px;
}
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.textframe.b {
left: 380px;
}
.textframe article {
position: relative;
height: 650px;
}
article p {
margin: 0;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<div>Foo bar baz</div>
<br>
<div>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</div>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
<div class="container">
<h4>
Without problem:
</h4>
<div class="textframe b">
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<div>Foo bar baz</div>
<br>
<div>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</div>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
This problem occurs because you use float: right;.
Do not use CSS property float: right; if you do not need it. You could have a lot of problems with it. In your case you do not need it. Instead of this you have use inline-block elements as <div class="flowbox"> and <article contenteditable="true">.
The minimal example with float:right (WITH problem)
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span><br>
<span>Lorem ipsum CLICK ABOVE THIS WORDS sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
The solution
The minimal example with display:inline-block (without problem)
Note: now I have placed your <div class="flowbox"></div> after <article> element.
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.flowbox {
width: 2px;
height: 650px;
outline: 1px solid red;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
.flowbox, article{display:inline-block;vertical-align:top;}
article{width: 305px;}
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span><br>
<span>Lorem ipsum CLICK ABOVE THIS WORDS sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
<div class="flowbox"></div>
</div>
</div>
I am using newest version of Chrome on Linux/Ubuntu and this seems to have solved the issue. I have just removed contenteditable from article and put it on spans that you wanted to edit.
<article>
<p>
<span>
<span contenteditable="true">Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span contenteditable="true">Foo bar baz</span>
<br>
<span contenteditable="true">Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
I think issue is with span if you have an empty span in it. I have gone through this issue while working with contenteditable so cursor shows up there but you are not able to make it move.
I will suggest you to Remove span from your p to each paragraph so that if span is empty try to remove it on backspace/delete.
Or refer CKEDITOR as it have solved that problem
article p, article div
{
line-height: 1.25;
margin-top: 12px;
margin-bottom: 12px; /* margin-bottom: 10px; removed for proper pagebreak 31-1-2017*/
font-family: Helvetica;
}
.title {
left: 20px;
}
.container {
float: left;
width: 400px;
}
.textframe {
width: 311px;
height: 650px;
outline: 2px dotted lightblue;
overflow: hidden;
margin: 0 15px 0 0;
}
.textframe.b {
left: 380px;
}
.textframe article {
position: relative;
height: 650px;
}
article p {
margin: 0;
}
.pagebreak {
display: block;
position: relative;
background: yellow;
}
.flowbox {
width: 2px;
height: 650px;
float: right;
clear: right;
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
With problem:
</h4>
<div class="textframe a">
<div class="flowbox"></div>
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
<div class="container">
<h4>
Without problem:
</h4>
<div class="textframe b">
<article contenteditable="true">
<p>
<span>
<span>Foo bar baz</span>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<span>Foo bar baz</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adi piscing elit.</span>
<br>
<br>
<span class="pagebreak" contenteditable="false" style="min-height: 80px"></span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</span>
</p>
</article>
</div>
</div>
I'm trying to inherit the width of my H3 into my line break. How would I go about doing this?
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
<hr />
</div>
The easiest way would be to simply not use an <hr> tag, and instead opt for a simple underline with text-decoration: underline:
h3 {
text-decoration: underline;
}
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
Alternatively you could use border-bottom, which would allow you to increase the gap with padding-bottom:
h3 {
display: inline-block;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
<div class="title">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
Note that with the second solution, you'll want to give the <h3> tag display: inline-block so that it doesn't occupy the full line.
The solution to this is to set your <div> to have the property display: inline-block.
Adding the following CSS:
.title {
display: inline-block;
}
I'm trying make "the end" in the following code to appear inline with the lorem ipsum, and can't figure out how. Is it possible? I can't change the HTML structure at all. (nor can I add js, etc)
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I want it to look like this:
If you are able to make changes to the CSS, then this is an easy solution. Just use display: inline, which will make the element only take as much space as necessary (acting like a <span> element).
However, if by chance, you are unable to, then there is no way I can think of for you to achieve this given your situation.
#parent {
width: 300px;
border: 1px solid red;
}
#block1, #block2 {
display: inline;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
You need to set the two block containers to display: inline:
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
#block1, #block2 {
display: inline;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
Say I have some divs:
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
If these boxes need to be alternate colours I need to create some CSS which basically does the following:
.box-(odd-number) {
color:#000;
}
.box-(even-number) {
color:#fff;
}
Obviously I know the above is not the correct syntax. Could some one point me in the right direction?
Thanks
You can use the nth-of-type pseudo-class, combined with the keywords odd and even:
.box:nth-of-type(odd) {
background-color:#000;
}
.box:nth-of-type(even) {
background-color:#fff;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #f00;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
You can do this using nth-child() with Even and odd rules.
.box:nth-child(odd) {
background: blue;
}
.box:nth-child(even) {
background: green;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
Or you can can do this where :nth-child(2n) represents the even and :nth-child(2n+1) represents the odd
.box:nth-child(2n) {
background: red;
}
.box:nth-child(2n+1) {
background: yellow;
}
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
<div class="box">Lorem ipsum dolor sit amet.</div>
You're looking for nth-child(odd) and nth-child(even), If you don't want to apply .box classname.
[class^="box-"]:nth-child(odd) {
color:#000;
}
[class^="box-"]:nth-child(even) {
color:#fff;
}
An example: https://jsfiddle.net/8tkcuuwm/
To get this working you need a container of which you can adress the odd and even children like this. You set the class to the container and Format it's children accordingly.
By this you only have to set the class once and can exchange it if needed, without having to modify each child separately:
<style type="text/css">
.container div:nth-child(odd) {
color:#F00;
}
.container div:nth-child(even) {
color:#00F;
}
</style>
<div class="container">
<div class="box-1">Lorem ipsum dolor sit amet.</div>
<div class="box-2">Lorem ipsum dolor sit amet.</div>
<div class="box-3">Lorem ipsum dolor sit amet.</div>
<div class="box-4">Lorem ipsum dolor sit amet.</div>
</div>
See this jsfiddle:
HTML
<div class="box box-1">Hello World</div>
<div class="box box-2">Hello World</div>
<div class="box box-3">Hello World</div>
<div class="box box-4">Hello World</div>
CSS
.box:nth-child(odd) {
background-color: #336699;
}
.box:nth-child(even) {
background-color: #222;
}
Short explaination:
We added another class to the boxes, called box. This is, so we can refer to every element of this type. (My hint: use ID's for the box-1, box-2 stuff, since they appear to be unique).
Using the pseudo-class nth-child in combination with odd or even, will affect every (as you may assume) odd- or even element.
if colours should alternate depending only on the order of the div elements, (no matter the class name) then you could use div:nth-child(2n) and div:nth-child(2n + 1)
On the contrary if it depends only on the last digit of your class name (no matter if your divs are in the right order) then you could write
[class^="box"][class$="2"],
[class^="box"][class$="4"],
[class^="box"][class$="6"],
[class^="box"][class$="8"],
[class^="box"][class$="0"] { ... }
[class^="box"][class$="1"],
[class^="box"][class$="3"],
[class^="box"][class$="5"],
[class^="box"][class$="7"],
[class^="box"][class$="9"] { ... }
Use nth-child in order to achieve this.
HTML
<div class="box"></div>
<div class="box"><div>
<div class="box"></div>
<div class="box"></div>
CSS
.box:nth-child(odd) {
background-color: #000;
}
.box:nth-child(even) {
background-color: #FFF;
}
This seems so trivial, but how do I make the background color or image of a div span the whole window, but keep the content in a wrapper or set width? Almost like a footer, or nav.
Like on this page in the footer, the gray and the lack parts go the whole across the page but any type is still in a set width that matches the rest of the page. Some pages have these in the middle and divide their whole page using this technique.
Thanks for any help!
For a content wrapper, make the wrapper div fixed width and use margin: 0 auto to center it horizontally - http://codepen.io/anon/pen/kwebf
<style type="text/css">
body {
background: #ff0000;
}
div {
margin: 0 auto;
width: 500px;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
For fixed width content without a wrapper, put horizontal padding on your body - http://codepen.io/anon/pen/hoKdk
<style type="text/css">
body {
padding: 0 200px;
background: #ff0000;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
you could either wrap each section in an element (A) just to span across the page and prodive the background, and wrap the content in an element (B) to center it in A. like this:
<div id="main-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<style>
#main-wrap {
background:red;
}
#footer-wrap {
background:green;
}
.content {
width:300px;
margin:0 auto;
}
</style>
or you could use an advanced solution similar to this one.
it really depends on your design and requirments