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
Related
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
i've a div block where i need to show a block always in bottom of the section no matter if above section is empty inner div should be in the bottom section div like attached
this is what i am doing
<div class="col-md-6 col-xs-6" style="position:relative; min-height:300px;">
Content for upper section
<div class="row" style="position:absolute; bottom:0 !important;">
<div class="col-xs-12">
Div in footer section of the parent div
</div>
</div>
</div>
what i expect even f there is no content in top section bottom div should be in footer of the parent div instead of starting from the top section , as in attached image but that is not the case please help me to solve it
Check your spellings, its a typo:
Change positoin to position
You must have some custom styling because i just tested your code and it works. The row-class is stuck to the bottom as it is supposed to.
By the way, all col-* classes is position relative by bootstrap default. No need to specify it in the style tag.
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 am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.