There is an odd problem here that I don't really understand.
I'm trying to just make the middle of the 3 vertical divs have another div inside it which has a black border and 10px of margin on all sides.
However, on the right side there is no visible margin, and on the bottom the div flows right out of the parent div and out of site into the footer.
What am I doing wrong? CSS for the middle div pair...
#mainContent {
height: 100%;
width: 100%;
}
#platter {
border: 1px solid black;
margin: 10px;
height: 100%;
width: 100%;
}
http://jsfiddle.net/Lf7wuty0/1/
Solution: http://jsfiddle.net/efordek0/1/
Borders are applied outside of the element, therefore if your element is width:100%; with a border: 1px solid black;, the border will fall outside of your desired constraint.
Instead of applying a margin to the inner-div #platter, apply a padding to the outer div #mainContent. This way the 100% values will still apply but be subtracted by the 10px padding of the #mainContent and your borders remain inside the desired area.
Here's the correct solution : http://jsfiddle.net/5L4tnwtg/
The changes:
Add:
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
Modify:
#mainContent {
height: 100%;
width:100%;
padding: 10px;
}
#platter {
border: 1px solid black;
height: 100%;
width: 100%;
}
Related
I am placing a div inside another div. Please see the code below JS Fiddle link
HTML:
<body>
<div>
<div class="wrapper"><div class="set1"></div></div>
</div>
</body>
CSS:
* {
box-sizing: border-box;
}
.wrapper{
border: 1px solid black;
padding: 0;
}
.set1{
width: 100px;
height: 100px;
background-color: grey;
border: 5px solid;
margin: 0;
}
Here I am expecting the height of parent div = the height of child. But that's not the case as seen in fig below. I have applied box-sizing : border-box hence the border for the parent should be included in it's height but is not the case. Can you please explain? Also how can I make the child to fully occupy the parent in such case?
It is because of border(1px each side), use maybe outline instead.
set1
wrapper
As already mentioned, you are using a border on wrapper which adds these 2px to height.
If you want that the wrapper has the same height as the parent, you can use a margin on set1 div.
Like this:
.set1{
width: 100px;
height: 100px;
background-color: grey;
border: 5px solid;
margin: -1px 0;
}
So the margin should always have the height of the wrapper border.
Here your working fiddle: https://jsfiddle.net/gzs9u7m2/2/
As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
Use a padding in the green container instead of a margin on the orange element.
Use padding instead of margin:
.body .container {
...
padding-top: 30px;
}
Not sure if this will work in your case, but I just solved this with the following CSS properties
#element {
padding-top: 1px;
margin-top: -1px;
}
#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
You read this document:
Box model - Margin collapsing
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
Not sure how hackish this sounds, but how about adding a transparent border?
I have a simple div with width:100%and position:fixed to bottom.
This is my CSS:
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
bottom: 0;
margin:0 5px;
}
When I apply margin left and right using the shorthand property, the footer is being pushed to the right which is very strange.
I created a fiddle for you to play with: Fiddle Demo
You could use calc():
jsFiddle example
#footer {
width: calc(100% - 12px);
border: 1px solid #000000;
position:fixed;
margin:0 5px;
}
body {
margin:0;
padding:0;
}
The 12px in the calc comes from the 5px of each margin, plus the 1px for the left and right border.
Or option #2 (no width or calc() needed). Simply set the left and right to 5px and the footer will stretch the full width, minus those amounts:
#footer {
border: 1px solid #000000;
position:fixed;
left:5px;
right:5px;
}
body {
margin:0;
padding:0;
}
jsFiddle example
I would do two things:
Set box-sizing: border-box. This will ensure paddings dont affect the outer width of your element.
Set margin and padding to 0 for html and body elements as these have applied a margin by default in most browsers.
You can now set the element padding instead of trying a workaround with the margin values.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
padding:0 5px;
}
Can be tested in this JSFiddle
You could use bottom: 0; In my code below I also used padding rather than margin, padding will affect the 'margins' within the div where as margin refers to the outside.
#footer {
width: 100%;
border: 1px solid #000000;
position: fixed;
margin: 0px;
bottom: 0px;
padding: 0px 5px;
}
http://jsfiddle.net/3w6xE/3/
As an alternative to using calc(), (which I think is a good solution, despite the limited browser support), you could wrap the element:
<div class="footer_wrapper">
<div class="footer">test</div>
</div>
The parent, wrapper element is fixed with a width of 100%, and the child .footer element has the margin. As others have mentioned, use box-sizing:border-box in order to include the border in the element's width calculations. Support for box-sizing can be seen here.
Example Here
.footer_wrapper {
width: 100%;
position:fixed;
}
.footer_wrapper > .footer {
border:1px solid #000;
margin:0 5px;
box-sizing:border-box;
}
As an alternative to using a margin, you could also just add left:5px/right:5px.
If you want the reason behind why your example was behaving as it was, it's simply because a fixed element's position is relative to the viewport. The element therefore has a width of 100%, of the window thus explaining why the margin wasn't behaving as expected. Usage of calc() allows you to subtract the margin from the width.
I have an error with my HTML/CSS that I would like to solve.
I have multiple links setup as divs. Their width is 10%. As so, all 10 Divs fit inside the parent div. I would like the links (10 divs) to have a border to distinguish them apart. If I try to add a border at all, the last div jumps out of the parent div. Is there a way to fix this? I tried using overflow:auto, didn't work. Mostly what Im looking to find is a way to make a border that goes inside the div, if that's possible that is.
body {
background-color: #574B59;
}
.header {
height: 87px;
width: auto;
border: 4px solid black;
margin: 20px;
background-color: white;
text-align:center;
font-size: 20px;
}
.links {
height: 25px;
width: auto;
border: 3px solid black;
margin: auto;
}
.body{
}
.subheader{
}
.linkss {
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Look at .Linkss
Either reduce the width of each div by the border-width (multiplied by 2) or you can apply a fake border by using the box-shadow property with a blur of 1px.
box-shadow: 0px 0px 1px #000000;
The reason is 10% plus even a 1px border is larger than 10% thus, too large for 10 to fit. An easy solution it to make a border on something inside the div, and make that fill the whole parent. But please post some code so we may provide a more better solution.
Add this to the CSS for the divs:
.linkss {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Or you can set the width to calc(10% - 2px).
.linkss {
-moz-box-sizing: border-box;
box-sizing: border-box;
/* plus all your other properties here*/
}
One solution is to set a negative margin of 1 pixel on your linkss see example below
.linkss {
margin: 0 -1px 0 -1px;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
I have done this before but sometimes depending you on your layout or design this may need a little tweaking, let me know if this helped. Happy fridays!
One fix for layout issues like this is to apply the border to an element within the div, in your case, the <a> element.
.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}
Tested in FireFox.
The other solution would be to reduce your 10% width and apply the border as a percentage width; but trying to get it the same on the top & bottom would then become a headache.
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example