<html>
<div style="width:200px;">
<div style="background:red;height:5px"></div>
<div style="background:yellow">
Magnets?
</div>
<div style="background:green;height:5px"></div>
</div>
</html>
Rendering with "Magnets?" wrapped in h3 tags
How come the divs cease to be contiguous if "Magnets?" is wrapped in a paragraph or heading tag?
The elements you're wrapping with likely have default margins.
You need to zero out the margins on the h3 or p.
<html>
<div style="width:200px;">
<div style="background:red;height:5px"></div>
<div style="background:yellow">
<h3 style="margin:0px;">Magnets?</h3>
</div>
<div style="background:green;height:5px"></div>
</div>
</html>
If you want to keep the margin on the h3 and other elements then you need to fix the problem of the margins of the elements within the div collapsing. There are several ways to fix this:
Add a border to the div
Add a 1px border to the div
Remove margin from the element and add it to the div instead.
The following link provides more info:
http://www.complexspiral.com/publications/uncollapsing-margins/
Related
I am using TailwindCSS and have a nested HTML structure like so:
<div class="my-4">
<div class="my-4">
<!-- Some Content -->
</div>
</div>
What I don't understand is why the inner div is placed in such a way that its border aligns with the border of the outer div and the margins which I applied overlap. However, I noticed that when I add a border around the outer div, the margins suddenly behave how i would expect: the outer div contains the elements including margins.
Here is a jsfiddle to illustrate my point: https://jsfiddle.net/1vptz5fc/
How can I get the divs to behave like they do with borders, just without adding a border?
Is would say you should use the padding py that will fix it , look:
.test {
border: 1px solid red;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class=" my-4 bg-green-500 py-1" id="parent">
<div class="my-4">
with py
</div>
<div class="my-4">
Other Content
</div>
</div>
<button type="button" onclick="document.getElementById('parent').style.border = 'none';">
Click Me
</button>
<div class="test my-4 bg-green-500" id="parent">
<div class="my-4">
with border
</div>
<div class="my-4">
Other Content
</div>
</div>
<button type="button" onclick="document.getElementById('parent').style.border = 'none';">
Click Me
</button>
It seems like it's the default behaviour if there's no element between parent and child.
Margin collapsing occurs in three basic cases:
Adjacent siblings
No content separating parent and descendants
Empty blocks
There's a stackoverflow thread that might help you:
How to disable margin-collapsing?
More information on margin collapse:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
You can probably add display: inline-block; to get the expected results regarding the margin but you will have to adjust with other styles.
I am trying to add space between elements <header> and section <section> but they are stuck to each other, such that when I apply margin to the bottom of the the top element or at the top of the bottom element, the top element moves down along with the bottom element, this only happened after I added the footer.
And I did a search but I was not able to find solution for this.
Thanks to All..
.hclass {margin-bottom:20;} // header - the top most part, need space below this
.tryi {margin:top;} //section the second part, need space above this
#divfootr {width:100%;height:auto;position:absolute;bottom:0;text-align:center;} // footer code
<header class="hclass">
<nav id="indxpg">
<div class="mainnav">
</div>
</nav>
</header>
<section class="tryi">
<div id="logotable">
</div>
</section>
<footer class="footer">
<div id="divfootr">
<p><span class="copyright"><strong>© 2016</strong></span></p>
</div>
</footer>
Your way to add margin is incorrect. It must be something like this (for a fixed margin) :
margin-top:20px;
Your missing px.
.hclass{margin-top:20px}
I want to use span inside div
div is used to put a red horizontal line
<div style="background-color:red;">
</div>
span is used inside div to put elements to right
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>
But the horizontal line do not get red color, only ABC is shown in right, infact there is no effect of div style like width:900px......why?
I'd suggest:
<div style="background-color:red; text-align:right;">ABC</div>
Otherwise, you need to add overflow:auto to your div's style definition if you do want to leverage the <span> as in your original example.
Cheers
Add overflow:auto to the div:
<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>
jsFiddle example
Floating the inner span causes the div to essentially collapse, and adding the overflow rule allows it to regain the span.
The float is not giving your div any height. You need to follow it up with a clear. Try this:
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
<div style="clear: both;"></div>
</div>
You need to add the property overflow:hidden; in your DIV.
Below I mentioned the Code:
<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.
I have a div that seems to not be wrapping its inner content
http://c5.dealercontrol.net/inventory/p1
the div id="container" has a black bg and should be wrapping the inner content how can I get it to show the style around all the inner content...
You need to put in a "clear" div or property in your html/css. The code you need is below and i have typed quick example as to where to place it.
<div style="clear:both"></div>
You would place this tag inside your container div, but after all of the inner contents.
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div style="clear:both"></div>
</div>
Hope it helps...
This may be unrelated, but it seems that <div id="sort-results"> is missing its closing tag.