How do I set the width of a web page to always be exactly 1000px ? For example, like Facebook or here on StackOverflow. The site just will not resize. If the browser window is smaller than 1000px, the scroll bar is needed. And the page should be centered in the browser.
I can always put content of the page inside <div></div> tags, but I have read that it will not work for all browsers. So what is the right way to do it ?
Enclosing the content in a div that has the CSS width property set to 1000px will work across browsers.
CSS:
div.content { width: 1000px }
HTML:
<body>
<div class="content">
...
</div>
<body>
However, consider using 960 pixels instead of 1000. It is a reliable standard that works on most devices down to a 1024 pixel display width including space for scroll bars and such.
Directly set the body to display at that width:
body {
width:1000px;
margin:0 auto;
}
However, I usually use a wrap div as follows:
html
<body>
<div class="wrap"></div>
<body>
css
div.wrap {
width:1000px;
margin:0 auto;
}
Related
I have a simple page with a single div, centred with margin: auto, and some text inside the div.
I set padding on the div to 30px on all sides. The div is set to a max-width of 700px.
When I resize the Chrome browser window it's behaving in an unexpected manner.
Page without resizing the window:
Page after resizing the window to two different sizes:
Note that the word "window" is cut off in the first size, due to the 30px padding, and the word "when" is cut off in the second size.
Here is what I want it to look like (I've photoshopped this to make it look right):
I want to keep the width set to 100% and the max-width property set to 700px so that it resizes for smartphones.
This can't be hard to do, I imagine, but I just can't seem to figure it out. I have tried googling it!
Here is the code:
<html>
<body style="background-color: blue;">
<div style="background-color: white; width: 100%; max-width: 700px;
margin-left: auto; margin-right:auto; padding:30px">
<p>This is some text but the problem is that its doing something strange when I resize the width of the window, and it is very, very annoying.</p>
</div>
</body>
</html>
Use width: auto instead or you can just remove the width property. (You might want to remove the max-width property)
<html>
<body style="background-color: blue;">
<div style="background-color: white; width: auto; max-width: 700px;
margin-left: auto; margin-right:auto; padding:30px">
<p>This is some text but the problem is that its doing something strange when I resize the width of the window, and it is very, very annoying.</p>
</div>
</body>
</html>
Since default box-sizing is content-box, it is adding padding value to the width resulting in increase of width on browser. Try to add below mentioned code.
body{
box-sizing:border-box
}
I am currently working on a company website. I've used negative margins plus positive padding to make the footer and top bars fill the 100% width of the page even though they are contained within another div, the wrapper set at about 65%. This is, as far as I know, a relatively well known way to do it but causes that content to go beyond the sides of the page.
Anyway, in order to prevent sideways scrolling there's x-overflow: hidden on both the html and body. This works when I'm at my computer but when I was showing the website to my coworkers today it was not working. I had my laptop connected to a large TV through an HDMI cable and I was able to scroll to the side (no scroll bar, just able to with a three button mouse). Went back to my normal setup (same laptop with a second monitor attached) and I can no longer scroll.
Code is something like this:
HTML
<div id="wrapper">
<div class="extend">
This is the div extending beyond the page and causing sideways scroll.
</div>
</div>
CSS
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
.extend {
padding-left:35%;
margin-left:-35%;
padding-right:35%;
margin-right:-35%;
}
#wrapper {
width:65%;
margin:0 auto;
}
This isn't a super huge issue for me (unless I discover it happens in more cases). I doubt my website will be viewed that often on a large TV connected to a laptop but I am curious as to what's causing it. Or if anyone has any better ways of extending divs past their containers, I'd be willing to hear about those too. Thanks in advance for any input!
body {
margin: 0;
padding: 0;
}
#wrapper {
width:65%;
margin:0 auto;
}
.extend {
/* 35/65*100 = 26.92 */
margin-right:-26.92%;
margin-left:-26.92%;
background-color: red;
}
.extent-content {
width:100%;
padding:10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Full width example</title>
</head>
<body>
<div id="wrapper">
<div class="extend">
<div class="extent-content">
This is the div extending beyond the page and causing sideways scroll.
</div>
</div>
</div>
</body>
</html>
I like to use a structure that has an outer wrapper and inner wrapper per section. The inner wrapper will get the fixed width and the outer typically gets 100% of the screen. This allows you to have full width sections and contained sections together without using negative margins.
Fiddle with example:
http://jsfiddle.net/h0k5pape/2/
Code style:
<div class="outer">
<div class="inner"></div>
</div>
I am using this website as an example. http://imgur.com/xyswjQH Here I have a screenshot of the website in fullscreen. However when I resize the page http://imgur.com/ZAKtsR9 you can see that the page almost cuts off elements instead of jumbling them all around. Is there a way I can achive this cutting off affect in html and css only? If you need my code just ask in the comments.
If your goal is to create a fixed width, you can create a wrapper div and set its width to 800px (just as an example) and it's margin to 0 and auto to Center the div if you would like.
If you'd like to make it responsive you can change width to max-width.
<html>
<head>
<style>
.wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Content here!</p>
</div>
</body>
</html>
You probably didn't need to come here for that question haha. All you need to do is set a width on the body or a div.
Cheers!
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
I have an HTML page. On my 15 inch laptop screen, it looks ok. But people with a wider screen have reported that the text on the right side of the screen is spilling far to the right.
If I place the view-source HTML, it will be very long. So I am posting the link to the page. Please do not consider this as me advertising the site (If people complain, I will replace the link with the html).
I am suspecting I need to wrap something in some div, but not certain. I am looking at it with firebug, and it seems that the issue is happening right after the Google ad, but I am not certain.
Advice for how to fix the right-spill are much appreciated.
The site is problemio.com
Thanks,
Alex
You need to set a width or max-width on your a container div.
For your site, you have a div with no ID or class associated with it (the one just above your banner). Try setting a width: 1200px or max-width: 1200px on that div (or whatever size you want)
If you want your site to be centered, also add a margin: 0 auto; on the element you set the width limit too.
This is the current structure of your site:
<body>
<div class="wrapper"> <-- make this your wrapper
<div class="banner" .....></div>
<div id="body_container"> .....
For your CSS:
.wrapper {
width: 1200px;
margin: 0 auto;
}
Give your <body/> a width or max-width:
body {
max-width: 800px;
}
Give your site a wrapper like this:
<body>
<div class="wrapper">
......... REST OF SITE HERE ..........
</div>
</body>
On wrapper define the following:
.wrapper {
width: 100%;
max-width: 1140px; /* you cna change this to whatever px width you want */
margin: 0 auto; /* center */
}
This will center your site, give it a max width in PX and have it stretch the full amount that it can until it hits that limit.