Jump to content

Search the Community

Showing results for tags 'absolute positioning'.

  • 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 4 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. Hi, I am attempting to create a form control with an input field in the centre, and plus/minus buttons either side. The buttons have an absolute position set so they remain at either edge of the parent container, with the input (ideally) adjusting in with to make up the remaining width. Only in practice it doesn't. I can't really set a width to the input as it needs to adjust the width to for different screen widths. The code: .responsive-container{position: relative; width: 100%;} .minus-button{position: absolute; left: 0; width: 40px;} input{position: absolute; left: 40px; right: 40px; width: auto;} .plus-button{position: absolute; right: 0; width: 40px;} <div class="responsive-container"> <a class="minus-button">-</a> <input> <a class="plus-button">+</a> </div> Hopefully you can see what I am trying to achieve here. If I set the input to 100% width, it goes beyond the container because it has been budged by 40px. Setting it's width to auto doesn't seem to fill the space correctly. Any pointers here appreciated!
  3. ben03

    Fixed sidebar issue

    Hi there, I am trying to build an expanding sidebar menu that is absolute positioned to the left of the screen and spans top to bottom. I don't want to be using fixed position, as the sidebar would have elements that would be hidden beneath the fold on mobile landscape that wouldn't be accessible. So it needs to scroll with the page content. However when using absolute positioning, the container finishes wherever the bottom of the browser is, and is simply cut off there, which looks bad if the rest of the screen content requires scrolling. What I am using: .expanded-menu, .collapsed-menu { position: absolute; overflow: hidden; background-color:$dark-blue; top: 0px; left: 0px; bottom: 0px; z-index: 5; @include transition (all 0.5s ease-in-out); } .collapsed-menu { width: 50px; } .expanded-menu { width: 170px; } Am not sure if this is asking the impossible, or whether the answer is staring me in the face and I've looked too long at it. Help appreciated here Thanks
  4. Hello, can you please advise on how to center the images of the individual books on this page? http://www.aidanandrewdun.com/books.html As a beginner, I got into the habit of absolute positioning - I apply it to almost everything and I’m not sure if it’s a good idea…and it's somehow doesn't work here anyway. Thank you!
  • Create New...