Positioning

hey folks,
i am having hard time getting and understand positioning in css. i read the FAQ’s it explains good but yet i am not able to grasp it. can anyone help me out understanding it?
thanks in advance

Honestly, I had already had a copy of HTML Utopia book, and I read it… the first half just went over basic CSS stuff, but the second half was pure gold, because it showed an image (supposedly someone’s PSD), some (x)HTML, and showed you from top to bottom how to make that code look like that image.

Then they added a sidebar.

Then moved the sidebar.

Then styled a table.

I thought it was awesome, there’s a decent (though not thorough) explanation of using floats with positioning and clearing, and really was the first place where I finally felt I was getting somewhere with “positioning stuff with CSS”.

The book’s old and if your library is decent it may have a copy. HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. It’s a SitePoint book but I’m not recommending it for that reason… I actually happened to already have it.

Otherwise, I don’t happen to know of any tutorials that do things that way but if someone recommends one to you that has like a desired layout, pre-written HTML, and shows from top to bottom how to style it all with CSS, that’s the type of tutorial you want.

Not the cookbook tutorials that you mostly find where they say “how to put a box next to another box”. You’re looking for something that shows an example of putting it all together.

If you are struggling with a particular layout though, likely we can help explain what your page is doing and how to change it.

If you have read the FAQ and you don’t grasp it yet then re explaining it here wouldn’t help at all. Your best bet would just to play around with posiitoning and understand how it works. Test with examples :slight_smile:

Well the FAQ is like trying to learn how to build a web page using HTMLdog tutorials. They’re not bad tuts at all, but its kinda… piecemeal. And I definitely needed something that showed me an example from start to finish to see how all those parts worked.

It would be like learning to cook by learning about different foods and different cooking types… you still need to go through a recipe to get a feel for how it all works together I think.

I agree that playing around is essential.

Here is a tutorial that may just help you out :slight_smile:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

i have this thing on my mind which wanna get it done. like i don’t wanna read the long stories and wanna get to a pratical example. this habbit of mine is very bad and i miss so much in betwwen

Lawlz, I know what you mean!!

In fact I tell people who are going through ian lloyd’s book, Build Your Own Web Site… NOT to try to follow it while building their own page, but to just build his page (esp after missing stuff when I tried that).

Your other option is to find a teacher. Someone who’s willing to act like Ian Lloyd but specifically with your site. Problem there is, since YOU don’t know good code, how can you tell if the teacher you get knows anything?

I really believe that finding a page similar to what you want and trying to revere engineer it is the long, hard, and hair-loss way of learning CSS positioning… but it’s an option.

1 Like

i am good with css (atleast some of it,lol) but i wanna get a full grip on positioning

Man, look for that book. No one source would give you complete mastery of positioning (otherwise we’d all be gurus) but I can say that book showed me how to place my boxes where I wanted them. At least see if your library has it (are you in an English-speaking country or are there English computer-y books?).

i have lots of E-books. i will find the book which u said too. the thing is i can’t clear my mind from project burdening me at my job for which i can take time out and look into it. but however i will look into all.
thanks folks for giving me links and sharing info.
@RaynResse i know i m dumbo :cool:

