I have this code:
<style>
body {
background-color: yellow;
width: 100%;
}
h1 {
color: red;
font-size: 50px;
}
p {
font-size: 20px;
}
</style>
<h1>Title</h1>
<p>Content</p>
All my code should fit into a single HTML page, however a horizontal scroll bar appears at the bottom of the page. Any help? Thanks.
body {
background-color: yellow;
width: 100%;
}
h1 {
color: red;
font-size: 50px;
}
p {
font-size: 20px;
}
<h1>Title</h1>
<p>Content</p>
Remove the body width bit. It isn't needed, and browsers by default add a little bit on to the edge, meaning that it will be over 100% so you will have to have a horizontal scroll bar.
Remove:
body {
width: 100%;
}
Try adding margin:0 to the body rule. You've set body to take up 100% of the window width, but the margin isn't considered part of the width measurement so it's slightly bigger than the window. Use padding if you want to have some space around the content.
For more on this, read about the CSS box model.
You should remove width:100% like in this fiddle.
or you can keep the width:100% and add margin:0; to the body like here.
Related
I'm struggling with a problem which seems simple:
My code:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
width: 100%;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The box contained in the wrapper has a fixed size, which might overflow the wrapper on small screens. Why doesn't the wrapper wrap around the box? How would I do that?
You can also check out the issue in this jsFiddle.
In order to make this work:
Remove width: 100% and add to the wrapper display: inline-block.
Doing so, will enable the wrapper to have as much width as needed to wrap around the box. Putting width: 100% restricts your wrapper to the width of the screen and in case of the box having a bigger with than that of the screen, it won't work.
If you do not want to have a horizontal scrollbar, especially on narrower screens use: box-sizing: border-box on the wrapper.
CSS:
.wrapper {
display: inline-block; /* Ensures that the box stays wrapped */
padding: 10px;
background: white;
box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}
Here is a working version of your jsFiddle, with both the wrapping issue mended and the horizontal scrollbar abolished.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
box-sizing: border-box display: inline-block;
padding: 10px;
background: white;
}
.box {
position: relative;
margin-top: 40px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
For reference:
display: inline-block;
box-sizing: border-box;
Use display:inline-block on the wrapper to resize the container based on the content inside.
The div element by default has display:block; so you need to change its display.
You should remove width:100%; from .wrapper class, then you can make it display:inline-block; or display:table;
*{
font-family:tahoma;
}
body{
background:#333;
}
.wrapper
{
padding:10px;
background:white;
display:inline-block;
}
.box
{
margin-top:40px;
width:1100px;
height:400px;
background:#aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
Your problem occurs, because HTML documents, by default, display all elements as display: block.
There are two ways to do it as our friends have mentioned before.
First one is to use inline-block value for the display property:
body{
display: inline-block;
}
The second way is to use max-width:
div.wrapper{
max-width: 100%;
/*we have set height property to auto to have coefficient between width & height*/
height: auto;
}
For more information visit these webpages:
inline-block
max-width
You can solve the problem by using the following css:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
display: inline-block;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The only change is I have added display: inline-block to .wrapper element.
Why wrapper doesn't wrap around the child div
The problem is all html element has some default CSS styling which gets applied by the browser.
In this case div gets a default property of display: block; It is the same property that makes a default unstyled div to take up full available width of it's parent element.
As you can see with this: snapshot of chrome dev tools
*The css style highlighted in red rectangle is the default styling applied by the browser.
*The red underlined text tells us about the width of the element. The fading out signifies that value of that property is computed by the browser.
** While we are at it I want to point you to a different problem that you might have faced with the previous code and if the goal was to make the wrapper to wrap box at all times.
If the .box div would have width far less than that of the width of the browser then another problem may arise which I have shown in the code snippet bellow.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
}
.box {
margin-top: 40px;
width: 100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
As you can see the box tries to cling to a side of wrapper.
You can read more about display css property here: CSS display property || CSS-Tricks
I'm making a fixed width (120px) website for old feature phones that don't respond to media queries. The width of the body won't change even when I've defined it as 120px. When I open the website on the phone, it shows a huge horizontal scroll bar showing me a lot of blank space on the right which I'm assuming is the body. In the screen shot attached, I've set background color of body to red so you can see the problem (I also had to blackout the content for client privacy).
I'm using the following code:
html {
width:120x;
margin-left:0px;
}
body{
width:120px;
font-family: arial;
font: arial;
margin-left: 0px;
max-width:120px;
}
I think you've a typo here:
html {
width:120x;
margin-left:0px;
}
The width should be 120px
Remove the typo:
html {
width: 120px;
margin-left: 0px;
}
I think you have to use un child to wrap your content with a max-width.
and tags don't allow to do what you want.
HTML
<div class="wrapper">
Your content goes here
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding: 20px;
width: 120px;
height: 100%;
font-size: 14px;
background-color: #d63b24;
color: #fff;
}
http://jsfiddle.net/vinzcelavi/1rx7yn57/
Try this
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
I am putting entire website inside a div with ID container. The css for container is
#container {
width: 960px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
But the problem is that it also limits the background to 960px. I want to exclude background & allow it to fill entire screen. i.e repeat on x-axis
Use the following code - should work :
CSS
body {
width: 100%;
background: #fff;
}
HTML
<body>
<div id="container">
</body>
To do that,
First set your body's margin(left and right) to "auto", this way anything under the body will be centered.
So,
Here's the first code:
body{
margin: 0px auto;/* Centers your page */
background-color: #898989; /* Add a nice background-color */
}
There, Now for the div,
It is important to have a width defined for the div
so, assuming that your div is having an id called container:
#container{
width: 960px;
}
'
That's it! :D
I hope it's helpful!
Put background on parent element, eg. body.
body {background: url('...') repeat-x};
#container {width: 960px; ...}
just put what you want for background in body tag
body {
background:whatever_you_want;
}
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.