Search the Community

Showing results for tags 'css3'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 44 results

  1. I have the following paragraphs with image on side and I need a "figcaption" on each image. I need to set the "figcaption" text with independent settings. How can i do this? My image.right and image.left class have this settings: .image.right { float: right; margin: 0 0 1em 1.5em; top: 0.25em; } .image.left { float: left; margin: 0 1.5em 1em 0; top: 0.25em; } And I need my figcaption to use this settings: font-size: 75%; font-style: italic; text-align: center; Also, I'm not sure if the figcaption tag is correctly used in my HTML: <p><figure><span class="image right"><img src="images/scania_old.jpg" alt="Stoptrans first truck" /><figcaption>Stoptrans first truck in the 80's</figcaption></span></figure>Vestibulum ultrices risus velit, sit amet.</p>
  2. Hello CSS community! I have a general question about slideshows with CSS3 and Javascript. The 'TryItEditor' examples all call http://www.w3schools.com/lib/w3.css which, when you look at it is a huge block of unintelligible (to me anyway) script. e.g.: ---------------------------------------------------------------------------------------------------------------------- "a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} dfn{font-style:italic}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px} img{border-style:none}svg:not(:root){overflow:hidden} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} hr{box-sizing:content-box;height:0;overflow:visible} button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold} button,input{overflow:visible}button,select{text-transform:none} button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} [type=checkbox],[type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-input-placeholder{color:inherit;opacity:0.54} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}" -------------------------------------------------------------------------------------------------------------------------- (this is a small portion). I use html instead of a website editor such as Joomla or Dreamweaver as I am a minimalist and don't like putting huge amounts of code onto the server (giving away my age here). Is there some way that I can produce slideshows myself without recourse to something like this stylesheet. Looking through it, it seems to have catered for every concievable slideshow arrangement that will ever be required. I'd prefer to simplify things if I can. Thanks Max
  3. Dear all, Since bootstrap has container and container-fluid classes, does a heavy lifting, and is easy to use, I am inclined to think that css's media query has no advantage. I'd appreciate sharing any opposite opinion that sees usefulness/advantage in media queries.
  4. So So I'am Thinking Of A Way To Detect CSS3 Browser Support Using Client-Side Scripting (JavaScript),I Know There's A Library Out There To Handle Such Situations,But I Need A Code Or A Hint To Do This Without Any External Libraries. Any Suggestions Would Be Appreciated...
  5. I Know That Parameters In The 2D Matrix Function Are: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()). But What Does Those (n)'s Parameters Mean In The 3D Matrix Function? matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
  6. I Can't Understand The Purpose Of That Property,And What Is The Difference Between animation-fill-mode:none; And animation-fill-mode:forwards;?...
  7. How to use the border-image-width property in border-image shorthand? If i try this: border-image: url(border-image.png) 40 30 round; In this i am using 30 as border-image-width but the browser rendering it as the second parameter for the border-image-slice.
  8. Good afternoon Can someone explain to me the difference between these properties, please? As for me are one and the same. Regards: Marek
  9. To sum things up... I'm looking for as much reviews as possible. I've been working on minestatus for the last year now. I've come across many programming roadblocks and developments to further improve the quality, user impression, user interface, and user engagement. If you guys have any ideas on how to make my site better in any of those categories that would be amazing. Thank so much! Link to site: http://minestatus.co Site Name: MineStatus Site Description: MineStatus is a new social sharing plateform I've created. It allows users to make there own profiles, upload content, display the content. You can even share your content on MineStatus to almost any other social network without flaw. I plan on making a developer site to go along with it to share my practices with everybody. Site Owner/Developer: Myself, I am the lead developer and creator of MineStatus Network Site Address: Here is the link to the site : https://minestatus.co Extra Info: Some technologies I've already integrated: Open Graph Protocol* Twittercards* *for those who don't know here is a link, Open Graph Protocol, Twittercards.
  10. Hi, I am trying to come up with a preloader. The problem is none of the animations start. What I am trying to achieve is the following sequence: preloader_wrapper fade in, then fade out as soon as the document is loaded. JS: jQuery(document).ready(function($) {/* * Preloader */$('#preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({ -webkit-animation-play-state: 'running'; -moz-animation-play-state: 'running'; -o-animation-play-state: 'running'; animation-play-state: 'running';});});}); CSS: .preloader_wrapper { position: absolute; top: 50%;}.preloader_fadein { -webkit-animation: preloader_fadein 2s ease; -moz-animation: preloader_fadein 2s ease; animation: preloader_fadein 2s ease;}@keyframes preloader_fadein { from { opacity: 0; left: 45%; } to { opacity: 1; left: 50%; }}.preloader_fadeout { -webkit-animation: preloader_fadeout 2s ease; -moz-animation: preloader_fadeout 2s ease; animation: preloader_fadeout 2s ease;}@keyframes preloader_fadeout { from { opacity: 1; left: 50%; } to { opacity: 0; left: 55%; }}.header * { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;}
  11. Started on the 2D tutorial and could not get animation to work - IS this explained further along in the animation section of CSS3? Or, is animation in JavaScript? I was hoping it wasn't a computer setting problem because when I was in the CSS3 2D transformation tutorial, the animation was not working. Thanks Rich
  12. Hello, I want ask about css3 animation in exercise 6 in css3 animation using (animation-delay: ease-in-out;) in answer exercise why not use animation-timing-function? Thanks,
  13. Hello everyone! My name is Ron Kane and I am an accomplished web developer and technical writer having done many technical manuals, general information and "how-to"s in the Content Management field. I have significant success in utilizing the Adobe Suite and Microsoft SharePoint products with respect to creating content and following industry based style guides. My biggest success to date was working with one of my past company's Chief of Staff for a SVP in revamping their entire Intranet portal. This portal went from being unprofessional looking and having no web traffic to being very professional looking and increasing the traffic to it ten-fold. Right now, I'm reading through the HTML tutorials in preparation for my first ever HTML certification through here to gain recognition for my commitment to improving my skills and to meet with fellow web developers on here. Ask away if you have quesitons and I'm glad to be on here! Ron
  14. Hey everyone,Trying to make a website for learning purposes and I am totally lost. I'm teaching myself CSS3.0 and HTML 5.0 having learnt CSS2 and HMTL4 many years ago. None and no CSS I write is ever applied to the HTML5 webpage despite being referenced and both the HTML and CSS files being in the same folder together. And yes, I've Googled a lot and looked up my old textbooks and am still super stuck...see attached or look below for the code:PS: Using Microsoft Expression Web 4 (trial) OxfordEngineering.html<!DOCTYPE html><html><meta charset="UTF-8"><title></title><head><link rel="stylesheet" type="text/css" href="Oxford_engineering_CSS.css"></head><body>This is my website!</body></html>Oxford_engineering_CSS.css<div id="slider">div#slider { width: 80%; max-width: 3000px; }<figure><img src="Images/Edited/Engineer1.jpg" alt="Engineer1"><img src="Images/Edited/Engineer2.jpg" alt="Engineer2"><img src="Images/Edited/Engineer3.jpg" alt="Engineer3"><img src="Images/Edited/Engineer4.jpg" alt="Engineer4"></figure>div#slider figure {position: relative; width: 500%;margin: 0; padding: 0; font-size: 0; text-align: left;}figure#imagestrip img {width: 25%; height: auto; float: left;}div#slider {width: 80%; max-width: 3000px; overflow: hidden}</div>body {background-color: #b0c4de;}
  15. I want to create a dynamic header like the image attached... By dynamic i mean the borders should adjust according to the length of the text Help Appreciated
  16. http://jsfiddle.net/makzan/RE2JJ/ The coding in the above link has fixed height and width (180 X 180 i.e Square)...I have images which are not square...they are either landscape or portrait....i tried to make width and height dynamic so that it could fit any size of image but i couldn't do it....Can anyone help me out,... Please.. Help Appreciated
  17. Is there any way that we can validate our form fields with CSS3. I know that with HTML5 we can.
  18. Ok, so i could not find this anyways, i don't know maybe i did not loot hard enought but seems faster to just ask here instead since i think this one u all might know except me hehe . I'm trying to expand my knowledge inside CSS Mobile websites, but not only mobile also bigger screens like TV for screens (like mine etc) and so on. I was thinking, does it really "NEED" to be specific numbers before the mobile or screen reacts to the browser? Example: We know that ipads (portrait) uses 768px as a minimum and maximum as 1024px... this is what i have so far: @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { #wrapper { margin: 0 auto; min-width: 768px; max-width: 1024px; background-color: #485778; } } And i'm very surten that i got this one right (tell me if i'm wrong)... however, what if i were to build my "own" design? A screen that has something that is between that number or just 1px "above" the 1024px.. do i just add in another pixel like this 1025px and then it will react as normal? My bottom line question is this, does the media query only react on specific numbers related to devices OR is it also possible to related this to custom build devices and screens? Hope someone can answer as always, thanks!
  19. I find this tutorials very useful and I think it will be really handy if you do Bootstrap tutorial. On site getbootstrap.com is nice documentation, but some things aren't explained so well.Who think this is good idea? Thanks.
  20. Hi, First, i need to tell you that i am not experienced in CSS or coding myself but i have fairly good overall technical knowledge. I'm in need of a very simple full screen slideshow consisting of 4 images. I found a CSS3/javascript for this here: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ I've tried to tweak it a bit to suite my needs. However, its not really optimal. I would like to change it so it doesnt fade between the images, a fast cut would be better. Also the original was for 6 images but i tried to change it to a 4 image slideshow but im not sure i did it correctly. Can someone help me with these two issues? thanks guys! the HTML looks like this: <!DOCTYPE html><!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--><!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--><!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Claires slideshow Screen 1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" /> <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style1.css" /> <script type="text/javascript" src="js/modernizr.custom.86080.js"></script> </head> <body id="page"> <ul class="cb-slideshow"> <li><span>Image 01</span><div></div></li> <li><span>Image 02</span><div></div></li> <li><span>Image 03</span></div></li> <li><span>Image 04</span><div></div></li> </ul> </body></html> and the CSS looks like this: .cb-slideshow,.cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; }.cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 72s linear infinite 0s; -moz-animation: imageAnimation 72s linear infinite 0s; -o-animation: imageAnimation 72s linear infinite 0s; -ms-animation: imageAnimation 72s linear infinite 0s; animation: imageAnimation 72s linear infinite 0s; }.cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }.cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; }.cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); -webkit-animation-delay: 36s; -moz-animation-delay: 36s; -o-animation-delay: 36s; -ms-animation-delay: 36s; animation-delay: 36s; }.cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); -webkit-animation-delay: 54s; -moz-animation-delay: 54s; -o-animation-delay: 54s; -ms-animation-delay: 54s; animation-delay: 54s; }/* Animation for the slideshow images */@-webkit-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-moz-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-o-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-ms-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }} /Joel
  21. On my blog there is a carousel slider like below image:- It was not working so I tried to use the console feature of chrome and a caught a problem,it was in this following form:- <script> (function($) { $(document).ready(function(){ $("#carousel .content").jCarouselLite({ Uncaught typerror: Undefined is not a function auto:0, scroll: 1, speed: 400, visible: 5, start: 0, circular: false, btnPrev: "#previous_button", btnNext: "#next_button" }); })})(jQuery) </script> It's id is " technopcarea.blogspot.com/:1018" Now what should I do,I rechecked the script,its correct.
  22. I am designing a website which is responsive with css3 media queries. As we know that css3 is not supported in ie8 or less. So what should be the strategy for me to handle the website in ie8 or less. Thanks
  23. I've just been playing with CSS media queries and transitions, to apply different layouts to different screen sizes, and I came across an unexpected effect when testing in Internet Explorer 11 and Google Chrome. Firefox doesn't seem to be affected, and reacts in the way I would expect. In this example there are three div elements, one of which is a container. Here is the HTML. <div id="container"> <div id="heading">HEADING</div> <div id="links"> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> <li>Link 5</li> </ul> </div></div> I applied a CSS transition that would resize the height of both div elements, as well as the font within them; all in just 0.5s. Here's the CSS. /* Below is the default styles */html, body, div, img, p, span, header, nav, ul { margin: 0 auto; border: 0; padding: 0; font-size: 1em; position: relative; -webkit-transition: height 0.5s ease, font 0.5s ease; transition: height 0.5s ease, font 0.5s ease; } ul { list-style-type: none; }li { display: inline; }#container { } #heading { width: 100%; height: 200px; background-color: red; font-family: "segoe ui light"; font-size: 50px; color: white; }#links { width: 100%; height: 50px; background-color: blue; font-family: "segoe ui light"; font-size: 30px; color: white; }/* Below is the styles applied to medium sized displays (tablets etc.) */@media screen and (min-width: 701px) and (max-width: 900px) { #heading { height: 100px; font-size: 40px; }#links { height: 40px; font-size: 20px;} }/* Below is the styles applied to small displays (mobile phones etc.) */@media screen and (max-width: 700px) {#heading { height: 50px; font-size: 30px; } #links { height: 30px; font-size: 15px; }} The height of both div elements are applied simultaneously, with the transition completing in 0.5s. However, the amendment to the size of the font doesn't apply simultaneously and, in fact, were amended almost as if they were triggered separately at different times. That is, the first div was affected by the change, which took 0.5s. Then, the second div was affected by the change, which took an additional 0.5s. So, the font transition took a total of 1s to complete. But, by definition, I would have expected the transition to be applied to both div elements at the same time and to complete within 0.5s just like the height. Is anyone aware of any reason why the font transition may be interpreted differently to the height transition?
  24. Just see and enjoy it. http://jsfiddle.net/composite/6zr2q/embedded/result/ HOW TO: just click anywhere to show or hide and enjoy aero effects. BROWSERS: Firefox (All versions exclude blur effects but looks good like windows 8.) Chrome 19 and above. Safari 6 and above (sorry windows safari users.). Opera 15 and above (Only affect by webkit). Sorry for IE users. IE All version include 11. I'm finding figure out for IE looks like Firefox. TECH: Effects by CSS3 Only. Javascript is just for toggle class. that's all. transition used for show and hide animation. transform used for show and hide effect. filter:blur used for blurred window effect.
  25. I am having trouble keeping my content within the divs or sorted in column. They seem to be ever expanding. I have tried have 3 divs with each set 400px each set to float within a 1200px container. and thought this would contain them but they appear in one line. Also tried using the css3 columns but that is also doing the same thing. I have no idea where i went wrong? This is the HTML <!DOCTYPE html><head><html><title>Untitled Document</title><link href="mainstylesheet.css" rel="stylesheet" type="text/css" /><link href="textcss.css" rel="stylesheet" type="text/css"><link href="infotray.css" rel="stylesheet" type="text/css"><meta charset="utf-8"></head><body><div class="wrapper"><div class="header"><div class="headeropacity"></div><div id="navbar"><ul id="nav"><li><a href="#DKSND.asp">HOME</a></li><li><a href="#news.asp">NEWS</a></li><li><a href="#about.asp">COURSES</a></li><li><a href="#about.asp">ABOUT US</a></li><div id="pointer"></div></ul> </div></div><div class="content1"> <h2>Heading</h2> <p>wjkdnsidn </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></div><div class="content2"> <h2>Heading</h2><div class="rollinfotray"><div class="infobox1"></div><div class="infobox2"> </div><div class="infobox3"></div><div class="infobox1"></div></div></div><div class="content3"><div class="contentcontainer"><div class="left"> <h2>Heading</h2> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></div><div class="middle"> <h2>Heading</h2> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div><div class="right"> <h2>Heading</h2> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div> </div></div><div class="footer"> <h2>Footerlinks</h2> <p> </p> <div class="contentcontainer"><p class="three-col">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p> </p> <p> </p> <p> </p> <p> </p> </div></div></div></body></html> And related CSS @charset "utf-8";@import url("navigationcss.css");html, body { margin: 0; padding: 0; white-space: nowrap;}.header,.content1,.content2,.content3,.footer{ float: left; width: 100%; text-align:center; line-height:130%; overflow:hidden; }.contentcontainer{ width: 1200px; margin-right: auto; margin-bottom: auto; }.left,.middle,.right{width:400px;float:left;}.wrapper { height: 100%; width: 100%;}.header { }.content1 {}.content2 { background-color: #222;}.content3 { background-color: #999; }.footer { background-color: #CCC;} @charset "utf-8";h2 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 20pt; color: navy; padding-top: 12px; padding-bottom: 3px; opacity:2;}.three-col { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px;}