thanks but it went over my head. gotta say it was difficult. but thnkx though:(

I just checked out that url (http://www.barelyfitz.com/screencast/html-training/css/positioning/) and I like it in that it states the basics for what state your boxes can possibly be in.

Everyone’s either going to be static or positioned or floated.

But maybe if it showed what the resulting code looked like in a browser it would help more.

Lol it was only that one thread that was making me a bit edgy ;). All is good friend…

Maybe it would be helpful if the OP said what exactly he doesn’t understand about positioning …

I mean, he could be reading tutorials but not being aware that he has to know other basic concepts. What i mean is that most, if not all, tutorials will address (e.g.) AP as: when you AP an element it’s completely removed from the normal flow and positioned with respect to its containing block. Nice, but what does the normal flow mean, what does containing block mean? Also, in my opinion you need to understand the box model, side off sets, box types …

So going over tutorials, the OP might miss some crucial info that would show him the light at the end of the tunnel :smiley:

If he would be more specific we could help him out in a more clear way than some descriptive tut that repeats 80% of the specs (god forbid lol)

so finally i m getting positioning as i played around it. let me explain and correct me if i m wrong.

  1. position:relative - if i want to overlap a rectangle corner with a rounded one. i will give the rounded image left:-12px; top:-12px; (if my border is 12px thick). am i right? (i played with it, it was right)
    2.position:absolute - it places the next div relative to the previous one. which got position element . with left-top-right u can control the placement of div more precisely.
    so am i right?
    one thing more. what if a box lets says have a lot of text and have 25% width and is floating on right; and another box has 25% width floating on left. now i have 2 question
  2. when i do width 25% and float right. the other empty 25% is occupied, the 2nd div which has 25% and float on left comes after that. not side by side. why is that? how can i float them side by side.
  3. first div on the right has lot of text which will make div bigger (to make it more prominent i gave background color, ) now other div on left has 2-3 lines and has a background of pink. the color ends where the text ends (div is wrapping around text) but wht if i wanna make it equal to the div on right.meaning both has same height without any height defined?
  1. position:relative - if i want to overlap a rectangle corner with a rounded one. i will give the rounded image left:-12px; top:-12px; (if my border is 12px thick). am i right? (i played with it, it was right)

I believe people can use relative positioning better when they know what’s really happening when they do it. Otherwise, you’ll come across a popular “problem” (you can even google it) called “When I move a relatively-positioned box, I get this unwanted extra space!”

Before playing with positioning (or, WHILE playing with positioning), you need to get a good feel for what the “flow” is. That is, what everyone does by default. You know, when you see your page without any CSS, and it looks like an ugly college paper. Giving your floats background colours was a good idea: you’ll want to do that a lot for your other elements too while you’re learning what boxes do by default.

This is esp good because once you know what boxes are going to do by default, you can Be Lazy. Being Lazy is a Good Thing. You let the default actions do as much work for you as possible, and this results in Less Code.

So every time you make a box, give it a background colour.

All boxes start out as position: static. So at the beginning, the behaviour you see is position: static and so when you see people writing code like this:
<div id=“foo”>
stuff…
</div>

#foo {
display: block;
width: 100%;
height: auto;
background-colour: green;
}

Then you know they don’t understand flow (unless there are special circumstances, lawlz… there ARE times where you might write like that but not on a default unstyled page), because they’re are writing TOO MUCH CODE. If you know the flow then you know the minimum you have to write.

Most elements that HTML considers “blocks”, CSS displays in a “block context”. What’s a block do?

-They are 100% width of their parent containers (this is why you usually don’t need width: 100% on them)
-They are only as high as their contents inside (this is what height: auto is).

Important thing to remember is that when a block has one of these “default” dimensions then when you add side padding or side margins, you’re just reducing the amount of room inside that container for the contents, and the math still works out. People get in trouble when they say
width: 100%; (now it’s a stated, explicit width! and not a default width)
padding: 0 15px;

guess what? Your box is more than 100% wide now. You’re 100% + 15px + 15px. Nasty.

Play with your boxes and watch what happens as you fill them with more or less content, or add in new siblings. They bump each other around and push each other away from where they want to be: their top left corners as close as possible to the top left corner of their container (except in a rtl page, ideally).

Relative positioning
It’s not as simple as “when I use relative positioning I move the box relative to where it used to be”.

If you start with a static block, and then add these magic words:
position: relative;
it may look like nothing’s changed (we didn’t add any coords or anything yet). But you’ve done something: you’ve made a whole new box. It’s called the “generated box” and it’s sitting right on top of your original box. “Sitting on top” like one piece of paper sits over another piece of paper. This explains why positioned boxes can overlap; they’re not on the same plane anymore.

The generated box carries everything you see that was in the original box: background colour, borders, etc and also the children that were in that original box are now on the new stacking context (they continue to sit “higher” than their parent).

So now, add in your coordinates: say, left: 5px; top: 30px; With that, you’ll move your generated box 5px away from the left and 30x away from the top… but the old box is still there, taking up space.

Absolute positioning is worse: it lets newbies to positioning think they’ve found a tool they can love, one that lets them precisely position stuff exactly where they want on a page.
Where they are placed is relative to their nearest positioned ancestor, not necessarily their container! So if you want a box to be positioned relative to a parent container, that parent container will have to have position: relative on it, because that makes it “positioned”.

