|
CSS - Weird Problem With My Divs
Hello.
I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
Similar TutorialsI haven't tried this before, so if I'm way off beat, I'll take directions. What I'm trying to do is take a psd file and make a webpage from it. So far, I think I've got the images cut correctly. I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it. So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables. Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help. Both pairs of files validate. Here are the links for the: div based layout and it's css file AND table based layout and it's css file Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to. I'm feeling a little tortured over this one So I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE: Code:
#content {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 25px;
padding-left: 25px;
font-family: Verdana,Arial,helvetica, sans-serif;
font-size: 11px;
text-align: justify;
overflow: auto;
width: 543px;
height: 225px;
background-image: url(img/centerblank.jpg);
background-repeat: no-repeat;
_background-attachment: fixed;
}
FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? Hi, I have developed a page using only CSS with html. That means I have two files at the moment, layout.css and default.html. When I test it on my computer it works fine on IE6.0, Firefox, Netscape and Opera. I then decided to give it a go on the live internet. I created an account with geocities and uploaded all the required files. Now, when I loaded the page from IE6.0 the website is broken. Which means it is not displaying as it was when I was loading it from my computer. However Firefox and Opera are loading it fine. For me this is just weird, since if I download the html from the page (right click, view source), save it on my pc, and load it again from my computer (locally), it works fine on IE6.0 again. I know how I could solve this problem, however should I try solving this problem if my page is displaying fine on my computer (on the three browsers) but incorrectly on geocities? Ps: I am only using geocities for testing. Regards, Sim085 Hi guys, I'm at the end of my rope about this. I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems. I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it: http://www.teamsnowvalley.com/home.php (still a work in progress. just sayin) the css behind the column: #content .left { float:left; padding-right:9px; background:yellow; width:179px; voice-family: "\"}\""; voice-family:inherit } html>body #content .left { width: 179px; } Can anyone tell what i'm doing wrong? Many thanks, M So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer Hey guys, First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page. I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page. Here's my css: Code: /* basic elements */
body {
font: 8pt/16pt georgia;
color: #000000;
background: #AEAEAE url(images/butterflybg.gif) no-repeat top center;
}
p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h1 {
font: italic bold 14pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h2 {
font: normal bold 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h3 {
font: normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/* divs */
#header {
background: url(images/2006_Header.png) no-repeat;
width: 697px;
height: 127px;
padding: 0px;
margin: 0px auto;
}
#page {
width: 697px;
background: url(images/2006_WideExt.png) repeat-y center;
margin: 0px auto;
padding: 0px;
}
#nav {
background: url(images/2006_LNav.png) no-repeat left;
padding: 0px;
margin: 0px;
width: 175px;
height: 306px;
float: left;
}
#content {
background: none transparent;
margin-top: 0px;
}
#text {
}
#footer {
text-align: center;
}
And my html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div id="page"> <div id="nav"> </div> <div id="content"> <div id="text"> <p>put text here</p> </div> <div id="footer"> <a href="http://devshed.com" title="Forums">xhtml</a> </div> </div> </div> </body> </html> Am I overlooking something simple? Hey guys, I was wondering if you can help me out with something. On my blog I couldn't figure out how to get the page to align to the top, so I had to use a negative margin on the header. Well now it's fine in firefox, but looks all botched in IE. What a surprise, right? Can you take a look at help me figure out what I need to fix? www.illuminatedmind.net Thanks! I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance. http://www.manliusvillage.org/test/index.html The related CSS is below: Code:
#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}
#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}
#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #sublinks a {width:1%;}
#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}
I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 hey, i have a page that includes several flash files.. since its a translation company i have made a page in Russian but the upper flash menu refuses to appear in firefox but displays in internet explorer.. other flash files appear.. and i don't know if its related but in order to make the Russian appear correctly i had to save the php page as utf-8 with no BOM... appreciate any help since i am clueless as to this weird problem here is the page address : bit.ly/4SqdNw sorry new in the forums could not link it but copy and pase Hello, First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest. Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs. http://72.29.74.19/~majdkgf/tangerine/ NOTE: this doesn't happen to the last box The site is question is: http:// w ww.stolen-bikes.org/index4.php The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help! Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John I'm having some difficulty with the divs in my new site and was wondering if you could take a look and point out where I'm going wrong. My site is located at http://www.rockapedia.co.uk and the stylesheet at http://www.rockapedia.co.uk/style.css Much appreciated, Bailz. i am currently working on a layout that isnt working out for me... the xhtml for the website so far (very simple form) Code: <!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> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Tower C</title> </head> <body> <div id="header"></div> <div id="links"></div> <div id="body"> test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> </div> <div id="side"></div> </body> </html> and the css code i have is Code: #header {
position: absolute;
background-color: #a7e83f;
height: 124px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 20px;
}
#links {
position: absolute;
color: #000000;
background-image:url(images/linkbg.gif);
height: 23px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 144px;
}
#body {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #ede2da;
width: 57%;
left: 4%;
right: 39%;
padding: 0px;
top: 167px;
overflow: visible;
}
#side {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #dad1c9;
width: 35%;
left: 61%;
right: 4%;
padding: 0px;
top: 167px;
overflow: visible;
}
when the body div has more text than would fit it expands because of the overflow option... my problem is that the side div will not resize with the body div or visa versa any chance anyone knows how i can fix this? here is a link so you can see http://people.brunel.ac.uk/~dt08ajm/towerc/ I used a div for each individual section (id=section) and on the second row, instead of displaying three like the first row it displays one on the far right and then it displayes the other two on the next row in the left and center. It's probably a small problem but i cant figure it out. I know i coudl easily do this using an html table but i'm trying to divert from using tables on anything other than just text. Stylesheet code Code:
Body {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 8pt;
font-weight: bold;
color:#666666;
text-align: center;
min-width: 911px;
background-image:url('/images/sq.jpg');
}
p.footer {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 6pt;
color:#666666;
}
p.news {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 10pt;
font-weight:900;
color:#CCCC99;
}
p.title{
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 14pt;
font-weight:900;
color:#FF9933;
}
form {
font-family: "Lucida Sans Unicode",sans-serif;
font-size:8pt;
color:#666666;
}
#container{
width:911px;
height:100%;
border-style:solid;
border-width:1px;
border-color:#CCCCCC;
margin:0 auto;
text-align: left;
background-color:#FFFFFF;
}
#topbar {
width:911px;
height:299px;
padding-left:4px;
padding-right:4px;
padding-top:9px;
padding-bottom:9px;
background-color:#EEEEEE;
background-image:url("images/topbg.jpg");
}
#menubar {
width:911px;
height:34px;
border-width:0px;
}
#content{ width:911px;
min-height:502px;
border-color:#cccccc;
border-top-width:12px;
border-bottom-width:12px;
border-left-width: 0pt;
border-right-width: 0pt;
border-style:solid;
text-indent: 3px;
}
#section { padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
width: 240px;
float: left;
vertical-align: top;
border-width:0px; }
#rightbar{
width:174px;
height:263px;
}
#right_bot{
width:174px;
height:51px;
}
#footer {
width:780px;
height:50px;
}
#bottom {
width:600px;
height:35px;
}
#logos {
width:600px;
height:50px;
}
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #333333;
}
#port div{display:none;}
p.port {
font-size:8pt;
}
html code Code: <?xml version="1.0" encoding="iso-8859-1"?> <!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" xml:lang="EN" lang="EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Keywords" content="web development,php,scripts,web solutions,adrian wisernig,statc,cheap web design,mysql" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <title>Statc.net- php.mysql.flash, and other premium web solutions</title> </head> <body> <div id="container"> <div id="topbar"> <center><img src="images/s9.jpg" alt="" height="278" width="873" border="0"/></center></div> <div id="menubar"> <img src="images/layout_08.jpg" alt="" height="32" width="45" border="0"/><img src="images/layout_09.jpg" alt="" height="32" width="84" border="0"/><img src="images/layout_10.jpg" alt="" height="32" width="93" border="0"/><img src="images/layout_11.jpg" alt="" height="32" width="122" border="0"/><img src="images/layout_12.jpg" alt="" height="32" width="126" border="0"/><img src="images/layout_13.jpg" alt="" height="32" width="132" border="0"/><img src="images/layout_14.jpg" alt="" height="32" width="146" border="0"/><img src="images/layout_15.jpg" alt="" height="32" width="129" border="0"/><img src="images/layout_16.jpg" alt="" height="32" width="34" border="0"/></div> <div id="content"><center> <br> <div id="section"> <img src="images/services.jpg" alt="" height="159" width="230" border="0"/><br/>View the large array of services we offer to ensure sucess for your business. </div> <div id="section"> <img src="images/portfolio.jpg" alt="Portfolio"> Assure yourself by viewing our past work and clients. </div> <div id="section"> <img src="images/contact.jpg" alt="Contact"> View contact information for our company. </div> <div nowrap="true"></div> <div id="section"> <img src="images/partners.jpg" alt="Partners"> View our partners. </div> <div id="section"> <img src="images/about.jpg" alt="About Statc"> Find out more information about our company.</div> <div id="section"> <img src="images/resources.jpg" alt="Resources"> View and download free resources to help your conquest for sucess. </div> </center></div> </div> </body> </html> On the page http://www.thoroughbredmusic.co.uk, I'm trying to get the logo in the top left of the screen to appear above any other div on the page. At the moment, the div containing the logo is within the overall div which houses everything in the center, within the yellow border. index.php: Code: <body> <div id="wrapper"> <div id="logo"></div> style.css: Code:
div#wrapper
{
text-align:left;
margin:0 auto;
width:723px;
margin-top:120px;
background-image:url(mockup.jpg);
border-color:#FFFF33;
border-style:solid;
border-width:thin;
background-color:#000000;
background-repeat:no-repeat;
overflow:visible;
}
div#logo
{
background-image:url(logo.gif);
width:328px;
height:198px;
margin-left:-50px;
margin-top:-100px;
float:left;
}
I created this based upon firefox, and in firefox it appears as intended- just above and to the left, but overlapping, the top left side of the main div (#wrapper) In IE, however, it appears in the same position, but everything outside the main div is invisible. I tried a number of methods, including z indexes and overflow:visible within body{}, but with no luck. Anyone have any ideas? Thanks a lot, Tom (vectortorque.com). I am trying to use a container div for all of my content, but for some reason browsers like FF and Opera won't recognize that there is a difference between the main div for the page layout and the div for the content even though they have different ids. So if I set a top margin for the "contentcontainer" div, it is pulling down the "midbox" page layout div with it. I want to be able to move the "contentcontainer" div anywhere within the "midbox" div without moving the "midbox". Can someone tell me how to fix this please. Thanks. This is the main container div for the page: Code: div#midbox {
min-height: 100%;
width: 700px;
background-color: #FFFFFF;
margin-left: 270px;
margin-top: 0px;
border-left: 3px solid #FFF;
border-right: 3px solid #FFF;
}
This div should contain all of the content: Code: div#contentcontainer {
width: 500px;
height: 500px
text-align: left;
margin-top: 80px;
margin-left: 100px;
margin-right: 100px;
border: 1px solid black;
}
This is the actual code for the page: Code: <div id="midbox">
<div id="contentcontainer">
<div class="topdot"><div class="botdot"><div class="leftdot">
<div class="rightdot"><div class="bl"><div class="br"><div class="tl"><div
class="tr">
<table class="content" cellspacing="0" cellpadding="0">
<tr>
<td><img src="./resources/images/welcome.jpg" width="125" height="50" alt=""></td>
</tr>
<tr>
<td><p>(Content Removed)</p></td>
</tr>
</table>
</div></div></div></div></div></div></div></div>
</div>
</div>
OK, I've got this page currently: http://www.brianellisrules.com/stickers/pics/ (click on a state) I'm trying to add a caption to each thumbnail showing the date: http://www.brianellisrules.com/stic...s/testindex.php (click on a state, preferably NY or NJ since they have a lot of pics) In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row). In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice. How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)? Thanks! oh yeah, here's the CSS: div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/ div.float { float: left; text-align: center; } div.float p { text-align: center; margin: 0; font-size: 0.8em; } |
|||||||