Kind of hard to put into words, so here's the jsFiddle showing it.
When hovering over one of the green blocks, I wanted its background to expand enough that it "touches" the contiguous rectangles (it overlaps their margins). However, when hovering over the last block of each line, the layout goes wild: the line below only shows one element, etc.
The cause seems to stem from the negative margin; since, if the margin for the "expanded" class is set to plain 0 instead of -5, this problem doesn't happen. But of course this would leave a space between blocks.
The size of the parent container doesn't seem to alter this. Note that for now I'm not particularly concerned about the fact that the expanded block isn't well centered and makes the others in its line wobble a bit, although it may be linked to the problem.
Change de padding of the extended into 10px
http://jsfiddle.net/TMXLz/4/
The only way I can see to do what you want is to position each of those blocks absolutely (position:absolute) into the place you want them. You're main issue here is that the changes you want to make to the box are going to cause them to encroach on each others space. So you either need to adjust all their spacing (using js) on each mouseover (which sucks). Or absolutely position the items into place (specific positioning style for each box) then you won't have an issue with them overlapping partially. Just be sure to increase the active ones z-index so its always 'over' the others.
This may be the output you are looking for
http://jsfiddle.net/TMXLz/5/
Related
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
This has plagued me for so long, and I've only ever found solutions that reduce the issue, rather than eliminating them. Three divs of 33% width (so technically, not even 100% combined width) look just fine on my screen, but when zoomed in, the left-most div falls to the next line. Why is this?
Mind you, this is after eliminating white space in code. I use the > selector in CSS to set the font size of the containing div (that holds the other three) to zero, which achieves the same results as the uglier, less readable solutions of putting things on one line, or using HTML comments.
I shouldn't need to provide any example code. It's an issue in any set of inline-block divs set to percentage widths inside a containing div.
It is happening just because of spaces between inline-block divs...
like Code
On above code browser counts a space between and
So add css property to parent
.parent {
font-size:0px;
}
See difference between this fiddles
Your Problem http://jsfiddle.net/BS72X/1/
Nd here solution http://jsfiddle.net/BS72X/
Hope this helps you..
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.
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