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/
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...
I'm working on a simple design here, but i have a little issue.
Please have a look at the final design example here: http://ronnieaarebrot.com/demo/cms/
On the menu to the left and right, you can see a small border going from the top to the bottom (following the height of the center content).
How can i do this? i was planning on having a background-image with the small border on both sides, but how should i "calculate" the height of the center content? or make the two borders follow the height of the center div. This is a bit hard to explain.. but check the image and here is an html example of how far I've come. http://ronnieaarebrot.com/demo/cms_html/
Any good solutions?
The easiest way would be to contain the centre content in a div element and use the border CSS property to apply it. You can then adjust padding and margins to butt the centre and side elements against one another. Given the model, it seems like some padding on the centre element combined with almost no margins on the sides would do the trick.
If you put overflow:hidden on the #page_wrap element that it will extent to the height of its contents (the left, center and right parts).
So you can put the backgorund image (1px height repeated vertically) on that element and be sure that it will extend all the way down..
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 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.