I'm trying to create a "fluid" website and have in my css file:
page-wrap{
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I'm not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?
That's fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.
#page-wrap
{
width:780px;
margin:10px auto;
}
Forget the min/max-width.
It's not clear for me.
If you use, for the width 80% of the available window width, it's normal that the bloc resizes to adapt…
You must have a fixed width for the center part.
I use this :
#centerdiv {
position: absolute;
width:950px;
left: 50%;
margin-left:-475px; }
Related
My footer is not sticking on the bottom of my page. It only goes until the bottom of my screen, but when I scroll down, the footer is stuck on the location where my bottom of screen was. It sticks on the bottom of my screen but not on the bottom of my entire page. Someone please help I almost tried everything. The body and html doesn't take up the size of my whole page too, only the size of my screen which is 1920 x 1080. I tried every sizes like 100vh, 100%, min-width, set the footer div to absolute with bottom: 0, and none of them works :( (I'm also a newbie)
One time I managed to make the body fill the whole page but the footer is still stuck in the position.
Try to set body to:
position: relative (so the footer sets it's absolute position according to the bodys position)
You might even need to do:
body {
min-height: 100vh //as you have already
position: relative;
padding-bottom: 150px //same height as you footer
}
Most simple way to achive it is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.
Give the footer-container a negative margin-top:
footer-container {
clear: both;
position: relative;
height: 150px;
margin-top: -150px;
}
I have a page where the content is 1000px wide. About halfway down on this page, I need to have an image displayed that is 600px high and 2000px wide.
This image should always be 600px high, maintain its aspect ratio and whatever can't be fit at the current browser width, should fall off equally on both the right and left (so the image stays centered as the browser window changes).
There will only be the image - nothing on top of it.
I have tried building a div and having the image fall outside of it (beyond the 1000px, but can't make it work. If I break it out of the container it works with:
.wideimage {
background: url(../images/wide.jpg) no-repeat center center;
height:600px;
}
This works but it would be a lot nicer if I could do it within the 1000px container and have the image fall outside to the edge of the browser window.
To have the image fall outside the container and be centered try making it absolute, left 50% and offset the margin by half the width of the image: https://fiddle.jshell.net/7vpmndfo/1/
.wideimage {
position:absolute;
left:50%;
margin-left:-1000px;
}
And in order to prevent horizontal scroll bars on the browser, you would need to have you're page within a wrapper div (if it's not already) with overflow:hidden;
If you have a variety of images and so may not know in advance the width of the image, you can centre the image with the classic "centre anything" css technique:
.wideimage {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
I am working on a website, at the moment on a sign-up page. Its all perfect, right until i realize some very annoying. I have kinda 2 elements on this page. A sign up div, and an img, for the logo in the top. And it is not even close to fill the whole html page. But it still adds the SCROLL BARS, and i can scroll like 20 px up and down, and from side to side. Very annoying plz help
You want to add margin: 0; to your body.
It's already 100% wide, and the margin pushes the width beyond the space available on screen. This causes a vertical scrollbar, and that, in turn, causes a horizontal scrollbar.
This can be fixed in two ways
Either change the width and height of the body to auto as:
html, body {
width: auto;
height: auto;
background: #11BD83;
}
JsFiddle
Or as suggested by #Per Salbark add margin : 0 to the body
html, body {
width: 100%;
height: 100%;
margin : 0;
background: #11BD83;
}
JsFiddle
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.