Basically I have a parent div with height and width and overflow:hidden and then within that some more divs with it.
We are dealing with fluid content and some of the divs go over the corners so get hidden.
But one is half and half.
Is there a way to make that completely hidden?
CSS would be best.
I don't think you can know if a child from an overflow:hidden parent is in the hidden or visible section without using Javascript (I might be wrong here).
What I suggest is that you set all the child divs to a fixed dimension d and set the parent div to a multiple of d so every child is either completely visible of not.
This solution won't work if you fill your divs with different-length content
If I understand your post, you have a wrapping div that has overflow:hidden and you want to make any child element hidden unless it can be completely displayed within the wrapping div.
There may be a better way to do it, but I would use a CSS media query. If you're unsure of how they work this is a good place to start:
http://css-tricks.com/resolution-specific-stylesheets/
Using this method, you could determine how many blocks of each type should be displayed on any given set of resolutions. I'd be interested in seeing how it goes, or if you end up using a different approach. Best of luck!
Related
I am trying to float divs horizontally, however its falling into a new line.
http://jsfiddle.net/nyCrY/4/
It works only if I set width of the #holder higher than its content.
Is there a way to do this without setting the fixed width on #holder?
Thank you!
Not really with pure CSS.
You can use a static width (which you don't want to do), you can use floats + whitespace (which is unreliable), or you can dynamically calculate the necessary width with javascript and set the style's width to that number.
According to this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
I spent some time playing with the float property and the white-space
property to see if I could find a way to fight browser auto-wrapping,
but I didn't have much luck. Page elements which are floated but do
not have a width exhibit a property where they expand to the width of
the content inside them. I thought perhaps if I put a bunch of float
elements inside of that, it might just keep expanding beyond the width
of the browser window. No dice. There is also a white-space: nowrap;
property in CSS which I thought might be able to be exploited to fight
the auto-wrapping, but it only works for text elements, not blocks or
just any old thing you set to inline. Oh well.
So, he basically is saying, no its not possible with just css.
But he goes on to say that you can do some javascript magic to achieve it:
JavaScript clearly has the ability to manipulate page elements and do
calculations on-the-fly.
I'm trying to do something like the min-height hack, but I have two floats that seem to be conflicting with it:
http://jsfiddle.net/redconservatory/vqFVU/1/
My "innercontainer" div is very short, I would like it take up as much as as possible (or at least, more space) without setting the height in pixels because my page content changes from page to page...
set overflow:auto instead of visible, so that .innercontainer expands to accommodate its contents.
demo at http://jsfiddle.net/gaby/vqFVU/2/
If you want a sticky footer as well look at http://www.cssstickyfooter.com/
http://jsfiddle.net/vqFVU/4/
javascript is the easiest way. You cant do that with pure CSS since every client can have a different size window.
I am attempting to set-up my homepage with three columns (each could be different heights depending upon the content) and for some reason the columns within my 'content' div do not respect it. This causes the columns to overflow onto the information below. I have tried to create the same layout using positioning since i understand its the better way of doing things; however i've had no luck.
I tried to use the 'overflow' element which does take the columns into consideration but it then puts a scroll bar on the content element.
Please see an example of my work here
Why does it does this? (edit) - Understood
How do i get it so the columns sit inside the
content element and respect the flow of the document? (edit) - resolved
Could you advise a better way of doing this maybe using positioning? Is the method I'm using the best way of positioning, or should i be using relative, static, etc?
Content will overflow its bounding box unless you use overflow: hidden (or similar) in some cases; see overflow and clipping in the CSS2 spec
Since you are floating your three columns, you need to use something like Clearfix so that content that comes after the columns' container will clear past them. (Alternatively, you could set clear: both on the <p> containing the footer content.)
Floating is the common way of approaching multiple columns, so you're headed in the right direction. Positioning almost certainly won't help you here.
Try adding overflow:hidden to your content div and removing the height restriction, like below:
#content
{
background-color:Blue;
width:800px;
overflow:hidden;
You are floating those columns, and you don't clear the float so what is happenings is that those 3 divs are "floating" above everything else, so the browser doesn't include them in the main html. You must clear the float with the CSS clear value.
See the jsFiddle here
Also check out this tutorial
I sometimes find myself creating a div which serves no other purpose than to hold another element.
For example when creating a menu, I would create a div and assign it a background colour, position etc. Then within it I would create an unordered list.
I could surely assign all the properties I assigned to the DIV to the UL and not use a div at all.
Any ideas of what is best practice and reasons for it.
Thanks
Zenna
DIVs can be useful for grouping semantically related elements. If you are simply wrapping a single element that is also a block element, then you are simply adding bytes to the file.
No, they are not. The purpose of a div element is to create block level structure in the document. If you can lose them just lose them. Never use divs to solve design purposes, css is for that. Use html elements each like list, data definitions or tables (which were overabused in the past and used as the divs are now for css purposes). The more diverse your HTML knowledge is the less you are using divs all over the place.
I use often divs to keep child-padding/margins from ruining parent-width. But you need to be careful with this type of stuff - you could end up adding a bunch of nonsense.
The real issue is that we are using HTML in ways that its creators had never imagined. The need for 'all those divs' is because some really smart people have found some very creative ways to take a very old standard and do some very modern things with it.
Best practice should be to use as few div elements as possible. If you've got a div elements with only one child, chances are it's a useless div. The div element should really only be used when you need a block element and there is no semantic pre-defined element at hand. This includes grouping elements as Renesis suggests.
In the case of a UL, yes, the DIV is unnecessary. They are both block elements, so anything you can do with a DIV wrapped around the outside you can do directly to the UL itself.
However, because of the Box Model problem with some IE browsers, some people tell you to add these DIVs as a workaround. When you combine padding and width, IE6 disagrees with other browsers about what the final size of the element will be. So one workaround is to put padding but no width on an inner element, and width but no padding on an outer element.
Div's are really a necessary evil without a more semantically rich set of tags.
Their purpose is to server as a generic container. Therefore, I suppose you could say they do their job well.
If you can do what you're trying to do without the additional div, then leave it out. If it's an important part of your design that you can't fix with some clever CSS, then it's still a whole lot better than using tables...
I use DIVS primarily for at least one of two main reasons:
I need it to provide a new physical level of CSS in some way (either child padding inside a fixed width element, a shadow or a double border around an image, etc.)
It logically groups the elements it contains (for future portability and semantics in both HTML and CSS - I.E. "div#menu .label". This way I can use the "label" class several places but have a specific style applied to labels within the "menu" div).
For example, if you were to transfer all attributes to the UL, but then decided you wanted a caption or image above or below the menu but in the same location, you would have to create the DIV again to place the new element inside, and transfer half of the attributes back to it.
I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.
I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.
The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.
Is the z-index the only thing that could be the problem here or is there something else I don't know about?
Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.
You are hitting the stacking context bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.
The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.
Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.
as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.
Hope this helps
Quite simply, the order of the elements in your HTML file will determine stacking order. If you want an element to be above another then make sure it comes later in the HTML.
You can only swap the stacking order on elements that are all in the same containing element. For example if you have two divs and they both contain 3 images you cannot make images from the second div go below images from the first div.
You need to plan your HTML ahead if you need complex stacking orders.
As hinted by the other answers, position:relative and position:absolute reset the "stacking-context" in IE.
If you want a lazier answer you could use javascript and hide the div when you click on the map, and show it when you close the map.
You will have to do this with any selects on the page anyway because in ie they don't work with z-index.
I ran into this same issue a couple days ago and found the negative margin as suggested by Darko Z worked great. (My rep isn't good enough yet to vote for Darko)
I wrote a quick post on it.
http://www.swards.net/2009/03/layering-html-elements-without-using.html