The Document Flow:
To really understand about CSS positioning, it’s important to understand what the document flow is and how it relates to positioning.
Document flow is a system by which a renderer(such as a web browser) lays out pieces of visible content on a screen so that they flow one after the other in predictable ways. Every element on a web page, that means every headline, every paragraph, every list item, every line of text and every single character within every paragraph – follow the rules of flow to determine where on the screen they get displayed.
In the english language, document flow just mimics what you would expect to see on a printed page and is read from top left to bottom right. But to a web browser, web pages are really just long strings of sequential characters one after the other and it needs some way to know how to order these characters on the screen. So it uses the rules of flow to do this.
Box model
I am sure you have heard the term ‘box’ used often enough when talking about CSS? So what is this box and why does it relate to document flow?
Quite simply, everything on a web page that is visible creates a box of a certain type, but not all CSS box’s are created equally.
There are two different kinds of box’s which are called inline-level and block-level elements. A block level element will always flow onto the page one on top of another, just like bricks in a vertical stack. An example of a block-level element would be the div tags or the paragraph tag.
Inline-level elements however are almost always inside some containing block-level element, but instead of flowing one after another in a vertical stack like the block-level elements do, they flow one after the other horizontally.
Each character of text that the browser sees is placed in the same horizontal line with any inline element that came before it. It’s only when there isn’t enough space for things to fit on the same line that the inline element get’s bumped down to the next line.
The kind of CSS box that an element generates(inline or block level) can be controlled with CSS and with a little know how, it can be placed exactly where you want it to go – pixel perfect!
Absolute Positioning
When you position an element using absolute positioning, your are taking that element(normally an image or other block-level element) out of the document flow. The only thing it will listen to is it’s direct parent, which happens to be the containing html element – or browser window!
The problem we now have is if we was to drag our browser window out to compensate for larger screens, our stubborn little box will stay put and all the other well behaved elements(content) will drag with us! So how do we get around this? We want to be able to put our box anywhere we like, but this screen resolution business isn’t doing us any favors!
The concept isn’t hard and it’s certainly not new, BUT not that many people may know how to use it. Until now of course! And i can assure you that once you learn this you will be using it all over the place in your own projects.
Absolute + Relative
Our CSS at the moment looks like this…
#wrapper {
margin: 0 auto; /* Centers our page */
width: 960px;
}
#box {
position: absolute; /* taken out of the document flow */
top: 300px; /* 300px down from the top */
}
But now we want our box to be 300px down and 300px from the left, and we want the little blighter to stay there! And the only thing we need to do is add this CSS to our wrapper div.
#wrapper {
position: relative;
margin: 0 auto; /* Centers our page */
width: 960px;
}
#box {
position: absolute; /* taken out of the document flow */
top: 300px; /* 300px down from the top */
left: 300px; /* 300px from the left */
}
Now when we drag our browser window out, our once naughty box will now be a good box and stay inside our wrapper which drags with us! BINGO! Jobs a good’en!
What you can do now is create another div, perhaps a sidebar or something and set that to relative and position our box inside that. The box will now be taking orders from our new sidebar div and will never leave that area.
I don’t generally respond to blogposts but I will in this case. Wow a big thumbs up for this 1!
22.09.2010, 11:43 amGood for you, professional writer. You are amazing.
02.10.2010, 8:03 pmThanks a lot, i appreciate the comments.
02.10.2010, 10:53 pmYes, sure, I like it, interesting and cool. Please continue to publish more interesting texts in your personal site.
03.10.2010, 1:49 pmgreat post joined your rss
14.10.2010, 2:03 pmCool post! How much stuff did you have to look up in order to write this one? I can tell you put some work in.
17.10.2010, 11:43 amThis is the best blog I’ve ever seen in my life! I really appreciate you taking the time out of your busy day to share your this with everyone.
19.10.2010, 3:17 amI thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. I am sure my visitors will find that very useful. . . .
19.10.2010, 3:48 pmI really like your site and i really appreciate the excellent quality content you are posting here for free for your online readers. Can you tell us which blog platform you are using?
19.10.2010, 3:48 pmHi, thanks for your kind comments. This blog is powered by wordpress.
24.10.2010, 7:57 pmSalut! Can I quote piece of the information from your blog if I provide a linkback to your website?
19.10.2010, 6:35 pmThank you all for your nice comments, i will be adding more articles and tutorials very soon.
19.10.2010, 9:12 pmWicked! Just got a new BB Pearl and I can now read your blog on my phone’s browser, it didn’t work on my old one.
27.10.2010, 2:42 amDeftly rare and up on chicken flicks
28.10.2010, 5:55 amAlways interesting to follow a different website. Thank you for the post . Of course, apart from the content , the design of your website looks honestly nice . Bravo .
05.11.2010, 6:34 pmCompletely agree along with your comments on this – thanks for taking the time to blog post.
15.11.2010, 12:14 pmJust leaving a comment on how good the design of your site is, been looking into creating a blog similar to yours and might make mine similar, did you hire a coder or did you create it yourself?
19.11.2010, 2:12 amLove your site man keep up the good work
26.11.2010, 11:23 pmThanks Matt, i do appreciate the comments
)
05.12.2010, 2:11 pmI thought it was going to be some boring old post, but I’m glad I visited. I will post a link to this site on my blog. I am sure my visitors will find that very useful.
27.11.2010, 7:30 pmI love it. I find your blog very fresh. Good job on keeping it current.
27.11.2010, 10:50 pminterestingly posts I am honered to have read
02.12.2010, 3:11 amthis was a very entertaining read. i enjoyed it very much!
03.12.2010, 2:39 pmCSS is truly not that difficult once you understand some of the bugs that exist, commonly in IE. I design CSS layouts on a daily basis and often the design is pretty much the same as if I was using tables.
04.12.2010, 2:11 amHi Donna,
Yeah you are right, CSS is probably the easiest language to learn but it is rarely used to it’s full potential.
04.12.2010, 2:54 pmI’ve been making CSS layouts for about five years, and seriously, it’s not that difficult. If you tackle the procedure from the perspective of doing it correct initially, know a few of the biggest browser quirks, and fine-tune for minor quirks, undoubtly you will have a much easier time than with table layout.
07.12.2010, 10:03 pmThanks for posting this.
12.12.2010, 11:37 amI’ve bookmarked, Dugg, and I joined the RSS subscription. Thanks! .
16.12.2010, 11:31 amHey! I would like to inform you that if I look at this page on my iphone the page looks very strange. It’s very wide. I know this is a simple fix. Other than that great blog! I’ve bookmarked it.
16.12.2010, 7:47 pmHello.This article was really remarkable, particularly since I was looking for thoughts on this subject last Saturday.
17.12.2010, 4:04 pmValuable info. Lucky me I found your site by accident, I bookmarked it.
18.12.2010, 7:09 pmInteresting article and one which should be more widely known about in my view. Your level of detail is good and the clarity of writing is excellent. I have bookmarked it for you so that others will be able to see what you have to say.
23.12.2010, 1:25 pmNice post btw!
23.12.2010, 2:46 pm