First I should admit that I'm a beginner and the question might seem awkward to most of you, sorry for that.
My question is - what is the best practice (float or position) to position an element in a 2 or multi column layout assuming the design wont break apart after zooming an website?
I searched through this site and discovered some posts concerning this issue but those are 4/5years old and I could not come out with any conclusion.
Looking forward to have your expert views....
Thanks..
Its really based on how you want your element to be positioned or placed within the page.
CSS Position:
You should be choosing css positions to place your element if you wish the element to appear on top or bottom of any other elements and also if you wish to animate those.
Positioned element does not care for siblings placement.
Floats:
For creating columns, having content aligned to left or right and adjust to its adjacent siblings - you should use CSS floats.
Let us say, you have an image and bunch of texts, you should use floats if you wish to wrap texts around image. If image is not present then texts would cover the space. This wont happen in case of css positions.
Related
I've struggling to position these hexagons next to each other on 3 lines, here is the page I'm trying to manipulate http://goo.gl/xpHmw
effect I'm trying to achieve
http://www.queness.com/resources/images/13901.gif
Many thanks for any help and assistance.
There are probably many ways of achieving it. My solution would probably be wrapping the hexagons in a relatively positioned container, assign a position: absolute to all the hexagons and position each of them manually with 'left' and 'top'.
I've abstracted the code for you to better understand.
http://codepen.io/nobitagit/pen/ojvue
ps - next time you ask a question you'd better abstract your problem in jsfiddle.net or codepen so other people will likely find it easier to answer you and the problem + solution will be there for others to see in the future.
Okay so I just checked your website at home.
This isn't something that's very easy to do in CSS because it doesn't fit very well into rectangles or "blocks" like CSS employs.
I have some suggestions. Perhaps it doesn't "answer" your question but it will give you a good start.
Div tags do not hold semantic value and they are "empty" in that regard. In this case, you used numerous div tags inside an unordered list <ul> to create backgrounds for the hexagons. This is fine and all but I would recommend:
Remove the divs completely. An unordered list really shouldn't have divs. It is an "unordered" list afterall. I would either use divs exclusively or better yet:
Use an unordered list and create each hexagon as a background. One box holds -> 1 hexagon. The hexagons do not scale. No reason to have a separate div for the top/bottom.
You don't have to use absolute positioning. You simply need to have some of these hexagons overlap. For the second row of hexagons you can use a negative margins to offset and place them in the correct location. Use .png for transparenencies on the corners!
Pseudo solution:
Each hexagon takes up a square.
Create hexagon backgrounds as .png in photoshop
Hold each in a <li> and float them in a <ul> --> do not use divs
Use a negative top margin to overlap the second row into the cracks of the other hexagons.
Good luck. Post an update with your progress. I'll help you further; but I can't produce a solution for you.
I don't know if this is only my strange requirement, but I didn't really find anyone asking it before. My problem is:
When divs with random heights are floated in multiple rows why don't they stay in below the preceding number. I've noticed, the next row div goes below to the div which has less height in it's above row. Which makes blank space in the 2nd row and other following divs fall into next row. I've added fiddler link here jsfiddle.net/GF9kE
This image explains exactly what I mean. div 4 should have come below 1, 5 below 2, 6 below 3. But 4 went below 3 because 3 has least height. Why does this happen. And is there any fix to this ? I want to display divs in floating style but follow the order regardless of heights.
I will be very thankful to you for reading this and helping me out.
Thank you,
A great explanation I've seen written up about the topic is here.
http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/
The specific excerpt that addresses your question:
"Basically, the gist of the situation is that floated elements go right up to the specified edge (left or right), but no further. Unless of course there is another floated element before it, in which case it just goes next to that one.
The real surprise that confused us before comes in the rules at the end, which state that floated elements try to stay as high as possible and that this vertical positioning rule takes precedence over the horizontal left/right floating rule that pushes an item to an edge."
Short answer - Since box #2 stretches the line height to be greater than the height of #3, #4 has some room to squeeze in before the next line starts. Similar logic applies to #8 and #9.
--- EDIT ---
If you want your boxes to flow in a Pinterest-style fashion, your best bet is to use an existing javascript library such as Masonry or Blocksit.
If you want to try avoiding javascript and just use CSS3, here's a good link you can check out. This might suit your needs depending on how much browser compat is necessary.
I think you should have a look here: http://isotope.metafizzy.co/
They said with CSS alone we cannot get this done, please see here CSS Floating Divs At Variable Heights
I find myself placing a lot of divs, images and content in general with position:relative to stick to the design I'm following.
For example if I wanted to place a form closer to the top I'd put in :
.form_class{
position:relative;
bottom:150px;
}
Since the element keeps its position in the flux, I'd then have to put every other element upwards of 150px with position:relative as to keep the gap closed.
I feel like this is sloppy programming, how do real web integrators position their elements ?
Thanks in advance.
There is a potential problem with using relative positioning.
If you are using the relative positioning to circumvent a problem with a gap, the problem is still there in the background. If the gap comes from a margin for example, then the margin is still there. If you don't know where the margin comes from, you don't know if it's the same in all browsers, and you don't know if any seemingly unrelated changes in the markup might change the margin.
Also, as you mention, you are just moving the gap from the top of the element to the bottom of the element, so you have to keep adjusting all the elements that follow. With each adjustment you are potentially adding another level of insecurity, where the layout might break in another browser.
Most browsers have a developer tool, where you can inspect an element to see exactly what CSS is applied to the element, and what the margins and padding are. You can use that to find out where gaps come from, so that you can remove them at the source instead of circumventing them.
There are a lot of ways to position elements, from margins and paddings, absolute positioning, floats, parent containers, explicit widths and heights. Without seeing your markup it's hard to critic but usually there are better ways than relative positioning. If you want to post some markup try http://jsfiddle.net
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
#RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
http://jsfiddle.net/qr7WB/
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE
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