I want to have the content of my website centred but only for a certain width of a webpage. So when it's over say 500px I'd want the content to then be fixed, unable to stretch any further. Is there anyway to do that, or am I best having everything fixed? Hope that makes sense ill add some visuals to be a bit clearer..
thanks!
http://i38.photobucket.com/albums/e126/aaron123456/stackflow.jpg
1.auto margin with a certain space
2.so content doesn't float in the middle of a larger webpage
It's quite simple:
#container {
max-width: 500px;
}
#container > * {
margin: 1em auto;
width: 300px;
}
#container defines the maximum width, and every element placed inside it is aligned centered. I had to set the width to prevent these elements from requiring the entire width.
See it in action
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
Frustration
I am frustrated of having to search the internet time and again to find a way to get a simple webpage to fill the whole screen on any device. I don't care about resolution, text size, whether the text comes inside the screen or not or anything else. I don't care about anything. I have one word to display and it should come in the middle of the screen, vertically and horizontally.
CSS is driving me nuts. And I don't get why this ain't simpler. And bootstrap. Well, thanks a lot guys you helped me a lot! But why the hell don't you have a class that would simply take up all the visible space on the screen?
I have tried a lot of variations and none of them work. I just can't get that word to the freaking center of the screen.
Some variation
The simplest one: http://jsfiddle.net/IcyFlame/ngVSd/
<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>
I don't know why this does not work. And I want an answer as to why this does not work. And more importantly, I would really love it if you would just tell me how to make it work. All the time, everywhere.
This is a really useful question: Setting height: 100% on my label element doesn't work
The person who gave the answer says that it is 100% of what. Really cool. And how do I solve the overall problem? Oh no, I just answered the question.
All the questions after that have been marked as duplicates. One of which is:
Height: 100% doesn't work! Why?
Although the question is totally different, well, the moderators simply believed that this was a duplicate and it was marked as one.
Note: I am catering to a lot of screen sizes. I don't want to write any kind of absolute pixel heights and widths anywhere in my final code.
Please help me with this issue
Reference: I want the word to come in the middle as it does on this gorgeours website:
http://debarghyadas.com/
Note that this just a reference. I don't want to have the background image. The whole header part of the webpage takes up the whole screen, that is what I want to achieve.
Everything is centered and beautiful. That is where I wanna go.
To get vertical alignment you have to have a second div inside the first 100% sized one.
Approx centering (fine for small amounts of text) is easy: http://jsfiddle.net/ngVSd/4
If you want proper centering you have to set the height and width of the central div explicitly then give it negative margins of 1/2 the width and height. You also have to remove the padding and margin from body.
Note that to vertically center the text in the inner div you also need to set its line-height to be the same as its height: http://jsfiddle.net/ngVSd/6/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#outerDiv {
height: 100%;
width: 100%;
background-color: red;
text-align: center;
}
#wordDiv {
position: absolute;
background-color: lightblue;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
line-height: 100px;
margin: -50px -50px;
}
<div id="outerDiv">
<div id="wordDiv">Word</div>
</div>
To be honest, I don't really understand what vertical-align is doing.
So I can't really explain where your example fails.
But if you don't care about compatibility with IE7 and smaller, you may use the 'display: table' options:
<div style="display: table; width: 100%; height: 100%; text-align: center">
<div style="display: table-cell; vertical-align: middle;">Word</div>
</div>
Hope that helps.
You need to set width and height of the html and body (any any other parents) to 100% as well, since 100% means 100% of parent width/height, rather than 100% of the screen.
div parent has no height specified to calculate % .
You need to set height to body, and for % body needs too to calculate from parent's height: html.
<html> will use window's browser as reference to calculate %.
See this on W3C site.
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.
I'm trying to get an image centered on the screen, and I want it to stretch horizontally.
The trick here is that I need set margins. Lets use 200px as an example.
The image needs to stretch horizontally (and possibly scale proportionally) to maintain those margins no matter the windows size.
I can center it, and I can stretch it, but I can't do both at once for some reason.
Also, this needs to be CSS only! No JS.
Any help is greatly appreciated! :D
P.S. I've seen ton of questions about scaling images with the window size, and this is not the same thing. I need set margins, in pixels, that stay constant, while the image between them stretches horizontally.
I put a container around my image which would preserve the margins. As the window's width changes, the margin stays intact - only the width of the .container is changed. By setting the width of the image within the container to equal 100%, the entire image would be scaled (proportionally) based on the width of the container:
CSS:
.container {
margin: 0 200px;
background: red;
}
.container img {
width: 100%;
}
HTML:
<div class="container">
<img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>
You could use two divs, the outer with the set margins, the inner with width set to 100%:
http://jsfiddle.net/tqmrY/4/
<div id="holder">
<div></div>
</div>
#holder {
background: #333;
height: 100px;
margin: 0 100px;
}
#holder div {
width: 100%;
}
One way you could do this is by putting your image in a div and then putting padding on the div.
You would set your img to have a width of 100% and auto height, and then put padding on the containing div.
Here is an example
http://jsfiddle.net/uJnmf/
At this fiddle, you can see a header-bar with a title on the left and some text on the right. The problem should be obvious,
the header-bar does not scale with the full site, only with the visible part
The right-floated text sticks to the top of the header and is not on the same baseline as the title.
How can I fix this? Is there a better way to achieve what I want to do?
Clarification: With "the header does not scale" I mean that it does not have a width of 750px as defined in #header because the page is too small.
A few things:
No need for a float-clearing element. Just add overflow: auto; to the container.
Use max-width instead of width, as it scales nicely.
Try this: http://jsfiddle.net/PkkU8/7/
For 1) As Blender has mentioned, setting max-width: 750px should give you the flexible header width that you are looking for. This way, your header will never be larger than 750px, but can shrink if the window gets smaller than that size.
For 2) If you aren't adverse to it, you can absolutely position the right block instead of floating it. You'd be less prone to issues that float may cause, especially when you can guarantee the right block is going to be smaller than the header itself:
.fr {
position: absolute;
bottom: 0;
right: 0;
}
This also requires that its parent div be positioned either absolutely or relatively to work properly:
#head {
position: relative;
}
add padding to class fr
.fr {
float: right;
padding: 9px 60px 0 0;
}
I'm having some trouble with my web page. A picture probably descibes it best so here it is:
http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png
The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:
#mainContainer {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 800px;
min-height: 700px;
height: 100%;
}
I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to auto:
http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png
This is how it should look (and how it does look using height: 100%):
http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png
The full page can be found here (click on "Om oss" to see the page with the misplaced text)
I would really appreciate it if someone could figure out what the problem is! :-)
(Hopefully the CSS and HTML is easy to understand)
Edit: I just noticed that it renders properly in Safari, but not in Firefox.
You have given html and body a height of 100%. (Many child divs also have height:100%.)
What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.
Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.
You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!
Stian,
For the div #mainContainer, set the height to auto.
For the div #mainContainer-middle, set the height to 550px.
That should fix your layout issues.