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/
Related
How to make a div to float vertically? If there is empty space above a div then it should go up and fill up the space leaving the empty space at the bottom.
float:left // for floating horizontally
I have many div which are floating horizontally with a fixed width but not a fixed height. I want them to be arranged without leaving the empty space.
How can this be done?
A div would never leave empty space above itself. It will fill the space and then the document would go on to the bottom.
I guess, there is some sort of padding or margin there.
You can try to give the divs an absolute position as:
div {
position: absolute;
top: 0;
}
This way, div will be placed almost to the top of the page! Overlapping other elements, You can give some value to top in such a way that you're giving margin-top.
I hope it helps.
Let me assume you're experiencing the following problem: you have some divs with different heights one after another in several rows. Say, there's a very tall in the first row, forcing all the divs of the second row to "dive" deeper. I have a strong feeling, that there's no cross-browser pure-css way to improve this look much at the moment. However, you can achieve at least something with
display:inline-block;
vertical-align:top
instead of
float:left.
It will look like this:
http://jsfiddle.net/wHTQ2/
if you need something better looking, please, see this question:
css float elements with unequal heights left and up in grid
I believe it's the same thing that you're looking for. Unfortunately, there's not much you can do with pure css
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...
I have this page: http://www.problemio.com/community/public_member_profile.php?member_id=1
It is supposed to have the gray background extend all the way below the footer. If you look at it in firebug, it shows that the layout div contains a number of other divs.
So I don't understand why the gray background doesn't extend all the way down. Any ideas?
Thanks!
Add <div style="clear:both;"></div> at the end (before the close tag) of div#layout.
clear:both has to be added because of the floating inner DIVs. See also: MDN: clear.
I believe with divs, the stack on top of each other. So your background div may have a grey color, when you open the next div it sits on top of it so to speak, which puts it in front of the colored div. Have you tried to apply the bg color class to another div inside the layout div to see if that is it?
You could add overflow:hidden to the container to clear it (if u have float children)
#layout{
overflow:hidden;
}
Edit: or put a clear:both element as last child as a clear fix.
Add overflow:hidden; to the containing div. This will ensure that the container will wrap around all of it's content.
A useful tip when debugging is to put a bright border border:solid 1px lime; around the containing element to see how it is wrapping around it's child content.
black is the browser window in the image bellow.
I want to accomplish the image in the right
I have a div which is centered (blue) and has a fixed width
I have a div which is inside (red)
I want the red div to span from one side of the screen to the other while still aligning all else in the center.
How should I do this?
Should I break it in 3 divs(first fixed and centered, the second to span all width, the third like the first)
Here's an example of how to do it if you want the red div on top. If it's behind the blue, then put it first in the markup and you don't need the third div: http://jsfiddle.net/mGnpr/2/
Well, you answered your own question. I suggest you break it in 3 divs. Seeing how HTML elements function, it's pretty hard to 3-dimensionally stack them ( and making it look good :).
Write two classes in your CSS file: one with the fixed width and second with the "100%" width. Use the first class for top and bottom divs, the latter class for the middle div.
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.