Jump to content

Search the Community

Showing results for tags 'floats'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 2 results

  1. Hi there, I have a scenario where I have no option but to absolute position some elements within a div. So I set the parent to position relative, the children absolute, job done. But if I float the parent container to the right, it jumps outside its wrapper. Is there a way to stop this happening? .wrapper{} .parent{position: relative; float: right;} .child{position:absolute;} <div class="wrapper"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> Thanks
  2. Hey guys! I hope you can help me out with this one. It's driving me insane today! I'm trying to create a WordPress theme for my website (don't worry, this has nothing to do with WordPress and more to do with CSS!) and I'm having trouble trying to keep the main content area going if the sidebar (which is floated right) is longer. Unfortunately the site is on my PC so I can't link to it, but I can show you what I mean: As you can see the main content just stops. Here is my CSS: body, html {height: 100%;}body {margin: 0px;padding: 0px;background-attachment: fixed;background-image: url(images/Middle_texture.jpg);background-repeat: repeat-x;}a, a:link, a:active, a:visited {color: #3066cd;text-decoration: none;}a:hover {text-decoration: underline;}.container {width: 995px;margin-right: auto;margin-left: auto;margin-top: 10px;font-family: Verdana, Geneva, sans-serif;font-size: 9pt;border: 1px solid black;}.header-logo {background-image: url(images/Header-top.png);background-repeat: no-repeat;padding-top: 20px;padding-left: 50px;height: 49px;}.content-body, .menu-bg {background-image: url(images/body-content-bg.png);background-repeat: repeat-y;padding-right: 30px;padding-left: 30px;clear: both;}.content-body {padding-top: 10px;height: 100%;}.header-banner {background-color: #FFF;background-image: url(images/body-content-bg.png);background-repeat: repeat-y;text-align: center;}.main-content {width: 675px;padding-bottom: 5px;height: 100%;}.post-info {height: 60px;margin-bottom: 5px;}.post-info h1 {margin: 0 0 5px 0;}.post-comments {float: right;font-family: Arial, Helvetica, sans-serif;padding-top: 10px;text-align: center;background-image:url(images/comments-bubble-bg.png);background-repeat: no-repeat;height: 54px;width: 78px;}.post-comments a {color: #FFF !important;text-decoration: none;}a.post-title {font-family: Arial, Helvetica, sans-serif;font-size: 14pt;color: #0c48a1 !important;text-decoration: none;}.post-content {border-bottom: 1px dashed #d1d1d1;margin-bottom: 5px;height: 100%;}.side-bar {width: 250px;height: 100%;float: right;}.footer {font-family: Arial, Helvetica, sans-serif;font-size: 9pt;padding-right: 30px;padding-left: 30px;background-image: url(images/footer-bg.png);background-repeat: repeat-y;min-height:100px;clear: both;}.footer h1 {font-size: 12px;color: #5f5f5f;}.footer ul {list-style-type: none;padding: 0;height: 100%;}.footer-about, .footer-nav, .footer-connect, .footer-meta {float: left;width: 200px;height: 110px;overflow: hidden;}.footer-nav, .footer-connect, .footer-meta {border-left: 1px solid #AAA;padding-left: 5px;}.copyright {text-align: center;padding-bottom: 5px;clear: both;}.logo {position: relative;top: -20px;width: 297px;margin-bottom: -20px;}.main-menu {text-align: left;font-size: 12pt;width: 959px;height: 102px;margin-left: -12px;background-image: url(images/koopa-banner.jpg);background-repeat: no-repeat;position: relative;}.main-menu ul {height: 29px;width: 945px;list-style-type: none;margin: 0;position: absolute;left: 0px;bottom: -2px;padding: 0px;}.main-menu li {float: left;padding-left: 5px;}.main-menu li a, .main-menu li a:visited {display: block;width: 100px;height: 29px;line-height: 29px;color: #FFF;text-decoration: none;text-align: center;vertical-align: middle;border-top-left-radius: 5px;border-top-right-radius: 5px;-moz-border-top-left-radius: 5px; /*Support for older Firefox versions */-moz-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px; /*Support for older Chrome and Safari versions */-webkit-border-top-right-radius: 5px;-o-border-top-left-radius: 5px; /*Support for older Opera versions */-o-border-top-right-radius: 5px;}.main-menu li a:hover {background-image: url(images/main-nav-bg.png);background-repeat: repeat-x;}li.current-menu-item a {background-image: none !important;background-color: #FFF !important;color: #000 !important;} The border is on ".container". If I set ".container" to "height: 100%", it actually shortens but if I leave it, it goes the full height of the screen which is very odd. Anyone have any ideas?
  • Create New...