Width 100% is not working! My footer is going outside the #wrap and I don't want to set exact pixels to it.
Any solution?
live example.
#wrap {
border: 1px solid #ccc;
clear: both;
display: table;
vertical-align: middle;
position: relative;
width: 400px;
margin: 0 auto 10px;
padding: 10px;
}
footer {
clear: both;
background: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
float: left;
margin: 0;
padding: 10px;
width: 100%;
overflow: auto;
min-height: 100%;
height: auto !important;
}
<div id=wrap>
<footer>© 2013 PUAction · Terms · Disclaimer · Privacy · Login</footer>
</div>
This is the default box-model behavior :
Width = width + padding-left + padding-right + border-left + border-right
Therefore, your width is 100% + 2*10px which is larger than the footer's width...
You can :
Remove width: 100% which will result on an implicit use of width: auto (which is just fine because block elements automatically fill the width of their parent)
Use the box-sizing: border-box properties
For deeper explanations, just take a look at this resource and this one!
Regards.
You're using display:table on the container. That means the direct child (in this case "footer") should be display:table-cell.
When you say width: 100%; that doesn't include the padding, so you have width:100% + padding: 10px that gives you 100% + 20px width.
A simple solution is to add box-sizing: border-box;
footer { box-sizing: border-box; }
Demo
Perfect !
Thanks guys !
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
http://jsfiddle.net/2P6KR/9/
Related
Thanks to everyone, I am Italian, sorry for my English, I would like a clarification:
Why do not all browsers see margin-right, while developer tools have margin-right? (Firefox does not show margin-bottom, in addition to margin-right).
CSS
html
{
background-color:gold;
width: 100%;
height: 100%;
padding: 6px;
border: solid black 10px;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 20px;
}
In the box model I have the margin-right, in the browser it is not considered.
Chrome browser and developer tools box-model:
Your box is over-constrained
CSS 2.2 says:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
If all of the above have a computed value other than 'auto', the
values are said to be "over-constrained" and one of the used values
will have to be different from its computed value. If the 'direction'
property of the containing block has the value 'ltr', the specified
value of 'margin-right' is ignored and the value is calculated so as
to make the equality true. If the value of 'direction' is 'rtl', this
happens to 'margin-left' instead.
From that, you can see that browsers automatically adjust the right margin, overriding the setting you give it.
You should take off the width from your css. since you are using margin, you are already telling the browser to only show a space of what you have allowed. It does not affect the height cos the height is pretty much infinite.
So you should have something like this
html
{
background-color:gold;
height: 100%;
padding: 6px;
border: solid black 10px;
margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 20px;
}
Browsers do not always handle all css properties on the html element consistently because it has no parent. If I'm understanding what you want correctly, I'd recommend this if you want to avoid a wrapper div, but it might be a bit unstable:
* {
box-sizing: border-box
}
html {
background-color:gold;
width: 100%;
height: 100%;
padding: 10px 50px 10px 20px;
margin: 0;
}
body {
width: 100%;
height: 100%;
padding: 6px;
border: solid black 10px;
margin: 0;
}
See this working example
Alternately you can use a wrapper div and avoid doing anything to the HTML tag other than normalizing it (this is what I would recommend):
<html>
<body>
<div class="main">
<!-- All your content -->
</div>
</body>
</html>
* {
box-sizing: border-box
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body{
background-color:gold;
padding: 10px 50px 10px 20px;
}
div.main {
width: 100%;
height: 100%;
padding: 6px;
border: solid black 10px;
margin: 0;
}
As shown here
I want to create a side navigation, which should be full height of the browser window. Each menu item (DT) has additional element (DD) where I will put some filters later on. When I click a menu item, its additional element opens, and pushes all other closed items to bottom of the menu. The problem is that once it's opened the size of the parent DL exceeds the screen instead of staying full height.
Could you please suggest a solution to resolve the issue.
HTML
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
CSS
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: block;
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: block;
height: 100%;
}
JSFIDDLE
Please do remove dd.active { height: 100% } and check it...
Think this will help you.
The !important declaration is unnecessary. If you know the number of menu items (e.g. 2) and their height (e.g. 40px), maybe this could help:
dd.active {
height: calc(100% - 80px);
}
An alternative (and equally inelegant) solution would be to use tables. Setting the table height to 100% will automatically stretch the rows with unspecified height to fill the remaining space (so only the rows that correspond to the menu items should have their height specified).
My solution:
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: table; /*changed*/
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: table-row; /*changed*/
height: 100%;
}
UPDATED JSFIDDLE
I have a simple div in which I have 2 textarea. I set the textarea's width to 100% but then it just go a little out of the div.
See this fiddle.
HTML:
<div class="offer_a_help">
<textarea></textarea>
<br/>
<textarea></textarea>
</div>
CSS:
.offer_a_help {
width: 350px;
height: 250px;
position: absolute;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border-radius: 5px;
border: 1px solid #bbb;
}
.offer_a_help textarea {
width: 100%;
}
Why is that happening and what's the simplest way to fix this?
I believe it may be an issue with the textarea having either a border or padding. Both of those would be calculated with the 100% width and cause the width to be wider than the container.
You can add border-box to make the padding and border be calculated WITH the width instead of IN ADDITION to
Try adding:
.offer_a_help textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You need to reset padding and margin (I've set margin to -1 to accomodate outer div border):
Demo
.offer_a_help textarea {
width: 100%;
margin: 3px -1px;
padding: 0;
}
Change your css to this.
.offer_a_help textarea {
width: 100%;
margin:0;
padding:0;
}
You can also add padding to your .offer_a_help class
http://jsfiddle.net/YE5MP/5/
Here's a puzzle. Basic page, one element:
http://jsfiddle.net/PZj6t/
HTML:
<div id="container"></div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
}
That one looks how I want, with the #container neatly flush to the top. But when I add a nested element:
http://jsfiddle.net/PZj6t/1/
HTML:
<div id="container">
<nav id="topnav"></nav>
</div>
CSS (new):
#topnav {
width: 100%;
height: 40px;
margin: 30px 0;
background-color: red;
}
The container jumps down. It seems that the margin-top from #topnav is somehow being passed to the container, and now the page has a scrollbar I don't want. (I'm testing in Chrome.) How do I prevent this?
(As a further mystery, if I add border: 1px solid white; to the #container's CSS, the jump disappears. Which would be fine, except that also adds two pixels worth of undesirable scroll to the page.)
This is due to a feature of CSS called margin collapsing. If there is no padding or border on a parent element, the parent and its child's margins "collapse" to the greater value of the two and is essentially applied to the parent.
For your situation, I would suggest simply adding an additional inner wrap within the container, and throwing some padding on it to simulate the margin effect you're looking for: http://jsfiddle.net/PZj6t/3/
Anything within the #inner div or below should behave as you expect, as margins only collapse when they are at the edge of their parent (and no padding or borders are present).
display:inline-block;
On Your nav element appears will fix this. Its to do with margin-collapsing see here for more detail.
Jblasco is correct, this is a neater solution though: http://jsfiddle.net/PZj6t/4/
#container {
position: relative;
margin: -1px auto 0;
width: 400px;
height: 100%;
padding-top:1px;
background-color: #666;
}
#topnav {
width: 100%;
height: 40px;
margin: 29px 0 30px;
background-color: red;
}
#container {
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
border:1px solid;
}
http://jsfiddle.net/PZj6t/12/
Update:
http://jsfiddle.net/PZj6t/1/
apply display:inline-block; on both container and topnav
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}