Can anyone enlighten me to why the following occurs with this test case?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.section {
background-color: #000000;
color: #ffffff;
}
.wrap {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="section">
<div class="wrap">Some content here</div>
</div>
</body>
</html>
When the window is big enough to accommodate 960px, everything works as expected.
When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.
I would normally expect the black, .section div to stretch across the document since it's display: block by default.
Does anyone know why this is happening and more importantly, how to get the result I expect?
Cheers
It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.
Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.
section is sizing to it's contents, try setting width:100% on .section
In addition, you may want to add this to .wrap
margin-left:auto;
margin-right:auto;
that will center the wrap div
Related
I have quite an annoying problem, for which I don't seem to be able to find an easy fix. Consider the following HTML:
<html>
<body>
<div id="page">
<!-- Some HTML here -->
<div id="menu"><!-- Some stuff here --></div>
<!-- Some HTML here -->
</div>
</body>
</html>
With the following CSS:
body {
text-align: center;
}
#page {
margin: 0px auto;
max-width: 1200px;
}
#menu {
width: 100%;
padding: 0px 2000px;
margin-left: -2000px;
}
This would give a centered page div, with a menu bar in there. Thing is, whenever the browser width becomes > 1200px, the div will not grow any further, but the menu div must at all times stretch all the way to the window edges. And the problem with this approach now is, that I get a horizontal scrollbar because the menubar is bigger than the screen. So, I am looking for a solution for this. Something that disables the scrollbar from having impact on the horizontal scrollbar would do. Disabling the horizontal scrollbar isn't an option however, since the content must be scrollable on small devices as well...
I am aware that I could fix this by pulling the menu bar outside of the page div, but that is hard, since I am editing a Drupal theme and I want this change to have as little impact as possible.
Thanks in advance for any suggestions!
What you mean is that you want the div to stay 100% width all the way but to have scrolling inside of it? If so then you should have a wider div inside the main div.
Something like this-
<div id="full-width">
<div id="scrolling-div">
</div>
</div>
<style type="text/css">
#full-width {
float:left;
width:100%;
height:500px;
overflow-x:visible;
}
#scrolling-div {
float:left;
width:300%;
height:500px;
}
</style>
I tested this code, it works :)
You can easy fix this by setting your html and body styling like this:
html, body {
overflow-x:hidden;
}
body {
margin: 0;
}
This should do it with the current code you have now.
I have a main container div, and I'd like it to be margined from the top of the screen exactly, for example, 10% of the screen width. This way I won't have problems with non-uniform screen sizes etc..
I already found a dirty workaround which is putting a 1px by 1px image of the color of the background, right before the div, and then style it to have 10% of the width of the screen. But this looks quite dirty, doesn't it? Is there any better solution?
Same solution as Rubens without using tables. I've also placed some code to deal with the top margin you were asking about but using padding instead.
<html>
<head>
<title>...</title></head>
<body>
<div id="content">
Your whole page comes here...
</div>
</body>
</html>
* {
padding:0;
margin:0;
}
html, body {
height:100%;
}
body {
padding:10% 0 0;
}
#content {
width: 850px; // replace with your desired width
margin:0 auto;
}
The solution I find very elegant is to insert the page in a table, beginning right after the body, and terminating right before it.
You'd have this:
<html>
<head><title>...</title></head>
<body>
<table id="content"><tr><td>
Your whole page comes here...
</td></tr></table>
</body>
</html>
Now simply decide the size of the page, using the style:
#content {
width: 850px;
margin-left: auto;
margin-right: auto;
}
I'm trying to stack a few divs vertically that have a "red" background which takes 100% of the page. Inside those divs i make 960px centered divs. What happens is very strange: if i resize my window to be less than 960px (for scrollbar to appear) - there is a gap at the right side of each stacked div. You can view live example here: http://jsfiddle.net/GLE7A/
Basic code:
<style type="text/css">
* { padding: 0; margin: 0; border: 0; }
.wmain { background: red; }
.w960 { margin: 0 auto; width: 960px; }
</style>
<div class="wmain">
<div class="w960">
test
</div>
</div>
<div class="wmain">
<div class="w960">
test
</div>
</div>
Solution is easy: just add min-width:960px; to the .wmain div to fix the problem
QUESTION: why does this strange behaviour happen in the first place? Does a fixed-width child somehow escapes normal flow like absolutely positioned divs or smth.?
Thanks for your thoughts
That occurs because you dont define any width for the wmain div that is what confusing the browsers.
I want to add space in the HTML document like the ones inside the orange rectangle. I don't know the technical term for what it's professionally called. Apologies.
If you are looking to center your web page and you are using a fixed width on your main container this can easily be achieved.
CSS
.container {
margin:0 auto; /* this will center the page */
width:960px; /* use your width here */
}
HTML
<body>
<div class="container">
<!-- all your great content here -->
</div>
</body>
If you need help applying this to your html/css please post your html and I would be glad to help you.
Why not do this? :
<style type="text/css">
html, body {
margin: 0;
border: 0;
width: 100%;
}
body {
padding: 0 20px;
}
#main {
margin: 0 auto; /* in case you want to set a fixed width on this as well */
}
</style>
<body>
<div id="main"></div>
</body>
This way, depending on the width on the window, the main div will resize and there will always be a fixed space on both sides. If you want the main div have a fixed width and the spacing on the sides to be resized automatically, use the other solutions.
Those would be margins. But your better option would be to wrap the main area in a div or other block element/sectioning root, set it to the width that you want, and then center it with margin: 0 auto;
you need margins. set the style to margin:0 auto; that will center your div
The page is here:
https://gentle-day-3026.herokuapp.com/
The css file like this:
https://gentle-day-3026.herokuapp.com/stylesheets/base.css
another is to use reset.css to replace the base.css
(the new user just 2 hyperlink allowed)
Try to change some many times, include methods like:
<body>
<div id="divMain">
...
</div>
</body>
body
{
margin: 0;
padding: 0;
text-align: center;
}
#divMain
{
margin: 0 auto;
padding: 0;
width: 1024px;
text-align: left;
}
but it didn't work.
Thank you for your help!
I even test it in a very simple html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheets/base.css" media="Screen" type="text/css" />
</head>
<body>
<div id="divMain">
<h1> hello </h1>
</div>
</body>
</html>
It still did not work!
On your current page, body has a fixed width of 720px. Remove this. Next, set the fixed width on your outer-most div that sits just inside the body. Additionally, give this div a margin of 0 auto, which will result in it being centered horizontally.
What you have done is fine. But you given a width to the body. Remove the width attribute from there. Try this CSS and it works:
body {
color: #999999;
font: 14px/1.5em "Lucida Grande",Arial,sans-serif;
margin: 20px;
width: auto;
}
See base.css line no. 8 has the same width: 720px; for the body! And also, for the <div align="center"> change it to <div class="center"> and give css as .center {width: 720px; margin: auto;}. Please try this and let us know.
Finally you should be having this:
.center {width: 720px; margin: auto;}
<div class="center">
You need to set your body width to 100%, your <div> to whatever size you want (eg 720px) and its margin to 0 auto.
The sample code that you have posted works perfectly for aligning #divMain to the center (horizontally)...
Looking at the code you have posted for your site, it looks like you have defined a fixed width for your body element (see line 12 of base.css). Removing this fixed width, and then moving the correct width to the wrapper div (currently set using align="center") should solve your problem.
body{
width: 100%;
height: 100%;
}
.divMain{
width: 720px;
margin: 0 auto;
}
May be it helps you.
Try to add this style in your code.
You have 2 problems here:
You set the margin of <body> to be 0 (inline css above). What's more, <body>'s width is only 720px (base.css, line 8), which is smaller than the width of most desktop viewports. As a result, <body> snaps to the left of the viewport, with margin-left as 0 and plenty of space to the right. With <body> aligned to the left, its children (such as #divMain) cannot possibly look centered. What you can do is to either center <body> by using margin: 20px auto, or by setting <body>'s width to be 100% to fill the entire viewport.
The width of the child, #divMain, is larger than that of its body. You will have to set the width of #divMain to be smaller than 720px (e.g. 500px) - the only way for a child to be centered horizontally within its parent using margin:0 auto is for the parent's width to be larger. Of course, I don't think you intended to have #divMain smaller than 1024px in width, so I'd suggest setting <body>'s width to be 100%, which almost guarantees that its width will be larger than #divMain's.
In short, you can either have:
body{width:720px;margin:20px auto;} #divMain{width:500px;margin:0 auto;}
or
body{width:100%;} #divMain{width:1024px;margin:0 auto;}
Hope that helps.
HTML
<body>
<div class="div-body-width">
....
</div>
</body>
CSS
body {
margin: 0px;
padding: 0px;
}
/*Insert here your width*/
.div-body-width {
width: 1024px;
margin: 0 auto;
}
Wrap the content of your body in a div :
<body>
<div id="page">
...
</div>
</body>
Then in your css :
#page {
margin: auto;
}