I'm trying to split my footer so that there is left aligned and right aligned text. I have the following but the two elements are displaying one after the other:
#footer {
clear: both;
background-color: #330066;
padding: .5em;
font-size: 0.8em;
color: #fff;
}
#footer p .left {
text-align:left;
float:left;
}
#footer p .right {
float:right;
text-align:right;
}
<div id="footer">
<p class="left">
Copyright © 2009
</p>
<p class="right">
Designed by xxxxxx
</p>
</div>
Should be really simple I'm sure but I just can't get it working - can anyone offer any advise please?
Thanks
Helen
You're using footer p .right and not footer p.right (note the space character). This means the .right and .left classes don't apply to the paragraphs, but to descendant elements inside the paragraph. Or it could also mean a typo, causing your CSS to fail :)
Please copy your HTML here, so we can help you better.
Edit: I see you've now posted your HTML. My assumption turns out to be correct. Get rid of the spaces between p and .left/.right. Also, if you're floating the paragraphs anyway, you can omit the text-align properties.
#footer p.left {
float: left;
}
#footer p.right {
float: right;
}
Edit: In response to your comment: it should work. Here's a little test case:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test case for the CSS footer problem</title>
<style>
#footer { width: 300px; outline: 1px solid red; }
#footer p.left { float: left; }
#footer p.right { float: right; }
</style>
</head>
<body>
<p>See http://stackoverflow.com/a/867599/96656 for details.
<div id="footer">
<p class="left">Copyright © 2009</p>
<p class="right">Designed by xxxxxx</p>
</div>
</body>
</html>
have you tried setting a width for the left and right, eg 50% each
No need to remove the clear:both on the #footer as suggested before.
As said Mathias Bynens you must write "p.left" instead of "p .left"
You will need a clear both after the two paragraphs and end up with something like :
#footer {
clear: both;
background-color: #330066;
padding: .5em;
font-size: 0.8em;
color: #fff;
}
#footer p.left {
text-align:left;
float:left;
}
#footer p.right {
float:right;
text-align:right;
}
<div id="footer">
<p class="left">
Copyright © 2009
</p>
<p class="right">
Designed by xxxxxx
</p>
<div style="clear:both"></div>
</div>
As paragraphs are block level elements, if you wish them to be displayed side by side you should remove the floats and set them to be inline:
footer p.left {text-align:left; display:inline; }
footer p.right {text-align:right; display:inline; }
Also I assume that should be either #footer or .footer beforehand?
Problem is that on your #footer you have a clear: both; which kills all floats.
It would be better if you have:
#footer {
background-color: #330066;
padding: .5em;
font-size: 0.8em;
color: #fff;
width: 100%;
overflow: hidden;
}
p.left { float: left; }
p.right { float: right; }
The width: 100%; and the overflow: hidden; will fix your problem, as it clears the floats after they are made.
With the code above you will be able just to have:
<div id="footer">
<p class="left">Copyright © 2009</p>
<p class="right">Designed by ****</p>
</div>
Related
I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...
When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...
There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...
The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?
HTML
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<br> UNDER CONSTRUCTION!
</p>
</div>
</div>
</body>
CSS
body
{
margin:0;
background-color: seagreen;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
I changed you HTML to enclose your text in a span tag and removed the br:
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.
#content span {
display: block;
margin: 0;
line-height: .8;
}
And removed the position attribute from here:
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
Here is a sample fiddle
UPDATE
It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.
I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}
Here is the updated fiddle
I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you.
CSS
body
{
margin:0;
background-color: seagreen;
}
img{
display: block;
margin: auto;
width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
margin-top: 200px;
padding-top: 10px;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
<div id="container">
<div id="content">
<img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction">
<br>
<p>UNDER CONSTRUCTION!</p>
</div>
</div>
I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE.
*{
border: 0;
margin: 0;
margin: 0;
}
.container {
font-size: 0;
}
.container span {
font-size: 35px;
background: #ff8ea1;
padding: 0;
margin: 0;
}
.container span.no-space {
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
}
<div class="container">
<span>Under Construction</span>
<div style="height: 20px;"></div>
<span class="no-space">Under Construction</span>
</div>
TRY THIS ONE!
In the following code from: http://6.470.scripts.mit.edu/css_exercises/exercise5.html
<html>
<head>
<style type="text/css">
.wrapper1 {
width: 65%;
margin: 0px auto 0px auto;
border: 1px solid;
text-align: center;
background: #eeeeee;
}
.wrapper2 {
clear: left;
width: 80%;
margin: auto;
border: 1px solid;
background: #111111;
}
.p1 {
margin: 20px;
font-size: 70px;
}
.p2 {
font-size: 50px;
}
.link-gr {
list-type: none;
}
.link-gr li{
float: left;
}
.link-gr li a{
display: block;
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<div class="wrapper2">
<p class="p1">MIT 6.470</p>
<p class="p2">Learn Web Programming this IAP</p>
<ul class="link-gr">
<li>Comprehensive Curriculum</li>
<li>Insightful Guest Lectures</li>
<li>Interaction with Sponsors</li>
<li>$30,000+ in Total Prizes</li>
</ul>
</div>
Copyright © 2012 MIT 6.470
</div>
</body>
the ul.link-gr links are falling outside the div. I mean everything excluding the links are wrapped inside div.wrapper2 with border and black-ish background but the links are placed outside the box (like outcast-ed). This is very strange. Some explanation from your side will be highly appreciated.
Thanks
I would think this is a float problem: your code contains
.link-gr li{
float: left;
}
The problem is that its container is not float: left, which means that the list items are free to go anywhere. Try adding float: left to the .link-gr as well:
.link-gr{
float: left;
}
This may solve the problem. Fiddle: http://jsfiddle.net/abZHK/1/
Ah floats...
Explanations
See this old article from P.I.E: Clearing floats (IE/Win is IE version 6 there)
Solution
Apply this modern clearfix (on parent of the non-contained floats)
I do NOT want a FIXED footer, I need a STICKY footer.
My sticky footer worked fine at first but when the content is at a certain height, there is a margin between the footer and bottom of the page.
Try messing with the browser height and content div height, and you should see where the problem is.
It leaves an awkward margin between the footer and the bottom of the page.
Thank you in advance.
CSS Code:
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
</body>
Just add position: fixed; to your footer class in your css:
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed; /*add this new property*/
}
-----UPDATE-----
If you need a footer that stays at the bottom you need two things:
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
position: relative; /*and you need to add this */
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: relative; /*use relative position*/
}
#wrapper {
/*height:100%;*/ /*you need to comment this height*/
margin: 0 auto;
min-height: 100%;
min-height: 700px; /* only for Demo purposes */
padding-bottom: -30px;
width: 985px;
position: relative; /*and you need to add this */
}
#footer {
background: #000;
border-top: 1px solid #00F0FF;
height: 30px;
margin-top: -30px;
padding: 5px 0;
width: 100%;
position: relative; /*use relative position*/
}
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<span>About Us</span>
<span> | </span>
<span>Contact Us</span>
<span> | </span>
<span>Home</span>
</div>
Add position: fixed to the footer class. Note it doesn't work in certain old versions of Internet Explorer. http://jsfiddle.net/kAQyK/
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
position: fixed;
bottom: 0px;
left: 0px;
}
See http://tagsoup.com/cookbook/css/fixed/ for examples how to make it also work in IE
I was having the same issue for ages and nothing seemed to work then I realised that the whitespace I was seeing under my footer was not actually whitespace at all but the overflow from my footer with white text on a white background. All I had to do was to add:
overflow:hidden
to my footer in my css.
If anyone wants the solution that worked for me then it is the same as http://getbootstrap.com/2.3.2/examples/sticky-footer.html but with the added overflow:hidden
DISPLAY TABLE = NO JS and NO fixed height!
Works in modern browsers ( IE 8 + ) - I tested it in several browser and it all seemed to work well.
I discovered this solution because I needed a sticky footer without fixed height and without JS. Code is below.
Explanation: Basically you have a container div with 2 child elements: a wrapper and a footer. Put everything you need on the page ( exept the footer ) in the wrapper. The container is set to display: table; The wrapper is set to display: table-row; If you set the html, body and wrapper to height: 100%, the footer will stick to the bottom.
The footer is set to display: table; as well. This is necessary, to get the margin of child elements. You could also set the footer to display: table-row; This will not allow you to set margin-top on the footer. You need to get creative with more nested elements in that case.
The solution: https://jsfiddle.net/0pzy0Ld1/15/
And with more content: http://jantimon.nl/playground/footer_table.html
/* THIS IS THE MAGIC */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#container,
#wrapper {
height: 100%;
}
#container,
#wrapper,
#footer {
width: 100%;
}
#container,
#footer {
display: table;
}
#wrapper {
display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */
html {
font-family: sans-serif;
}
#header,
#footer {
text-align: center;
background: black;
color: white;
}
#header {
padding: 1em;
}
#content {
background: orange;
padding: 1em;
}
#footer {
margin-top: 1em; /* only possible if footer has display: table !*/
}
<div id="container">
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
<br>
<br>some more content
<br>
<br>even more content
</div>
</div>
<div id="footer">
<p>
FOOTER
</p>
<br>
<br>
<p>
MORE FOOTER
</p>
</div>
</div>
I am trying to make the following design for a web site.
The last time I made a web site, everything was usually done using a bunch of tables to align the element on the page. I can understand that this is not how we roll in 2011, where it's all about the css.
I have tried to implement the following design using css, but I have not succeeded.
Can someone point me in the right direction?
The layout is located here: http://imageshack.us/photo/my-images/828/layoutcx.png/
Edit:
I forgot to include the CSS and HTML I had produced so far. (The wife distracted me by shopping orders.) Sorry about that. I never intended for anyone to do my work, although I can tell that someone has already done it. Very helpful indeed, thank you!
My issue was with the "float" attribute/property.
Although I can, by dissection of the various suggestions, tell that there are things like !important that really are important.
You start from largest, end with smallest, go from top, to bottom, as that is way, you should understand HTML.
I won't show you any serious tricks or CSS3 fastest-way-to-do stuff, that you will need to learn by yourself.
With such a tasks, you do, like you would write a document, at first, you write a content, second, you format it.
Begin with basic HTML, sand continue with some basic construction of frames:
<!DOCTYPE HTML>
<html>
<head>
<title>My layout</title>
</head>
<body>
<div id="zones_theSite">
<div id="zones_unb"><p>Universal navgiation bar</p></div>
<div id="zones_body">
<div id="zones_header"><p>Header</p></div>
<div id="zones_fnnb"><p>Flashing news navigation bar</p></div>
<div id="zones_fn"><p>Flashing news</p></div>
<div id="zones_main">
<div id="zones_lsb" class="column"><p>Left side bar</p></div>
<div id="zones_mp" class="column"><p>Main page</p></div>
<div id="zones_rsb" class="column"><p>Right side bar</p></div>
<div class="clearfix"></div>
</div>
<div id="zones_footer"><p>Footer</p></div>
</div>
</div>
</body>
</html>
And now, with formatting. CSS can do anything you like, with divisions (DIV).
<head>
<title>My layout</title>
<style type="text/css">
body {
background-color: #616161;
margin: 0;
}
div { position: relative; }
p {
margin: 0; padding: 3px;
color: #FFF;
text-transform: uppercase;
font-family: Verdana, sans-serif;
font-weight: bold;
}
.clearfix { clear: both; }
#zones_unb {
width: 100%;
background-color: #000;
line-height: 2em;
text-align: center;
}
#zones_body {
width: 1000px;
margin: 0 auto;
background-color: #616161;
}
#zones_body div {
width: 100%;
text-align: center;
}
#zones_header {
height: 100px;
background-color: #E20000;
}
#zones_fnnb {
background-color: #0078FF;
line-height: 2em;
}
#zones_fn {
height: 80px;
background-color: #003ACE;
}
#zones_main p {
color: #000;
}
#zones_main {
width: 984px!important;
padding: 5px;
background-color: #FFF;
border: 3px solid #000;
}
#zones_main .column {
float: left;
}
#zones_lsb, #zones_rsb {
width: 200px!important; height: 300px;
border: 3px solid #000;
padding: 5px;
}
#zones_mp {
width: 552px!important;
}
#zones_footer {
height: 80px;
background-color: #3FCE00;
}
</style>
</head>
Now, just replace last HEAD part with HEAD part in first HTML code and done. Next, you should seperate CSS to single .css file and tune it to your liking. :)
I think no one will give you the complete design, it's some heavy work.
You should have a look a this positioning tutorial to begin with. Then, if you have a precise question, come back here ;)
To create that layout and understand it, you are best off learning CSS as soon as possible rather than asking someone to create it for you. I'd recommend: https://developer.mozilla.org/es/learn/css
As a right direction push - the html would look something like:
<div id="navBar"></div>
<div id="middleBody">
<div id="header"></div>
<div id="newsBar"></div>
<div id="flashingNews"></div>
<div id="mainPage">
<div id="leftBar"></div>
<div id="rightBar"></div>
</div>
<div id="footer"></div>
</div>
And the CSS would be similar to:
#navBar {
width:100%;
height:30px;
}
#middleBody {
margin:0 auto; /* This will centre the middle body */
}
#header {
height:200px;
}
etc...
Such designs are easy to setup using CSS frameworks:
960 Grid System: http://960.gs/
Blueprint Framework: http://www.blueprintcss.org/
Something like this:
<html>
<head></head>
<body>
<div style="width:100%; height: 150px; background:#f00;">Header</div>
<div style="width:100%; height: 20px; background:#00f;"">Nav</div>
<div style="width:100%; height: 150px; background:#005;"">News</div>
<div style="width:100%;">
<div style="width:200px; float:left; height: 300px; border: 1px solid #000;">Left col</div>
<div style="width:200px; float:right; height: 300px;border: 1px solid #000">Right col</div>
Center text
</div>
<div style="width:100%; height: 150px; background:#0f0; clear: both;"">Footer</div>
</body>
</html>
This reproduces your layout reasonably well, with all the css inlined.
it is briefly something like:
HTML:
<div id="universial-navigation"></div>
<div id="wrapper">
<div id="header"></div>
<div id="navigation-bar"></div>
<div id="flashing-news"></div>
<div id="main">
<div id="left-sidebar"></div>
<div id="content"></div>
<div id="right-sidebar"></div>
</div>
<div id="footer"></div>
</div>
CSS:
* { margin:0; padding:0 }
#universial-navigation { width:100%; height:20px }
#wrapper { width:960px; margin:0 auto }
#header { width:960px; height:200px }
#navigation-bar { width:960px; height:40px }
#flashing-news { width:960px; height:150px }
#main { width:960px; height:100px }
#left-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#right-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#content { position:relative; float:left; width:600px; overflow:hidden }
#footer { width:960px; height:100px }
I have a header bar that spans horizontally across my web page, which is comprised of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works just great, except for the fact that the div tags are out of order in the HTML code, which I don't like. If I order the div tags by placing them Left, Center, and Right, in the HTML, then the Right div just disappears from the webpage! I'm guessing that it has something to do with the float and text-align attributes having a conflict.
Anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
Try float: left; on #centerTop or display: inline on all three without any floats.
This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:
#leftTop
{
float: left;
}
#rightTop
{
float: right;
}
#centerTop
{
float:left;
text-align: center;
}
I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1
All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?
I am running your HTML and CSS of FF 3.0.10.
When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.
My solution is proposed below (you'll notice I have some additions and some best-practice techniques).
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
CSS CODE:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
So you'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).
I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.
You can then add whatever content you want in the RANDOMCONTENT div.
Hope this helps :)
I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then put <br style="clear:both"/> right before you close your top-bar div.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width's defined like this, however.
Another solution:
Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals can be used to split code for IE > 5 and IE < 7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
Use relative positioning to swap the positions of the divs after they have been floated:
The HTML
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
The CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I use the same process in my Perfect Liquid Layouts to change the column source ordering.