Being an amateur CSS coder, trying to do away with "table" syndrome, I'm having some issues getting a fixed footer to work properly.
I have my footer DIV set to 100% width but because there is a 30 pixel padding inside of the DIV, the footer extends 60 pixels past 100%, if you know what I mean.
How can I solve this issue?
My CSS is this:
#footerDiv {
background:url(../images/background/mainBG.gif);
margin:0 auto;
padding:15px 30px;
width:100%;
bottom:0;
left:0;
z-index:4;
position:fixed
}
When you set width of your element with CSS, it sets only the content area of the DIV. Padding and Border width are calculated outside the content area. You can however put another DIV inside your footer DIV and set padding of it to 30px, to preserve 100% width of the outer DIV.
<DIV style="width:100%">
<DIV style="padding:30px">
<!-- Actual footer content -->
</DIV>
</DIV>
This shall be CSS2.0 compatible. ;)
It sounds like a box-model issue. For more information look here.
The code to make it right looks like this,
.footer {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Since it makes more sense to me, I sometimes apply that to all elements on the page (i.e. replace .footer with *).
Related
I've implemented my first sidebar design, but I came across a little problem.
My sidebar and content looks fine, however, there's a scroll-x bar that goes outside the frame.
This happened because I couldn't align both sidebar and content area to the left so they fit together, so I used position: fixed on the sidebar and then margin-left: 200px; on content area (Note: 200px is the width of the sidebar)
Here's an example of how I've implemented the sidebar:
http://jsfiddle.net/rWj95/11/
As you can see, there's a scroll-x. Even if I will disable the scroll-x, there will still be space left and the content will just go there.
Is there a way to properly implement the sidebar, so the width sizes will fit into the frame without going outside of it?
There's a live example: http://goo.gl/lFDQgl
Remove width:100% from #content to remove the scroll bar.
Now your #content will fill the remaining area on the page rather than taking up a 100% relative width of the viewport.
Use calc() to properly align the #content
#content {
width: calc(100% - 200px);
}
200px is the width of sidebar. So you need to subtract 200px from 100% of the parent width.
You can avoid the overflows by exchanging the margin for padding on .content and add
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
to the top of your styles. See # http://jsfiddle.net/84Nz4/
How do I create padding around a div but not pushing out the container?
http://codepen.io/vincentccw/pen/jgGtd
I create 2divs but then when I set a padding around it the child div got push out??
This is the normal behaviour of the default box model, i.e the padding and the border dimensions are added to the width property.
If you want to avoid clumsy calculations, you can change the default model (content-box) using box-sizing like so:
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
this would make the padding and border of all the elements part of the declared or inherited width and height, thus keeping your layout intact.
Now, if you were to declare a width of 100% or a 100px, and then add padding or border, it wouldn't have affected the total width, but would rather be included within the confines of the declared width.
HTML
<div>
<div>lol</div>
</div>
CSS
div{
background:yellow;
width:auto;
height:auto;
padding:1em;
}
div div{
background:red;
}
Padding is in the inside of the elements. I believe you want to use margin here, which is outside of block elements:
div{
background:yellow;
width:400px;
height:200px;
margin:1em;
}
div div{
margin:0; padding:0; border:0;
background:red;
}
Try This (Values can be changed based on what you are doing). I credit SoloLearn for helping me learn it (the app is Learn HTML for android).
<div width:100%;height:100%; style="background-color:white; color:black; padding:20px;">
Width and height auto fit themselves, background colors make box color, color is text color, and padding adds space after content. You can also nest tags if you want to change padding color since there is no value or element that I know of to do it inside of the tag.
This is a cheat, but it works when you just need some html to get the edges of the text in a few spaces:
div style="padding-left: 4em; padding-right: 4em"
So I'm trying to accomplish something. I'm building a responsive website, and I've run into an interesting issue.
I have a #wrapper, it's background is #FFF. Inside that for display needs i placed a header with some content and a body and each has a different background so it's easy to see what's positioned where.
For my Wrapper, i gave it a width of 100% so it expands and contracts with the browser window. But limited it's max-width to 750px as i dont want the website to be wider than that.
#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
width:100%;
max-width:750px;
background:#FFF;
}
Notice i placed a padding of 0px 20px on it. This is where my issue comes in. When you re-size the browser window the wrapper does contract along with it, but for some reason it disregards the padding on the right. I want to make sure that does NOT happen, because no matter the browser window size I want 20 pixel space on left & right sides.
Any ideas, hints, lessons :) ? http://jsfiddle.net/wuJ9H/
Thanks!
Adding box-sizing:border-box fixed it for me (Chrome 26, FF 19, IE9/10). This causes padding to be included in the width calculation.
Example: http://jsfiddle.net/wuJ9H/3/
#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
width:100%;
max-width:750px;
background:#FFF;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Why does it work?
When you re-size the browser window the wrapper does contract along
with it, but for some reason it disregards the padding on the right.
To be clear, your original version didn't just hide the right padded area. It hid the right padded region + 20px, namely, the width of the left padded area. This is because you told the box the be 100% wide plus any padding or borders.
Thus, your box was 100% + 40px wide.
Adding box-sizing: border-box instructs the browser to include padding and borders in the width calculation. It's very handy for percentage-based values.
The box-sizing CSS property
If you add box-sizing:border-box to #wrapper then the padding will be included in the width.
jsFiddle
#wrapper {
-moz-box-sizing:border-box;
box-sizing:border-box;
}
You may want to make max-width:790px now for it to appear the same when the window is wide.
Support
box-sizing is not supported in IE7 and below Reference. If you want to support IE7 then you will need to place an inner wrapper inside #wrapper.
jsFiddle
#wrapper {
position:relative;
margin:20px auto;
width:100%;
max-width:750px;
}
#inner {
padding:0px 20px;
background:#FFF;
}
Simply removing the width should maintain the expanding functionality while fixing your issue:
#wrapper {
position:relative;
margin:20px auto;
padding:0px 20px;
max-width:750px;
background:#FFF;
}
http://jsfiddle.net/wuJ9H/2/
You need to include the padding in your size definitions. Add box-sizing:border-box to the wrapper element.
I have this div on the CSS:
#bodycontent {
max-width:980px;
margin:auto;
}
#navleft {
width:18%;
border:0px;
float:left;
}
#rightcontent {
max-width:80%;
border:0px;
float:right;
}
and on the HTML:
<div id="bodycontent">
<div id="navleft">
some stuff
</div>
<div id="rightcontent">
some stuff
</div>
</div>
Now I have 2 problems:
If I set the divs 20% and 80% I'll have the divs displayed not side by side but one above and one below
I'd like to have 25px of padding-left on the rightcontent div but, again if I set the padding, the div goes below the other.
Why? The padding is not inside?
The width property is defined (in CSS 2) as the width of the content, not the space between the borders. Padding goes inside the borders, not inside the width.
In CSS 3, you can change this with the box-sizing property but this has limited support.
The problem you are facing is because of the box model. The width you declare is the width of the content and not the true width of the element.
To learn more about the box model
To change this so that the border and padding are all part of the elements width you can use border-box
#your-element {
-moz-box-sizing: border-box;
-webkit-box-sizing:
border-box; box-sizing: border-box;
}
Read about the css box model.
Your content is the inner-most box, and it will have the width you specify. Padding, border, and margin are all added to this width. Padding will be inside the border, but not inside the content width.
I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):
newdiv {
width: 200px;
height: 60px;
padding-left: 20px;
text-align: left;
}
When I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px.
Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px.
How can I fix this problem?
Add property:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Note: This won't work in Internet Explorer below version 8.
Put a div in your newdiv with width: auto and margin-left: 20px
Remove the padding from newdiv.
The W3 Box model page has good info.
Try this
box-sizing: border-box;
If you would like to indent text within a div without changing the size of the div use the CSS text-indent instead of padding-left.
.indent {
text-indent: 1em;
}
.border {
border-style: solid;
}
<div class="border">
Non indented
</div>
<br>
<div class="border indent">
Indented
</div>
simply add box-sizing: border-box;
A lot of the answers above are correct, but provided little explanation, so i decided to add this for anyone that might need it.
By default, every element box-sizing parameter is set to content-box.
Which means, that if you set an element width to 200px and then add a padding of 20px on both horizontal end, this would result to a total width of 240px for that element.
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following.
* {
box-sizing: border-box
}
This tells the browser to account for any border and padding in the values you specify for an element's width and height.
So for an element set to border-box with a width of 200px, and a padding of 20px on both sides, it's total width would still remain 200px (160px as content box and 40px as padding).
Hope that helps. You read more on css box-sizing
when I add the padding-left property,
the width of the DIV changes to 220px
Yes, that is exactly according to the standards. That's how it's supposed to work.
Let's say I create another DIV named
anotherdiv exactly the same as newdiv,
and put it inside of newdiv but newdiv
has no padding and anotherdiv has
padding-left: 20px. I get the same
thing, newdiv's width will be 220px;
No, newdiv will remain 200px wide.
This would work in all cases, with this the extra padding included in predefined width
box-sizing: border-box;
just change your div width to 160px
if you have a padding of 20px it adds 40px extra to the width of your div so you need to subtract 40px from the width in order to keep your div looking normal and not distorted with extra width on it and your text all messed up.