To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.
Related
Im making a responsive site with dynamic content. I have a row of divs that will wrap at smaller screen widths. As some of the divs have more content and are taller than others, when a div wraps it doenst always go all the way to the left of the screen.
http://codepen.io/anon/pen/Ljmkb
I need a solution that works for different screen widths and for when the content makes the divs different heights, in other works I cant just set clear left on the 4th div.
Change float:left on your div elements to display:inline-block; in laymans terms this will place them on the same line if there is space, or start a new line and place the overflowed element at the start of it if not.
By then placing the elements in a vertical-align:top environment, they will maintain their top alignment.
Demo Fiddle
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 to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
The title says pretty much everything. I have a wrapper div with two divs floated side by side in it. The contents and its length in both divs varies. The problem is, that I need the wrapper div to stretch only with the right div. The left div should have scrollbar, if its length exceeds the length of the right div.
One person in IRC already claimed it's impossible to do, but I refuse to believe him. CSS3 and/or HTML5 are completely acceptable since the whole site is wrote with them already.
Thanks in advance, if someone knows an answer.
Here is a fiddle I made which should accomplish what you're asking for:
http://jsfiddle.net/zftXu/1/
Just keep in mind that since the size of the right div is dynamic, if its contents become too large (off the screen), the right div will move to a row below it. If you wish to prevent this, then put an overflow and max width on the wrapper, like this:
http://jsfiddle.net/zftXu/3/
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/