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/
Related
I've looked around for answers and I've tried plugging in everything I can think of, but I can't seem to figure this one out. I feel like I'm probably overlooking something really simple and obvious, but any help you can give would be really appreciated!
Basically I'm trying to customize this page so that the little character boxes are horizontally centered within their .wrapper div.
While the div itself is centered horizontally in the middle of the page (I've used padding: 0 15% for that), the content inside it is not.
Here is a pastebin of the entire code if anyone would like it. The relevant section is line 140. Thanks in advance for any help you can give!
The problem is the div containing the individual character boxes are using absolute positioning so any style you try to use on the wrapper div that contains them to center them will be overwritten by the absolute positioning. You could probably change the javascript that is writing the absolute positions to center the boxes in the wrapper div or you could possibly pad the wrapper. I was playing around with the numbers and had a couple boxes centered within the wrapper div but when it's resized the javascript rewrites the positions. I would've used bootstrap to make this page instead of using javascript to reposition things on resize.
Another alternative is
1) Remove padding on your wrapper div and set text-align center
2) For each of the character box, I am not sure what you are using the javascript for. If the javascript have no other use other than making those boxes horizontally center, you can remove it.
.chara remove the float center, remove height, add display inline-block, add padding 25px 0
3) .charaimg remove position relative, remove top, remove left
4) .charatitle remove height, remove position absolute, remove bottom 0
5) In your HTML switch the .charaimg and .charatitle
That should do.
And also for future question, it helps a lot if you can put your code in codepen or jsfiddle. It makes life easier for people who are helping you.
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.
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?
We overlap two Divs using "postion:absolute" and z-index.
http://jsfiddle.net/z5GXV/
The text in the green zone (div id="Zone2") is hide by text in the yellow zone (div id="Zone3"). Any help on how to display the text?
Edit1: We can't use nested divs.
I'm not sure what all the absolute positioning is good for, but you might want to put the yellow zone into the green-zone div, and use a float.
Solution with a float within the green zone
Solution with padding
Simplest way I can possibly think to do this:
Uses one nested div inside the Zone2 to wrap your text and make it appear as if it's wrapped to Zone3.
This is similar to using a <p> or <span> with display: block;.
jsFiddle example.
Just looking at some CSS here, and I noticed:
.head{position:relative;overflow:hidden;margin:-30px 0 0 -25px;width:820px;padding:20px 25px 0 25px;background:url(/images/bkg.gif) 0 0 no-repeat;}
Why would you put -30 and -25px margins?
I started typing an answer, and then found a much better one here (Wayback Machine backup). Some salient points:
Negative margins:
are valid CSS
don't break page flow
have high levels of cross-browser compatibility (although if they break your link or floated image, then try adding position: relative; that should fix it)
Their effect on unfloated elements:
applying them to the top or left of an element "pulls" that element in the appropriate direction(s)
HOWEVER, applying them to the bottom or right of an element "pulls" immediately subsequent elements into them, making them overlap
Their effect on floated elements:
this is more complex and I can't summarise it better than the article. Have a play around in Firebug to get a feel for them.
There are some brilliant examples of negative margin use in that article (especially the 3-column layout! Magic. I've used a similar technique for page layout before.) The most common use for them I've found is just to move an element a small amount to correct its position, and to make one element overlap another for visual effect.
A lot of tricks and nice effects use negative margins:
Image Replacement Trick - when you want to use that particular font and you just can't tear away from it, image replacement is the trick. Uses negative margins to push out the regular font and replace it with the "picture" font.
Image Rollovers with borders - giving a negative margin to the image the same size in pixels as the border size will keep the image, and therefore the layout, from shifting on a rollover.
Center screen positioning - using negative margins the same dimension as the height and width of the object you want to center, you can center an object in the middle of the browser.
Negative margins can be helpful when you have other element "around" that you want to e.g. have a padding for all other elements. I use it very often, read here, why:
http://www.simplebits.com/notebook/2005/05/23/negative.html
Actually i think there is an use case where negative margins are the only right thing to do:
You want an part of a box to extend over the whole parent, even over the padding. So instead of removing the padding of the parent element an apply it to all children exept for your special case, you give your special case a negative margin. Also no haggling with positioning. Works great and is very readable.
Example: http://codepen.io/anon/pen/DpHvu