I'm busy with a new website. For the menu bar, I put the width on 100% to be seen here:
font-family: 'Champagne';
font-size:20px;
display: block;
z-index: 1000;
bottom: 0;
width: 100%;
background: #0193CF;
text-align: right;
padding: 0 2em;
margin: 0;
text-transform: capitalize;
But for some strange reason, the width of the menu bar is actually longer then the rest of the page. Take a look at the screenshot at the bottom.
Does anyone have any experience with this?
The problem is a combination of width and padding properties. Padding, in the typical CSS box model, is additive. If your box width is 100%, the padding applied to it will add to the width. The width would therefore calculate at a number greater than the size set in your width property.
I would suggest using the box-sizing properties in your CSS, like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
width: 100% + padding: 0 2em, is equal to something greater than 100%. By using the box-sizing property in your style sheet, you will tell the browser to include padding's as part of the total width.
box-sizing:border-box...
This basically takes into consideration the margin and padding when calculating the size.
A more detailed explaination on the box-model is outlined for you here:
http://css-tricks.com/box-sizing/
Another option to cover most cross-browser problems is to try using a reset to zero out all elements and bring you back to a true "start".
many browsers add their own little tidbits of padding oand spacing on specific elements, so a reset is often used to, well, reset your browser to a true "square one"
Here is one of the more popular ones:
http://meyerweb.com/eric/tools/css/reset/
But this site reviews a lot of them:
http://www.css-reset.com/
If box-sizing doesn't fix this problem for people, check your top levels of your CSS - I found a rogue width:100% for the <body> CSS once.
My technique for debugging these problems is to open Developer Tools and delete blocks of the page (i.e. major <div>s) one at a time: if removing any of them causes the layout to snap back into place that indicates the one you just deleted was causing the problem.
width sets the content width which does not include padding nor margins.
Try removing padding or changing the box sizing.
Related
A lot of people have said to use overflow hidden on both the parent of the element and the body. But the issue is that the image will be cut off (as desired) however the space it takes up remains.
Again this only works on mobile where the user can scroll past the view width, or zoom out in a way that browsers cannot
html, body { max-width: 100%; overflow-x: hidden; }
Has worked for almost every page except one which has a jpeg (don't know if that's relevant) image sticking out:
White bar example: continues down the page
Try this.
* {
box-sizing: border-box;
}
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element padding and border are included in the width and height.
I am using Bootstrap 3.3 for a simple layout and the way I have it is:
For the body,html:
html,body{
background: #fff;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
and then on each child section I have the following code:
.section-name{
height:100%;
}
so that each section takes up 100% of the given device screen size. Now I don't know why but I have quite a big gap between each section, see the screen shots below:
Notice the gap between the section, here's another screenshot:
Now I went to the dev tool, in both Mozilla and Chrome, checked for any excessive padding or margin issues, but found none.
Then I checked if it was because of the white spaces in my html, took off the whitespaces and still that wasn't the issue.
I took off all the Bootstrap CDNs too, just to check if it was a Bootstrap issue and no it wasn't, even in the custom CSS I have written, the same issue persists.
I have even tried:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
Even that wouldn't take off the padding
Edit
Js fiddle depicting my problem
I think I have found the solution you had a h2 inside your .section name that took margin-top of 20px,
Here the js fiddle
.section-title {margin-top:0px;}
http://jsfiddle.net/u2ttpkhg/1/
Is better if you could provide a fiddle, but here goes some things that I need to do sometimes:
Try to check above level elements too.
Also, you're using jumbotron? If so, it adds a top/bottom padding of 48px (via media query), take a look in that. Bootstrap has, by default, many classes which add unwanted paddings and margins.
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
I'm currently coding a website with basic html and css, for the sake of having it there, and I'm having a problem with widths.
I set my body to be 1086px width (max width of the elements in my design).
Although my computer's monitor is 1366px wide there's still a scrollbar at the bottom. Anyways to fix this?
overflow:hidden wont work because smaller monitors (1024px) wont be able to see all the content without the scrollbar, so it might be needed.
Thanks in advance!
EDIT: FOUND A SOLUTION:
{
overflow-y: auto;
overflow-x: hidden;
}
You should remove any padding and margin from your element in css file.
html, body, footer, header etc {
margin: 0;
padding: 0;
}
There are two different box models. You have your width + paddings + margins. Set your box model to border box using the CSS box-sizing property.
body {
box-sizing: border-box;
}
At quirksmode.org you can find some examples.
Resizing the body is not a elegant way. You should use instead of a div container called wrapper and you resize your wrapper. This should also solve your issue.
Have a look at this jsfiddle http://jsfiddle.net/EeJnN/
According to the standard, adding padding to a HTML element in CSS will grow the element by the amount defined. For example:
.elem {
width: 100px;
height: 100px;
padding: 20px;
}
will add 20 pixels to the .elem's sides, causing the actual width and height to be 140px total.
Since this is actually pretty impractical in web design (having to calculate and keep track of the resulting sizes), I was wondering if it was somehow possible to do the reverse instead. I set a padding, and the inner text area shrinks instead. So the element stays at 100*100px, has the padding of 20px inside it, and I don't have to worry about messing up my design while experimenting with the padding.
Is this possible? Perhaps through a language that compiles to CSS (haven't looked into that much)? And perhaps a more minor question: why does it work this way in the first place?
Use box-sizing:
elemSelector {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This value for the property declares that the declared size of the element will include the border and the padding.
References:
box-sizing at: 'CSS Basic User Interface Module Level 3 (CSS UI)'.
box-sizing at MDN.
It is currently impossible to perform what you are after. You'll have to account for padding in total width before you attempt to define what your css 'width' value will be. For more information on this, see the CSS Box Model. This is the only method to guarantee correct sizing in all web-capable devices, CSS3 compatible and not.