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.
Related
Please help me design the above example in HTML and CSS. Explanation:
Each rectangle is a div.
There is one container DIV with black colour and surrounded by A B C D corners.
Inside the container div there are two TIER1 divs, light grey and dark grey.
Those TIER1 divs themselves contain child divs and they can contain other child divs.
In other words, NESTED divs. Thus: parent contains the child.
Important: the horizontal positioning has to be absolute; simply putting the next div right next to the previous one is not what i want. As you can see the red div does not start at the start of the light grey TIER1 div; this is intentional.
The different TIERs should have a vertical indentation; as you can see TIER3 has a margin at the top so that the parent div is visible.
They way i like to implement this is as follows:
Stylesheet contains generic CSS code; the HTML page contains the positioning of each child DIV using 'left=Xpx' or 'margin-left:Xpx' combined with 'width=Xpx'.
The nesting does not have to be perfect; my code will generate the child divs so that they do not exceed their parent div. So the actual HTML code may just be a bunch of divs inside one container div; it just has to LOOK like they are nested. I think this is easier than actually nest divs in the HTML code itself.
The DIVs get their colour using a simple 'background=#XXX'.
In other words, i want to play with a 'canvas' and draw rectangles in the perspective of position 0,0 = A and 100,100 = D. The HTML code will provide those coordinates, from start (left-top) to end (right-bottom).
I have been playing with display:table, float:left, margin-left and other stuff, but can't get this to work. Horizontal positioning of div elements has always been a tricky side of CSS for me. But i think this can work. Please help me out, thanks a bunch!
Ok, i solved the issue, here is the solution for anyone who has similar issues:
<!-- container DIV uses relative position -->
<div style="position:relative">
<!-- sub DIVs use absolute positioning and can be positioned with CSS: -->
<div style="position:absolute; left:100px; top:10px; width:200px; background:#00f"></div>
<!-- you can have as many DIVs as you want, and they may overlap each other, they will not push each other out of the way -->
<div style="position:absolute; left:80px; top:20px; width:200px; background:#f00"></div>
</div>
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'm trying to do something really simple. Two divs, one on top of the other, top one red border, bottom one blue border, I have no idea why the top one doesn't show.
http://jsfiddle.net/2TAaC/
this should be so simple.
You have them positioned as absolute. Change it to relative.
position:relative;
Also, I suggest not doing inline styling. Create a css file or put the css on top.
Here is your example updated:
http://jsfiddle.net/2TAaC/1/
reduced further:
http://jsfiddle.net/2TAaC/2/
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/
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.