I have a parent div inside which I have multiple divs which are children of parent div, But I don't get that why those child divs are overflowing outside the parent div,
I want parent div to adjust it's height according to the number of child divs inside it.
Heres the fiddle
Just make overflow:hidden instead of overflow:visible
Demo
Float #downloads left.
http://jsfiddle.net/CvMNH/1/
Either float #downloads left, or use overflow:hidden:
#downloads
{
background-color: #EEEEEE;
border: 1px solid #CCCDCF;
padding: 5px;
line-height: 25px;
overflow:hidden;
}
or:
#downloads
{
background-color: #EEEEEE;
border: 1px solid #CCCDCF;
padding: 5px;
line-height: 25px;
float: left;
}
overflow: hidden will make the overflowing child content simply hidden, which, I believe, is not what you are trying to achieve.
To expand the parent div to show all child content, either specify overflow: auto on the parent (may have side effects in some browsers), or put
<div style="clear: both"></div>
as the last child in your parent div.
Related
I would like to use the CSS :before selector to create a copy of my current div styles, and overlay it on top of my initial div. But I am unable to do this, without changing the :before position.
Why does this happen, and how can I assure that the position of these two is always the same?
.example {
margin: 100px;
height: 100px;
width: 100px;
background-color: transparent;
border: 5px solid red;
border-radius: 50%;
border-right-color: transparent;
display: block;
}
.example:before {
content: "";
display: block;
border: 5px solid yellow;
width: 100px;
height: 100px;
background-color: transparent;
border-right-color: transparent;
border-radius: 50%;
}
<div class='example'/>
Why does this happen
Because the ::before pseudo element is rendered as if it was the first child element of the div, so it has to be inside the border of the parent element. It's top left static position is offset by 5px from what you perceive as the dimensions of the parent, but which is actually the border outside of those. That borders are rounded to be circle-shaped might confuse one's perception of things here at first glance. (Thanks DaniP for clarification.)
And so you have stuck a 110px wide and high (5px borders on each side plus 100px width/height) child into an element that itself is just 100px by 100px, so it must overflow out of the parent. Add overflow: hidden to the div, or an outline, and you see where the pseudo child gets cut off.
overlay it on top of my initial div
For example margin:-5px on the pseudo child would do.
Depending on what you want to achieve in the end, it might not be the best approach. For example if the div is eventually going to contain actual (text) content, then the pseudo child would push that out of the way. As an alternative, you could position the div relative, and the pseudo child absolute, with top/left -5px each, that would achieve the same positioning of the child. If it needs to be behind content, add z-index.
I'm having a very frustrating situation with margins.. I have a div in the top of my markup that is floated to the right.
.grey{
float:right;
width:200px;
}
I need to apply some styles (background and margin) to the first paragraph after.
.blue{
background-color: blue;
margin: 10px;
overflow:hidden;
}
Now I have to make the paragraph "overflow: hidden" so the background doesn't extend under the floated div, but I have 2 strange problems.
the margin doesn't seem to apply to the side of the paragraph that touches the float;
the margin seems to apply to the floated element beside it..
Here's a fiddle.
http://jsfiddle.net/whiteatom/Nkfzg/6/
Could anyone tell me how to get the margin space between the "Blue" element and the floated one? and could anyone tell me how to make my floated element not have these phantom margins?
Cheers,
whiteatom
You need to apply a left margin to the floating element in order to space it away from the paragraph:
.grey {
float: right;
width: 200px;
margin-left: 10px;
}
As mentioned, margin collapse causes the top margin of your paragraph to affect the page body instead. This causes it to push both the paragraph and the floating element down.
To remove the top margin from the floating element, you have two options (choose only one):
Cancel margin collapse by floating the body:
body {
float: left;
}
This causes the margin to affect only the paragraph. Updated fiddle
Apply a negative top margin to your floating element:
.grey {
float: right;
width: 200px;
margin-left: 10px;
margin-top: -10px;
}
Here, you're shifting the floating element up to counter the margin collapse, which remains in effect. Updated fiddle
If the .grey div is always going to be 200px wide, just change the margin of the .blue div to be width + 10px. Like so:
.blue {
border: 1px solid red;
background-color: blue;
margin: 10px 210px 10px 10px;
};
Here's an updated fiddle.
I have a simple child div nested inside a parent div, like so...
I am trying to understand why I cannot move the child div down (ex. 25px), in relation to the parent div, by using margin-top: 25px, unless I give the parent div a border. I am thinking that the child div is using the border as a reference point, which is why the margin-top actually works once the border is applied. That is all fine and dandy, but in the specific example I'm working on, the parent div has a background image, and I don't want to give it a border. But without a border, the child div won't move!
<body>
<div id="main">
<div id="child">
</div>
</div>
</body
#main {width: 500px;
border: 1px solid black;
height: 500px;
background-color: red;
margin: auto;
margin-top: 200px;
}
#child {width: 100px;
height: 100px;
background: blue;
position: relative;
top: 5px;
}
I had this issue few days ago , I resolved it by adding a small padding (1px) to the parent div , and then use margin on the child div.
You should rather give display:inline-block; property to child div.
I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
}
At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):
#content {
font-family: Lucida sans unicode !important;
color: #CECBBB;
text-align: justify;
position: absolute;
top: 210px;
padding: 20px 40px;
}
From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.
I'd be grateful for some help.
Thanks,
Nick
Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.
IMHO, you have many solutions:
Use floated layout, instead of absolute positioned layout
Hardcode the height of container element
Use JavaScript to always update the height of the container element.
If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).
However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).
#content {
color: #CECBBB;
font-family: Lucida sans unicode !important;
margin-top: 40px;
padding: 20px 40px;
text-align: justify;
}
add a margin-top and remove the position absolute will do this.
Expanding a bit on Cecil's answer here.
One can position divs with margins instead, in order to make sure parent grows with child.
Se this fiddle
https://jsfiddle.net/944oahmy/10/
Where the following css is used
#parent {
border: 1px solid blue;
margin-top: -5px;
margin-left: 10px;
display: inline-block;
}
#child {
border: 1px solid red;
margin-top: 75px;
margin-left: 150px;
width: 500px;
}
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.