I'm not sure if that can be done with pure CSS.
The site structure looks like this:
<body style="text-align:center;">
<div style="max-width:1000px; margin: 0 auto;" id="mainWraper">
<div id="fixedBox" style="position:fixed; top:100px; left:0;"></div>
</div>
</body>
What I want to do is make the fixedBox element to be displaed always 100px from the top screen and aligned to the left side of the mainWraper.
mainWraper is responsive with the max width - 1000px;
I know that it can be done with JS but can I do this also only with css?
If the width of the container is below 1000px the box will be aligned left to the viewport. Otherwise, it will be aligned left to the container:
#fixedBox {
position: fixed;
left: 50%;
/* move it back half the width of your mainWrapper */
margin-left: -500px;
}
#media screen and (max-width: 999px) {
#fixedBox {
left: 0;
margin-left: 0;
}
}
Demo
Try before buy
Assign a margin to fixedBox rather then using fixed position:
#fixedBox{
margin: 100px 0px 0px 0px;
}
the grey box is your fixedBox and it will always be 100px from the top and aligned left to main column
<body style="text-align:center;">
<div style="width:1000px; margin: 0 auto; height:1000px; position: relative;" id="mainWraper">
<div id="fixedBox" style="position:fixed; top:100px; left:0; width: 20px; height: 20px; background-color: #aaa;"></div>
</div>
</body>
issues:
always give fixed element width and height
added top: 100px so that the fixedBox stays 100px from the top
give some height to the mainwrapper
Related
I have absolutely positioned text so that it sits inside of my header image, but I cannot figure out how to keep it from moving outside of the header when the browser gets re-sized. If the browser window gets re-sized to a smaller size, the text moves outside of the header, but if the browser window gets re-sized to a bigger size, the text keeps moving to the right of the header!
The header is 800px wide and 150px tall, and it's positioned in the middle of the browser window.
Here's my HTML code:
<div id="container">
<div id="header">
<img src="images/header.jpg" alt="Site Header Image">
<h1>Our Site</h1>
<h2>Catchy slogan...</h2>
</div>
</div>
Here's my CSS code:
body {
margin: 0px;
padding: 0px;
}
#header h1 {
color: #FFFFFF;
position: absolute;
top: 0px;
left: 305px;
}
#header h2 {
color: #FFFFFF;
position: absolute;
top: 30px;
left: 330px;
}
#header img {
width: 800px;
height: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
There are two issues here:
Absolute positioned elements are laid out with respect to a relative positioned parent. You didn't specify that either #container or #header are relative positioned, so everything is aligned with respect to body - probably not what you want.
Your two container divs, #container and #header are full browser width. You want to constrain them to 800px, to match the image, and center them with margin: auto:
#header {
position: relative;
width: 800px;
margin: auto;
}
Here's a Codepen:
http://codepen.io/eldarshamukhamedov/pen/dGKJGm
That is because absolute positioning works relative to the body IF it does not have any parent with position:relative
Add this code
#header {
width:800px; /* define a width to the header container */
position:relative; /* see note */
margin:0 auto; /* centers header horizontally */
}
I want to position a <div class="container"></div> in the middle of the screen in such a way so that it's responsive to any screen size. The red marked area on the screenshot should always appear in the middle of the screen.
How to position it? Currently I'm using margin-top:85px when I squeeze the browser, the distance between the red marked area and the navbar should decrease as well.
Have you tried absolute centering? You would need to add a position relative to the parent container... You would also need to declare a height on the container element...
.parent-container {
position: relative;
}
.container {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I hope this helps...
Working code snippet has been added. This code will centre your div both horizontally and vertically for any screen size.
Set the css property position:relative for parent of the container.
.container {
width: 400px;
height: 300px;
background-color: #ccc;
position: absolute;
/*it can be fixed too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width: 100%;
max-height: 100%;
overflow: auto;
}
<div class="container">
</div>
Try with this example
.container {
width: 75%;
margin: 50px auto 0;
}
Define some width on your container and set margin top & bottom to some desired value and left & right values to auto so that it will always split the remaining space on the both sides equally.
.container{
width : 84%
margin : 2rem auto;
}
Use this in your container class
.container{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:auto;
height:200px; /****set height****/
margin:auto;
}
It will work
I have the below slideshow which is 100% of the screen width. I need to position the banner_slideshow_controls div on top of this in the middle.
I have tried setting the main container of the slideshow to relative and then setting the div to absolute but this will not sit in the middle unless I set a width and margin: 0 auto on the slideshow which I cannot do as I need it to be 100%.
Can anyone suggest a work around for this?
<div id="banner_slideshow_container">
<div id="banner_slideshow">
</div>
<div id="banner_slideshow_controls">
<div class="slideshow_caption">TEXT FOR BANNER</div>
<div class="slideshow_button">More Information</div>
<div id="prev" class="img_replace">Previous</div>
<div id="next" class="img_replace">Next</div>
</div>
</div>
#banner_slideshow_container {
width: 100%;
height: 366px;
margin-top: 339px;
background-color:#ccc;
}
#banner_slideshow {height:366px}
#banner_slideshow a{
width:100%;
height:100%;
display:block;
}
#banner_slideshow_controls {
position:relative;
top:-100px;
margin: auto 0;
width:900px;
z-index:10;
border:2px solid green
}
Many thanks,
If you want to center horizontally, left and right margin has to be auto, so margin: 0 auto, or shorter margin: auto (because default div margin is 0)
Or if you want to use absolute position, add to #banner_slider_container position: relative and than you can position absolutely (if you don´t know container width, you can use left: 50%; margin-left: -450px)
margin: x y is short hand for -
margin-top: x
margin-bottom: x
margin-right: y
margin-left: y
If I understood the requirement correctly -
set margin : 0 auto not the other way around on #banner_slideshow_controls
By doing that you set the left, right margin to 'auto' and top,bottom margin to 0 - which will place the div in the middle.
My project has the following requirements:
Header fixed to the top of the page
Content area has a white background and 100% height
No scroll bar when content is less than height of the screen
Must support IE7+ (a JS fix for IE is ok)
When content is taller then height of screen, scrolling it should stay within the white content area (not go under the header).
Here is my basic HTML:
<div class="wrap">
<div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>
CSS:
body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}
Example: http://jsfiddle.net/zw3WS/
First question is how to get the content to have 100% height, not go under the header, and still not have an unnecessary scrollbar?
Second, if the content is taller than the screen, how would I make it scroll only in the white space, and not allow the content to scroll under the to bar as it currently does?
For scrolling "only in the white space", you can do it by setting position: fixed on the wrapper element, then absolutely positioning the header and content elements inside:
body{
background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
overflow: hidden; /* no scrollbars for page body */
}
.wrap {
width: 300px;
position: fixed;
top: 10px;
left: 50%; /* for horizontal centering */
margin-left: -150px; /* for vertical centering */
bottom: 0;
}
#header{
position: absolute;
background:#aaa;
top: 0;
left: 0;
right: 0;
}
#content{
background:white;
position: absolute;
bottom: 0;
top: 30px;
left: 0;
right: 0;
overflow: auto; /* this makes the scrollbar appear inside #content */
}
Demo: http://jsbin.com/osipin/1/edit
For scrolling in the page body, you need to add two elements to your markup: a background for the header, and a background for the content.
The purpose of the header background is to cover up the content when it's scrolled down, where otherwise it would appear underneath the header. What you use to cover the content is simply the same background as the page. You must size this bg element correctly so that it fills the width of the viewport, and is the height of the top margin of your content area. The real header can be horizontally centered within this bg element using a set width and margin: 0 auto.
The content background element should be an empty element which precedes the content, and has a fixed position. Its purpose is to ensure that the white area extends to the bottom of the page even when the content is shorter than the viewport height.
Your new CSS looks like this:
body, .header-bg {
background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}
.wrap {
width:300px;
margin: 0 auto;
}
.header-bg {
position: fixed;
top: 0px;
left: 0;
right: 0;
height: 40px;
}
#header {
background:#aaa;
width:300px;
margin: 10px auto 0;
}
.content-bg {
background: #FFF;
position: fixed;
width: 300px;
top: 40px;
bottom: 0;
z-index: -1;
}
And your new markup like this:
<div class="wrap">
<div class="header-bg">
<div id="header">header</div>
</div>
<div class="content-bg"></div>
<div id="content">
CONTENT
</div>
</div>
Demo: http://jsbin.com/osipin/4/edit
I have 2 images that I need to slightly overlap. My first image is logo.png, and my second image is form.png
My html is:
<body id="wrapper">
<div id="main" method="post" action="">
<img src="images/logo.png" align="middle" id="Smarty" />
</div>
<div id="box" method="post" action="">
<img id="Form" src="images/form.png" />
</div>
And my CSS is:
#wrapper #main {
margin-top: 8%;
margin-right: auto;
margin-left: auto;
text-align:center;
display:block;
z-index: 1;}
#wrapper #box{
margin-top: 8%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align:center;
top: 8%;
display:block;
z-index: -1;}
Basically I need both images to be centered relative to screen size, and I need the 2 to overlap. With this code, both images center, but my form seems to be 8% down from my logo, rather than 8% down from the top of the screen. Is this how I am supposed to be overlapping the 2, or am I way off?
Thanks!
How about something like this?
Live Demo
Or using position: absolute, if that's what you want:
Live Demo
CSS:
#main {
margin: 8% auto 0 auto;
text-align:center;
/*
only include this next rule
if you want the first image to be over the second
*/
position: relative
}
#box {
text-align: center;
margin: -12px 0 0 0;
padding: 0
}
HTML:
<div id="main" method="post" action="">
<img src="http://dummyimage.com/200x80/f0f/fff" align="middle" id="Smarty" />
</div>
<form id="box" method="post" action="">
<img id="Form" src="http://dummyimage.com/200x40/f90/fff" />
</form>
Use the following CSS code to do it. The 2 images will overlap each other and will be centered to the screen both horizontally and vertically.
#main, #box{
position:absolute;
left:50%;
top:50%;
margin-left:-150px; /* negative half the width of the image */
margin-top:-150px; /* negative half the height of the image */
}
Check working example at http://jsfiddle.net/gVQc3/1/
If you want the images to overlap each other by certain amount of pixels, then see the following link.
Check working example at http://jsfiddle.net/gVQc3/2/
for the #wrapper #box change the position: relative; to position: absolute;. This should fix the issue
As far as I can see, you’re not doing anything that would make the images overlap each other.
For that to happen, you’d need to apply position: absolute; to them, and position them at the top of the page:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
}
To horizontally center them when positioned absolutely, I think you’ll need to know their width. If they were both 100 pixels wide, you’d need:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
I wouldn’t recommend a z-index of -1 either, I don‘t think that makes sense. If you want #main to be on top, then I’d suggest:
#wrapper #main {
z-index: 2;
}
#wrapper #box {
z-index: 1;
}
Note also that in your HTML, you’ve got method and action attributes on <div>s. These won’t have any effect: those attributes go on the <form> tag.
You should play around with fixed, static and absolute positions instead of relative.
See this link http://www.w3schools.com/Css/pr_class_position.asp