I use border properties of css. When i don't add overflow properties it no cover all elements of id contents.
#contents{border-radius: 10px; border: 1px solid red;overflow:hidden;}
<div id="contents">
<aside>
<nav>
<ul>
<a class="btn-danger" href="">Home Page</a>
<a class="btn-danger" href="">Main Settings</a>
<a class="btn-danger" href="">Sections</a>
<a class="btn-danger" href="">Pages</a>
<a class="btn-danger" href="">Comments</a>
<a class="btn-danger" href="">Library</a>
</ul>
</nav>
</aside>
<section id="page">
<p>Hello </p>
</section>
</div>
enter image description here
enter image description here
Why add overflow element into code can be corrected???
From what I can see, you have a floating elements problem, the issue is.
A CSS clearfix is used to fix issues related to floating child
elements within a parent element. Without a clearfix your child
elements wont behave as you expect them too. When a HTML element is
floated it can appear to sit outside its parent element and that means
it wont adjust the parents height accordingly.
So in your case the inner elements are floating elements. Thus the container is not detecting the height properly.
Why it works when you use overflow:hidden?
The Overflow Method relies on setting the overflow CSS property on a
parent element. If this property is set to auto or hidden on the
parent element, the parent will expand to contain the floats,
effectively clearing it for succeeding elements.
So this may be the reason why the parent is filling up the space.
To read more on CSS clearfixes Read here and here
Related
So I have been trying to wrap my mind around this and cant figure it out why.
Note: Margin and padding is 0.
The 1st example is
<div> <!-- Gray Box -->
<div> <!-- Purple Box -->
</div>
</div>
I have two images - One is float, the other is inline-block.
The height of the div is shown by the gray color.
float: left;
display: inline-block;
The 2nd example is
<div>
<ul>
<a href = "#">
<li>
<img src = "...">
</li>
</a>
</ul>
</div>
Again, left and inline-block do different things
float: left;
display: inline-block;
Bottom Line
Any suggestions beside the question is welcome.
I don't know why margin / padding is changing and why div size matters by float and display. Thanks
There are 2 problems here.
1) Like someone mentioned in the comments, inline block takes space into account, meaning on the parent div you should have:
font-size:0;
2) Floating takes the element out of the document flow, meaning the parent will expand only past the last non floated child element. To fix this you should put a clearfix class in your css and add it to the parent of the floated element(s).
.clearfix::after{
content:'';
display:block;
clear:both;
}
So once you've done this your first example should look like this:
<div class="clearfix"> <!-- Gray Box -->
<div style="float:left"> <!-- Purple Box -->
</div>
</div>
Now the gray box should expand past the purple box;
As a matter of consistency i don't think you should mix inline-block with floating. One, it won't work on the same element and 2, they are designed for different things.
I have this code: http://jsfiddle.net/LW9DJ/1/
I want the overlay text to appear centered (which is currently working), but I don't want the css class 'mycell' to have the width or height attributes set, I want them inherited from 'container' class.
This is because I am going to implement this in a responsive website in which the width and height of 'container' class are automatically changed.
<div class="container">
<img src="http://i.imgur.com/o7iAFMu.jpg" class="test" />
<div class="overlay">
<div class="mycell">Some Text</div>
</div>
</div>
You should make left-margin and right-margin properties of style, auto. When you assign auto values to these two properties, the div would be located at the center.
I have the following HTML/CSS code:
<div id="container" style="padding:5px; width:600px;">
<div id="panel">
<a style="padding:5px; color:#ffffff; background-color:#000000;">Page 1</a>
<!-- Other anchor elements -->
</div>
<!-- Other panels -->
</div>
I struggle to understand why the #panel element sits comfortably within the #container; obeying the padding rules of it, whereas padding of the anchor element within the #panel overlaps the #container. Would anyone mind explaining why this is the case, and in doing so, perhaps suggest a fix?
I think because its an inline element this occurs, if you change its display to inline-block the padding no longer overlaps. DEMO
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>
For example:
<!-- make sure the link block fulfill the whole container -->
a {display:block;float:left;border:1px solid #ccc; width:48%}
<!-- work great in width:400px; -->
<div id=container1 style="width:400px">
<a href="" >first element</a>
<a href="" >second element</a>
</div>
<!-- not good! no enough space for second link block in my situation test in firefox-->
<div id=container1 style="width:200px">
<a href="" >first element</a>
<a href="" >second element</a>
</div>
So, is there a way to make them all fulfill and align side by side in different width of containers!?
Thank you very much!!
It looks like you're making a list of links - if this is the case, you should use (instead of <div>) the <ul> tag with <li> and <a> inside.
If you do this you can apply the width/float rules to the <li> instead, and apply the border and display: block to the <a> tag.
I changed your width to 50%, as that's obviously what you're trying to achieve.
Live Demo
Here are two alternate solutions which will work only in modern browsers/IE8+:
You can use the outline property instead of border.
See: https://developer.mozilla.org/en/CSS/outline
Live Demo
You can use box-sizing: border-box.
See: https://developer.mozilla.org/en/CSS/box-sizing
Live Demo
Set margin:0; padding:0; for both container1 and a tags. That could be the problem.in