what I try is to create a window, that has fixed width and is centered.
Should also have variable height, depending on the browsers-viewport-height with a top offset of 20px and a bottom offset of 20 px;
I don't want to use JQuery / JS for this it should be in plain css.
Here some code-snipped:
#viewport should be the the browsers height / width container
#window should be the resized window (centered in middle, filling up all height except of top 20px and bottom 20px
http://jsfiddle.net/ejRTU/87/
Someone has any idea how to solve this?
Use position: absolute and set the top and bottom attributes to 10px; See this fiddle jsfiddle.net/ejRTU/88/
Related
Well i know about overflow-y: hidden, but I dont like that my site "jumps" to the right side like for 20px every time i use overflow-y: hidden.
Is it possoble to block scrolling without "jumping"?
here is example http://jsfiddle.net/wjyb8tzw/6/
Just give a margin or padding of 20px at the right side.
padding-right:20px;
The line overflow-y disables the scrollbar on the right, this changes the maximum width of the webpage.
The line margin: auto centers the div based on the maximum width of the webpage, therefore disabling the scrollbar moves the div a little to keep it centered.
If you specifically don't want the div to be centered then use margin-left: -17px; as the width of the of the scrollbar is 17 pixels as stated here.
I tried height: 100% but that seems to just be the height of the viewport.
My page scrolls, so I would like for the height to be set to the entire window basically.
Here is a live example - http://jsfiddle.net/gtKBs/750/ (trying to figure out the divider height).
Note, I don't want to move the div, I just want to set the height to the maximum height of the window.
Thanks.
Edit 1
Or even better yet, what I would like to happen is as I scroll the divider stays the same proportion and scrolls with me - i.e. say it is total height of 90%, then as I scroll, I always see the space # top & bottom, indicating that it is just 90% height of the current viewport.
Edit 2
This is what I am trying to do - http://jsfiddle.net/ryBZG/1/ A span 2 divs, span2, span9 where the span2 is a sidebar and the span9 is the content of the page. I want to put a divider between them.
Try to change the CSS of your divider div to the following
.divider{
position:fixed;
left:50%;
top:10%;
bottom:10%;
border-left:1px solid white;
}
As your #bluebox has a fixed width: 550px; I recommend to set your .divider's width to a fixed width (260px), too.
HTH
Andy
I have a large banner on my site, and the banner has rotating images, all inside of a <div>. It stretches across the whole page, and the images are large, 2000px wide, so that almost no matter what the screen width, the image will just keep expanding to the left and right.
How do I keep the center of the <div> positioned so that everything inside of it lines up with the content of the page (about 1000px), and stays there even when the page width is stretched?
Right now, the left side of the image just sticks to the left side of the page no matter what the width, so the image moves relative to the page content depending on the window's width. Here's the code on the <div> now
position: relative;
display: block;
width: 2000px;
height: 648px;
margin: 58px auto 0 auto;
Thank you!
The only way that I can seem to do this when the width exceeds that of the page is by using the CSS3 calc function :
left: -webkit-calc((2000px - 100%) / -2)
This will essentially set the left value to minus half of what is remaining. The -webkit- prefix makes this compatible with Chrome. You will have to add the other browser prefixes as necessary if you choose to implement this solution.
Have you tried :
<img style="position:absolute;left:50%;margin-left:-1000px;"/>
Newbie question here. I have a #wrapper as my main container. Like so:
#wrapper {
margin: 0 auto;
padding: 0 20px;
width: 960px;
height: 100px;
}
My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside the #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?
The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.
If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.
Heres a JSFiddle (Sorry, just discovered this today!)
http://jsfiddle.net/wGYfR/8/
The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px
The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.
You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.
I suggest firebug This will help you so much. Seriously.
The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.
CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png
If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.
The width should be 960px, however only FireFox adds the padding to the width.
To fix this, put the following code on top (or at least above all div selectors) of your code:
DIV { /*let Firefox stick to the web standard concerning padding*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
I'm trying to have the following markup:
body
#container
#content
where body is full width and has a background snapping to the bottom right.
where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.
where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"
When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.
I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.
I've made a sort of solution over here:
jsFiddle
Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.
Is this what you want?