I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.
However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.
Here is a beautiful mspaint depiction of the situation:
Note that the green part of the black horizontal line is behind the floating div.
How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
I've had this problem before, and I wasn't sure if it was solvable.
In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.
In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.
I hope this helps.
Hristo
p.s. excellent mspaint skillz :)
You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.
Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.
Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.
Related
I am trying to make the green div's height to be fluid when adding content in the blue div, the red div work as spected but not the green one.
So I want the green div to be as fluid as the red one when adding content to the blu div.
Here is the code http://jsbin.com/ivobav/1/edit
Well you have multiple things at play here. First, if you want a fluid height on green div, you need to remove height: 90% from the CSS. You will notice this will make your green div disappear (because it has no relative positioned content in it).
If you type something in the green div, you will notice it grows. Now, I am assuming you want the red div to nest inside the green div. In order to do this, you need to remove the absolute positioning on the red div.
If you do this, the red div now disappears. That is because the blue div is floated inside of it, meaning it will not grow to hold the blue div. So simply add overflow: auto; to the red div and you should get what you want.
See the results here:
http://jsbin.com/ivobav/5/edit
This happens because parents don't stretch to fit their float children. To go around this problem, you may either:
not use floats
insert the equivelent of <div style="clear:both"></div> as the last element in the parent container
have otherwise non-floated content inside the parent
Edit: For a more thorough explanation, look at http://www.quirksmode.org/css/clearing.html. Mike's answer is the best way to do it, but unfortunately it won't work on all occasions. Notice that while this seems like a problem for which people have tried to come up with solutions, it's not actually a bug, it's the spec - cue someone to introduce some new standard CSS property to make an element to stretch to fit its floats...
Here is a very simply jsFiddle to demonstrate my problem: http://jsfiddle.net/ryandlf/mSmUv/4/
When an element has a top padding or margin and it sits on the first line within a div, the div does not respect that padding or margin and push the element down. In most cases this isn't an issue, but for example, if I have a button that has a top border and padding the top of the border will be cut off because the div is not taking into consideration the padding value.
Is there a workaround for this other than just blindly setting margins or padding on every container div element and hoping I have added enough to account for any internal element that might be affected?
your link with class button is not a block element, it is inline element. Change this default behaviour by adding dispaly: block to it and it will work as expected. Proof available on jsfiddle.
So to sum up, the problem is not with the div - it is the problem with css - inline elements ignore margin and padding because they cannot 'reserve space'.
UPDATE: To answer your comment, here is the solution you might be looking for
The button element is inline. To get the desired behavior you can set display:inline-block.
Check here
Try to add following to the parent div:
overflow: hidden
I hope it helps!
I want to to get the following result:
________________Title of page
So let's say the html markup is <h1>Title of page</h1> and h1 is set to width:100%and text-align:right, I want it only be underlined on the left side of the title.
Any clue how to accomplish that? I have tried to wrap the title in a <div>, give that a background of white and shift it a bit down, so it overlaps the bottom of the h1-box, however, I'm not sue whether this works 100% cross-browser.
alternative solution:
<div style="width:100%;float:left;border-bottom:1px solid">
<h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>
http://jsfiddle.net/VMCax/1/
You can try this as long as the line is not crucial to display content as it has support on IE8+.
h1:before{content:"________________"}
jsfiddle here
Looks like what you are trying to do would be better achieved with a wrapper container and a float inside. Make the inner div (or floated h1) have a white background. Make the outer div have a repeated (repeat-y) background that is the same spacing as the line-height of the text div.
Make sure the wrapper div respects the floated div (either overflow:hidden or with a clear div at the end of the float.
This will give you the effect you are looking for and should work with multi-line titles as well.
I'd go with CSS generated content, with non-breaking spaces and underline : http://jsfiddle.net/JMVUa/1/
h1:before{
content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
text-decoration: underline;
}
I have several uniform blue elements (<div style="display: inline-block;">) inside a red div inside a purple div. Mockup (imgur).
I would like the blue elements to be left-aligned (as many in a row as will fit in the purple div width), with a red div shrink-wrapped around them. But then I would like the red div be horizontally centered inside the purple div.
I was hoping to do something like this (jsFiddle), but that only works if the red div has a specified width.
Returning to this problem, I have found a solution with inline CSS and no javascript (which were additional constraints I didn't mention).
If it's stupid and it works, it's not stupid! At least that's what I'm telling myself.
My solution is padding the end of the list of child elements with several "invisible" equal-width 0-height inline-block elements. I ended up not needing the "red div" to accomplish this result.
Here is my solution: http://jsfiddle.net/3wVTx/8/
Would putting a margin on #red not work? Granted this would depend on if anything else will be inside of #purple. Is this not what you are looking for? http://jsfiddle.net/3wVTx/3/
<div style="background-color:red">
<div style="display:inline-block;background-color:green;height:20px;width:20px;"></div>
</div>
<div style="background-color:yellow">
<div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div>
</div>
When rendered in FF or Chrome the height of the red div is 26px, whereas the height of the yellow div is 20px. How can I make the red div render the same as the yellow div, but without it containing any text?
just a thought:
as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.
the solution:
to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)
How about putting a zero-width space () in the "empty" node?
If you want to have a specific height, use
min-height: 1em;
Using a space of some sort is a different height in some circumstances.
It's lame, but you could add a to the empty div.
inline-block is a funny display type and without content because other properties like font-size and line-height can actually growing the element taller than 20px.