Search code examples
htmlcsspositionfixed

CSS position: fixed

I'm having difficulty fixing a problem in my html/css code for the position attribute. I want to have a word "Social" to the right and bottom with a fixed position so I can scroll with it in the same spot. I can't even get it to the right and bottom regardless of what positioning it is. Please tell me where my problem may be stemming from so I can fix it.

 <head>
    <meta charset="utf-8" />
    <title>Template_</title>
    <!--><meta name="generator" content="Geany 1.27" /></-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
	.container{
		position:relative;
		width= 100%;
		height= 100%;
		overflow=scroll;
	}
	
	.banner{
		<!--></-->
		position:absolute;
		margin:5px;
		width:90%;
		right: 0px;
	}
	
	.banner .test{
		<!--></-->
		font-weight: 900;
		font-size: 3em;
		margin:10px;
		font-variant: small-caps;
	}
	
	.banner .logo{
		<!-->controls images within banner</-->
		position: ;
	}
	.social_bar{
		width: 300px;
		border: 3px solid #73AD21;
	}
	#social_strip{
		<!-->post button on either left or right to remain fixed 
		through scrolling
		position:fixed;
		right:0;</-->
		position: fixed;
		bottom: 0px;
		right: 0px;
	}
	.content_container{
		<!-->contain all content within container, relative to
		overall container</-->
		position: relative;
		margin:5px;
		padding:5px;
	}
    </style>
    </head>
    <div class="social_bar" id="social_strip">social</div>
    <body class="container">
	    <div class="banner">
		     <p>Banner</p>
		    <div class="test">
			    <p>Test</p>
		    </div>
	</div>
	<div class="content_container">
		<p>Content</p>
	</div>
    </body>

Solution

  • remove your comments on html style. It will work.

    I am not sure of this.

    But in css, you need /* */ to comment.

    (e.g)

    /* This is a comment */

    <head>
    <meta charset="utf-8" />
    <title>Template_</title>
    <!--><meta name="generator" content="Geany 1.27" /></-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
	.container{
		position:relative;
		width= 100%;
		height= 100%;
		overflow=scroll;
	}
	
	.banner{
		position:absolute;
		margin:5px;
		width:90%;
		right: 0px;
	}
	
	.banner .test{
		font-weight: 900;
		font-size: 3em;
		margin:10px;
		font-variant: small-caps;
	}
	
	.banner .logo{
		position: ;
	}
	#social_strip{
		position: fixed;
		bottom: 0px;
		right: 0px;
      width: 300px;
		border: 3px solid #73AD21;
	}
	.content_container{
		position: relative;
		margin:5px;
		padding:5px;
	}
    </style>
    </head>
    <div class="social_bar" id="social_strip">social</div>
    <body class="container">
	    <div class="banner">
		     <p>Banner</p>
		    <div class="test">
			    <p>Test</p>
		    </div>
	</div>
	<div class="content_container">
		<p>Content</p>
	</div>
    </body>