Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed position Button

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #168452
    Ranjodh Singh
    Participant

    Hello friends, I want a button in right side neighborhood of a div container touching it with fixed position on every screen width/resolution without scrolling. Main requirement is that the button should always have the same position on all the responsive screen resolutions.

    #168453
    Paulie_D
    Member

    So what have you tried so far?

    Without at least some HTML / CSS we can’t know what it is you’re really after.

    Fixed “how” again?

    Will the ‘button’ scroll with the div or always stay on the same position?

    What is the purpose of the button?

    What about small screens?

    #168454
    Ranjodh Singh
    Participant

    Paulie thanks for reply

    Actually I want a button in right side of main container of whole site content.
    Button will be outside from container and with fixed position, button will not scroll.

    #168455
    Ranjodh Singh
    Participant

    I’m trying this, but it works only for fixed width

    <!doctype html>
    <html>
    <head>
    <style type=”text/css”>
    body{background: #ccc;}
    .wrapper {
    margin: 0 auto;
    height: 1000px;
    width: 650px;
    background: green;
    }

        button {
          background: none repeat scroll 0 0 #FF0000;
          border: medium none;
          color: #FFFFFF;
          height: 50px;
          left: 74%;
          position: fixed;
          top: 100px;
          width: 100px;
        }
    
    
    &lt;/style&gt;
    

    </head>
    <body>
    <button>Fixed Button</button>

    </body>
    </html>

    #168457
    Paulie_D
    Member

    That’s the nature of fixed positioning.

    If you need to position it relative to an element, you can’t use fixed positioning because that’s related to the viewport window.

    If you really need this functionality, you would need JS/JQ to, first, figure out the width of wrapper (assuming this is responsive) and then position the button according to the calculated value.

    #168458
    Ranjodh Singh
    Participant

    Thanks Paulie

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.