How to set which div is over another by position fixed?
If I have 3 divs and page is separated with those 3 divs I want to make them all fixed but I one left and right be over the center one I have photo example with two but it same question.
Example one
Example two
With example one when I put img from behind as fixed img over message div...
Try giving them z-indexes.
Just add z-index: (some number).
The element with a bigger index will be in front.
Documentation.
Related
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
I have 6 floating divs (align to left) on a page. These divs has 2 different widths (depending the image () ). One div has 295px and the another has 216px. The height is calculated automatically by HTML. The container has 1050px, so in one "line" of the container I can insert 3 divs, and the another 3 on the second "line".
The CSS rule is working, all divs are floating to the left, each div has 20px margin, but the problem is the alignment of them. I want to align these divs proportional. At the moment if some pictures has different heights, on the second "line" are some blank spaces (because the height of the pictures above).
I want something to float these divs on the Y coordinate (proportional).
Look at this pictures:
Make a jsfiddle for people to play with.
But, you will probably want to make a container div for each row. This encapsulates the 3 inner divs, being as high as them and allowing the next container to fit nicely underneath
See my fiddle: http://jsfiddle.net/TJxmT/
Wouldn't a min-height at the floating divs solve the problem?
Try to use jQuery plugin called Masonry to fix that layout... You will be surprised!
EDIT:
You can always clear the 1st item in the row and every third item using css :
li:nth-child(3n+4) { clear:left; }
Have you tried putting a clear: both; on every first div of a new line?
I want a layout with two columns, two divs, where the left one has fluid width and the right one has fixed width. So far so good - see jsfiddle below - however, the height of the right column must be in relation to the height of the left column. So that if I have some content in the fluid column and would resize the browser window, thereby increasing or decreasing the height of the left column, the right one should follow and getting the same height.
What I got so far: http://jsfiddle.net/henrikandersson/vnUdc/2/
Edit: Resolved, see comment below
Ah, the ol' two column layout. Unless you want to resort to JavaScript to track the height of one column to adjust the other, you're not going to be able to do it in the way you expect. Using height="100%" usually doesn't work in these situations, either.
What you can do is something like the old Faux Column technique. The div's don't resize, but you have a background image on the parent element that tiles vertically, giving the illusion of equal columns. Old school, yes, but effective.
You can use JavaScript to get the height of the left div, then set the right div to this height.
To get height of the left div:
var divHeight = document.getElementById('left').offsetHeight;
To set height of right div:
document.getElementById('right').style.height = divHeight+'px';
Your JSFiddle example fixed.
So, I got an answer to my question from #thirtydot (see comment above):
Do you need to support IE7? If not, you can use display: table-cell
Horrible title of this question, I know. Sorry.
I have four divs similar to this . What i want to do is simply to make the vertical space between div number 2 and 4 to be removed, and without changing the structure of the HTML. Is it possible to do with just CSS (of course without negative margins or other non generic solutions)? And I also want the div 1 and 3 to be without the vertical space in the case of a longer div 2 than 1.
The desired result would graphicly look something like this.
Thanks.
Well, not with just floats. That would be to use absolute positioning, or change the structure of the html so you have div number #2 and #3 hare right floated, and then a left float on div #4.
Absolute positioning and negative margins is another option, not very dynamic, but it works.
The best option would be to use a bit of jQuery to solve your problem.
Check out: http://masonry.desandro.com/
Add to the code of 4th div
position:relative;
top:-100px;
look for the class added to the 4th div
http://jsfiddle.net/eZGTm/1/
I want to put a banner across the top of a webpage. The first way I tried I couldn't get the two divs to position each other properly. They weren't offsetting from the middle (using the same technique that a single, static div would) and one was below the other.
Here's the code
http://jsfiddle.net/AndyMP/wFutk
I then managed to do it a different, easier way
http://jsfiddle.net/AndyMP/TJjwp/1/
But of course it is bugging me that I couldn't get the first method to work. Any guidance would be appreciated, in particular how to offset correctly from the middle of the container div.
(**Edit: I should add that I did this in IE9 and you might need to adjust the size of the preview pane in jsfiddle to see it all)
One was below the other because you were using position: relative (Specification). In that mode, the divs are first layed out using normal flow and then offset. So top: 2px was offsetting each one 2 pixels below where it would normally be.
Use position: absolute on the two inner divs instead.
Using the float property seems to be a really good idea here
http://jsfiddle.net/wFutk/1/