I have three nested DIV elements like this:
<div id="outer">
<div id="innerA">
<div id="innerB">
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
</div>
</div>
</div>
#innerA has a height of 100% which makes it as big as #outer. #innerB's height is left to be auto so it gets as high as its contents. Now when i set #innerB to have margin-top: 10px for example i would expect that #innerB will get a margin in relation to #innerA. What happens instead is that #innerA gets this margin in relation to #outer.
How is this possible? It seems like this has nothing to do with box-sizing at least its not fixable this way.
Here's the CSS:
#outer {
width: 500px;
height: 300px;
background: yellow;
overflow: auto;
}
#innerA {
width: 100%;
height: 100%;
background: green;
}
#innerB {
margin-top: 10px;
background: blue;
}
and the fiddle:
http://jsfiddle.net/7e2H5/
(Here i would expect that the green DIV fits the yellow one, and that there are 10px of the green one visible above the blue DIV).
Seems like it's a "Margin collapsing" problem. Check the DEMO
I've added padding: 1px 0;
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
Just found this: margin-top in a nested div
This is interesting but I wouldn't say that adding padding is a more appropriate answer.
#innerA {
width: 100%;
height: 100%;
background: green;
display: inline-block;
}
Here's a demo on JSFiddle.
I hope this helps!
I would replace #innerb margin with #innera padding
According to the Mozilla link provided by Chris, adding floats also prevents margins from collapsing:
Add float: left; to #innerA as shown in this fiddle:
http://jsfiddle.net/7e2H5/10/
See: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
Related
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
In the following fiddle:
http://jsfiddle.net/6qF7Q/1/
I have a yellow content area that has a min-height set to 100% - it's the background div to all pages and should take up at least 100% of the available height. If there's overflow, it expands vertically.
Then, within that yellow container, I have another child div (red) that I would like to take up as much vertical space as its parent. It seems I can't set height because the parent element only has min-height, and setting min-height on the red element doesn't work either.
So right now, the yellow is behaving as I'd like, but the red is not expanding. How can this be achieved with CSS only?
CSS:
.browser {
background-color: blue;
height: 600px;
width: 200px;
position: relative;
}
.innercontent {
min-height: 100%;
background-color: red;
width: 100%;
color: white;
padding: 2px;
}
.content {
background-color: yellow;
width: 100%;
min-height: calc(100% - 30px);
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: orange;
height: 20px;
}
HTML:
<div class="browser">
<div class="content">
<div class="innercontent">
This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.
</div>
should not see any yellow
</div>
<div class="footer"></div>
</div>
Take a look at this
I added this
*{
box-sizing: border-box;
}
html, body {
/* Make the body to be as tall as browser window */
height: 100%;
}
and changed some attributes u can see at fiddle
If thats what you want you should read this article
http://css-tricks.com/a-couple-of-use-cases-for-calc/
I made that based in this use-cases
I think this might solve your issue?
I have changed the innercontent to position: absolute
http://jsfiddle.net/6qF7Q/7/
If you have text in the yellow section it will always show.
Also, you're going to have to do a bit of fiddling to get your footer positioned correctly since you are going to have an overflowing absolute element. I think a full body position: relative wrapper will solve it.
P.S I don't see why you would need a .content AND a .innercontent if you don't want the .content to show?
This works much better and doesn't give you footer grief: http://jsfiddle.net/6qF7Q/9/
Whenever I resize the browser, the 2nd div in .container positions below the first one.
<div class = "container">
<div class = "one"></div>
<div class = "two"></div>
</div>
The divs are really blank.
CSS
.container{
overflow: hidden;
width: 810px;
min-width: 810px;
}
.one,.two{
width: 300px;
height: 450px;
}
.one{float:left}
I just realized that, you are not floating the other element, this is causing it to shift down, you should use float: left; or right as it's a div so it will take up entire horizontal space, and hence it is pushed down.
Demo
.one, .two{
width: 300px;
height: 450px;
float:left; /* Float both elements */
background: #f00;
}
Alternative
You should use display: inline-block; and white-space: nowrap; to prevent the wrapping of the elements
Demo
This will gave you the same effect, the only thing is 4px white space, you can simply use
.two {
margin-left: -4px;
}
the above will fix the white space issue for you
Demo 2
Add this CSS. Demo.
.two {
margin-left: 300px;
}
PS: When works with float, you should clearfix.
Give your body a minimum width:
body {
min-width: 1110px;
}
Then, when the viewport gets smaller than 1110px the scrollbar will appear.
Note: if you add margin, padding or border to the divs, add it to the min-width of the body (or take some extra space).
I have a stack of divs inside of each other, all of which have an ID which specifies CSS only.
But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height. I need it to adjust the heigh to the size of whatever is inside of it (As there will be user submitted data being echoed out possibly in paragraphs with 500+ words.)
#albumhold {
width: 920px;
padding: 10px;
height: auto;
border: 1px solid #E1E1E1;
margin-left: auto;
margin-right: auto;
background-color: #E1E1E1;
background-image: url(../global-images/albumback.png);
background-position: top center;
background-repeat: repeat-x;
}
#albumpic {
display: block;
height: 110px;
width: 110px;
float: left;
border: 1px solid #000;
}
#infohold {
width: 800px;
background-color: #CCC;
float: right;
height: 20px;
}
#albumhead {
width: 800px;
height: 20px;
text-indent: 10px;
border: 1px solid #000;
color: #09F;
}
#albuminfo {
margin-top: 5px;
width: 800px;
float: right;
color: #09F;
word-wrap: break-word;
}
<div id="albumhold">
<div id="albumpic">Pic here</div>
<div id="infohold">
<div id="albumhead">Name | Date</div>
<div id="albuminfo">Information</div>
</div>
</div>
Help is greatly appreciated.
Floated elements don’t take up any vertical space in their containing element.
All of your elements inside #albumhold are floated, apart from #albumhead, which doesn’t look like it’d take up much space.
However, if you add overflow: hidden; to #albumhold (or some other CSS to clear floats inside it), it will expand its height to encompass its floated children.
There are two solutions to fix this:
Use clear:both after the last floated tag. This works good.
If you have fixed height for your div or clipping of content is fine, go with: overflow: hidden
You probably need a clear fix.
Try this:
What methods of ‘clearfix’ can I use?
Add <br style="clear: both" /> after the last floated div worked for me.
Putting a <br clear="all" /> after the last floated div worked the best for me. Thanks to Brent Fiare & Paul Waite for the info that floated divs will not expand the height of the parent div! This has been driving me nuts! ;-}
You have a fixed height on .infohold, so the .albumhold div will only add up to the height of .infohold (20px) + .albumpic (110px) plus any padding or margin which I haven't included there.
Try removing the fixed height on .infohold and see what happens.
You didn't typed the closingtag from the div with id="infohold.
div will not expand if it has other floating divs inside, so remove the float from the internal divs and it will expand.
My css looks like this
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
}
div#header {
background-color: #969696;
height: 80px;
}
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 10px 20px 10px 350px;
}
and my html
<div id="header">
</div>
<div id="mid-bar">
<div id="searchbox">
</div>
</div>
you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div... and not from header div.
I's a known bug: would use padding instead of margin. so:
div#mid-bar {
background: url(images/home.jpg) left no-repeat #6f6565;
height: 200px;
padding-top: 10px;
}
#searchbox {
background-color: #c1c1c1;
width: 200px;
height: 180px;
margin: 0px 20px 10px 350px;
}
Give padding to #mid-bar instead of searchbox margin
I have seen this happen when you don't give margins to parents and the first element, even a child that you give margin to, causes gaps in the parents by creating margins. One way I've overcome this is by using paddings on the parent containers instead of margins.
See your example here with paddings: http://jsbin.com/ememi3
If you are intent on using margins, try setting margin:0; in #mid-bar. Otherwise give #mid-bar a padding-top:10px; and remove top margin from #searchbox.
Everyone seems to agree on this one, padding will work much better then margins will. I looked into it a little and it seems Pixeline is right, it's a known bug in Firefox, hopefully they will fix it in 4.