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.
Related
I am creating basic html page and i have one main container div and it contains one header div that is fixed at the top and working fine. and next to header, i have animation div, images div and next to images I have one description div and i have divided the description div into two div. div1{float:left} and div2{float left}... Now when i open the page and scroll down to reach the div 1 and div2. I want that div2 should be fixed under the header when it reaches to the header bottom...
Is it possible to solve with simple css or javascript or something else required.
if possible with css then how to proceed
Ok I think I see what you mean. You want the float-menus div to not go on top of the menu block (static-header div). Correct? In that case you just need it to be a higher z-index. Float-menus is currently z-index:201; so just make static-header a bigger number.
#static-header{
z-index:301;
}
See my updated fiddle: https://jsfiddle.net/z9bxhbfs/
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 got an issue in a header where I want the middle element to stay centered between the two flash end pieces. I put the middle element after the right div in the html, thought I specified the css right, but when I STRETCH the page to the right, the middle element does not move/stay centered. Are you able to see what I'm doing wrong?
From looking at the code on the page you supplied, you need to remove the float:left from the headerCenter div
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/