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>
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 have 3 divs, an image div, a text div and another image div
http://jsfiddle.net/m02pw4wk/4/
<div id="1" style="display:inline-block; width:100px">
<span style="margin:0;">Center<span>
</div>
I want to center the span text in its parent div
I tried vertical-align on the text but no success, also I see that there is a small margin, ou padding below the text, where is it coming from ?
Any pointing on the solution would be helpful
Cheers
You need to change the vertical-align property for the img element - not the text. It's worth noting that the default value for this property is baseline, thus the image element is aligned to the baseline of the text. Values such as top/bottom/middle will change this behavior.
Updated Example
img { vertical-align: middle; }
It's also worth noting that ids are suppose to be unique.
<div id="userbox" style="float:right; background-color:grey;display:table;">
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />
</div>
<div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
<span style="margin:0;">Center<span>
</div>
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />
</div>
</div>
Given the following example at:
http://jsfiddle.net/DLHGs/1/
Is it possible to have the bye element to render below hi, but still remain to the right of the red block? (Rather than on the same line)
To clarify, I dont want to have any uses of <br />, and the float:left applied to hi is not removable, and I dont want to set any other width or height properties other than those already specified.
Edit:
Solution: http://jsfiddle.net/T4XMq/
What about this?
I added float:left to the div wrapping the "hi" and "bye" and also set "bye" to clear:left
<div>
<div style="width:30px; height:300px; background:red; float:left;"></div>
<div style="float:left">
<div style="float:left;">hi</div>
<div style="clear:both;">bye</div>
</div>
</div>
Well i can see that a normal clear:both put bye way under the red box. If you can not make hi float:right instead, and use <div style="clear:right">bye</div>, a simple linebreak will do in this case:
<div style="float:left;">hi</div>
<br />
<div>bye</div>
You can wrap both elements in a div with float:left.
<div style="float: left;">
<div>hi</div>
<div>bye</div>
</div>
Fiddle: http://jsfiddle.net/DLHGs/8/
<div>
<div style="width:30px; height:300px; background:red; float:left;"></div>
<div style="float:left;">
<div style="float:left;">hi</div>
<div style="">bye</div>
</div>
</div>
I have two stacked divs contains child elements and what i want is if I set visibility to hidden to the first div it should disppear and second div under the first one should take the place of first div by maintaining the position of child elements inside the second div.
here is the code.
<div id="wrapper">
<div id="first" style="top:10px; width:400px; border-style:solid;border-width:1px;">
A quick brown fox jumps over the lazy dog..................
</div>
<div id="second" style="top:100px;width:400px; border-style:solid; border-width:1px;">
<div id="child1" style="margin-left:250px">
21st, October 2011
</div>
</div>
<div>
Use display:none instead of visibility:hidden
The CSS visibility: hidden; will only hide the element, it will still reserve space for it in the document flow.
What you want is display: none; which will remove the element entirely.
Example coded here. (click the #second div to activate.
If you do something like this:
<div id="wrapper" style="width:400px;">
<div id="first" style="display:none;top:10px; border-style:solid;border-width:1px;">
A quick brown fox jumps over the lazy dog..................
</div>
<div id="second" style="border-style:solid; border-width:1px;">
<div id="child1" style="margin-left:250px">
21st, October 2011
</div>
</div>
</div>
putting the wrapper around both objects, then the second div will jump up to the first div's position if the first div is hidden.
<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/