There’s a reason Good web devs don’t make a lot of use of absolute positioning: it’s more code, and more fragile, than just working with the flow and using margins and floats to shift stuff around.

What does fragile mean? You’ll hear (if you haven’t already) that absolute positioning “takes elements out of the flow”. Yep, totally. An absolutely positioned element is practically stuck to just underneath the glass of your screen, it sits so high. It cannot see the page… it can only see its positioned ancestor. As for all the other boxes on the page, for them the abso-po’d box doesn’t even exist. They can’t see it. They can’t touch it. They can’t interact with it. It’s like if all the elements were sitting as flat plates on the bottom of the ocean floor; your abso-po’d boxes are matresses floating on the surface. Invisible.

So I like to say: if you’re riding a horse to get somewhere, don’t spend your time telling it exactly where to place its feet. Let the horse find its own footsteps, and you’ll get where you want much faster and with MOAR Laziness (which, remember, is a good thing).

Floats

  1. when i do width 25% and float right. the other empty 25% is occupied, the 2nd div which has 25% and float on left comes after that. not side by side. why is that? how can i float them side by side.

Are you sure you mean 25%? Because I do it and they are side-by-side. If you meant 50% then it makes sense due to either browser bugs or rounding: reducing them to 49% would get around that and should show them side-by-side.

Or did you mean you have three floats of 25%? (still works on my machine)

Also, you might find this handy to bookmark for now, even if you only read it later: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15
and this one especially:
http://gtwebdev.com/workshop/floats/enclosing-floats.php

  1. first div on the right has lot of text which will make div bigger (to make it more prominent i gave background color, ) now other div on left has 2-3 lines and has a background of pink. the color ends where the text ends (div is wrapping around text) but wht if i wanna make it equal to the div on right.meaning both has same height without any height defined?

Static boxes, absolutely-positioned boxes, and floats are all height: auto by default. Defining a height is often undesirable since it limits your content height. However you can usually get away with using min-height if you know the maximum height your box’s content will ever be, while allowing growth if something happens anyway and the content does get longer (like if someone does text-enlarge).

Otherwise, you’ve run across a very old CSS question: how do I do automatic equal heights?
The answer is, the CSS guys screwed up and did not make code for that. So you do hacks. They’re called hacks because they don’t do straighforward what we really want.

If you google “faux columns css” you’ll find a bazillion people making two boxes look the same height using a background image. A lot of the time this is GoodEnough.

But sometimes it isn’t. There’s another technique, Paul might have come up with it first, using absolute positioning as a hack.
Normally, the rule about heights and boxes is that a box can’t have a % height unless its parent has an explicit (non %) height. So normally, this won’t work:
parent {
height: 60%;
}
child {
height: 80%;
}

but normally this will:
parent {
height: 60em;
}
child {
height: 80%;
}

If the parent is absolutely positioned though, if I understand correctly (I never looked very closely at it) then you can use % heights on children… or at least 100% height.

Ryan’s got the link bookmarked I’m sure, to Paul’s Absolute-positioning 100% height or equal-column trick (which needs special hacks for IE6). I don’t have it handy but you could try googling it (or look through pmob.co.uk), but I’m too lazy to go hunt for it myself.

There’s also matryoshka floats. If you know the one float is always going to be taller than the other float, make it an inner float of the other. Children determine their parent’s height, so if the bigger float is inside the smaller float, the smaller float has to become just as big in order to fit it in.

I’m in a hurry so i let 1 and 2 to some one else but about floating:
you want the two divs floated next to each other: set both to float left.
About the equal height without adding a height:
this trhead

poes that’s too much info for me to digest but thanks though for taking time out and explaining it so much. will study it again n again to get it across my thick head

Dude, ammark, that took me years to get down. We didn’t read it in one swallow and Bam! knew it all.

You’ll need to absolutely keep doing exactly what you are doing… you will remember the rule more when you see them in action, so keep playing with those boxes! You’ll also keep running into unexpected stuff as you build pages… I still did a year after I thought I was getting pretty good at this stuff.

I’m learning stuff on these forums daily still.

Is there Javascript doing something on that page then? I only see one image and nothing else??