Abusing absolute positioning. Is this the right way to layer my page?

Question

so uh I've been messing around with web design for a while, but I usually delete every project (imagery galleries for an example) I make. But this time I decide to finally make something and keep it.The problem is, absolute positioning is pretty easy to use, but I don't know if this is the right way to use it, as in, am I overdoing it? is there a limit to how much absolute positioning to use? and my BIGGEST PROBLEM IS HOW EXACT I HAVE TO BE when using absolute positioning.I have to manually set the exact position of my elements, pixel by pixel, margin by margin. And if you look closely, you'll notice that some of the elements are not fully taking up the space, like you can see a little bit of white space between the some elements and the margins. Anyway, I was thinking of making the page elements more exact by increasing the sizes(or whatever I have to do) to completely fill up any white spaces, but I don't know if I should go ahead and use absolute positioning or stop right now and use other positionings before its too late. Don't worry about the elements' names and id. here's my css, complete html below

body
{margin:0px; margin-top:0px; padding:0px;}
#headBar
{background-color:black; margin-top:-16px; height:30px;}
.headerText{
color: white;
}
#leftMenu
{background: pink;
float:left;
height:989px; 
width:190px;
opacity:;
}

#mainImage
{background:yellow; 
height:500px;
width:1160px;
position:absolute;
left:189px;
}
img
{position:absolute; right:0px;}
#secondImage
{background:aqua; height:490px; 
width:350px; position:absolute; 
top:530px;
margin-left:190px;}

#message
{background:pink;position:absolute; top:530px; left:539.5px;
width:400px; height:190px;
}

#otherMsg
{background:purple; position:absolute;top: 530px; left:940px;
width:409px; height:490px;
}
#thirdMessage
{background:green; position:absolute; z-index:1;
top:720px; left:540px; width:400px; height:300px;
}

here's the jsfiddle- http://jsfiddle.net/3vWAG/

Answer 1

Nopes. This is the worst way to do. In order to achieve something like this, you need to use float, clear, that's it. The whole thing can be achieved using the two. This is not a recommended way. And different browsers interpret it differently.

And moreover, this is a fluid layout! :)

Your HTML should logically contain only this piece of code and not anything else:

HTML

<header>Models Point</header>
<div class="content">
    <div class="side">Whole Page</div>
    <div class="main">
        <div class="intro">Lorem ipsum dolor sit amet?</div>
        <div class="boxes three-col">
            <div class="col sec-img">Second Image</div>
            <div class="col">
                <div class="row small-msg-box">Small Message Box</div>
                <div class="row small-msg-box">Third Message Box</div>
            </div>
            <div class="col other">Other image box next to the message box</div>
        </div>
    </div>
</div>

CSS

* {font-family: Segoe UI; margin: 0; padding: 0;}
header {background: #000; color: #fff; padding: 5px;}
.content {overflow: hidden;}
.side {float: left; width: 20%; background: #fcc; height: 300px;}
.main {float: right; width: 80%;}
.three-col {overflow: hidden;}
.three-col .col {float: left; width: 33.333%;}
.small-msg-box {height: 100px; background: #080;}
.small-msg-box:first-child {background: #fcc;}
.intro {background: #ff0; height: 100px;}
.sec-img {background: #0ff; height: 200px;}
.other {background: #808; height: 200px;}

Preview

Fiddle: http://jsfiddle.net/praveenscience/9QGTs/

Answer 2

To expand on my comment, if you don't already see then benefits of relative positioning then I'll assume you are a begginer. Here is a useful video to help you re-design you page:

https://www.youtube.com/watch?v=0afZj1G0BIE

Also, this is useful for comparing when each positioning method is best used:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

And finally a general website that will be extremely useful for you in the near future may be CSSTricks!

Answer 3

I’d say, absolute positioning is definitively not the first choice for the basis of a layout (special edge cases aside).

I know that beginners tend to jump on that train quite easily – because it’s the fastest thing to give them initial results quickly and is pretty straight-forward – compared to f.e. understanding the complexities of float.

But there are a number of inherent problems in using absolute positioning for “everything”, which as a beginner you will probably not be able to see/identify quite away – but they will show up eventually, and then you will have to either search for half-assed fixes or, more likely, even start from scratch.

The aforementioned float property is one of our most common layout tools – although it was not initially meant to be, and has its own quirks and drawbacks; but it has been, I think it’s fair to say, the main CSS layout method for the last at least half a decade – so I’d say you should start with getting a feel for that. It is well documented, and there are a lot of resources out there teaching you the basics and providing how-tos for common scenarios. (And also compare it to using “inline-blocks”, which are similar, but different ;-))

Nowadays there is a new concept/model called “flexbox” – which they came up with to address all the shortcomings of floating and the other tools we used in combination with it. It is relatively(!) new though, and browser support is not perfect yet – but it is definitively worth looking into, although it will at the beginning most likely be even more complex than the float concept.

So start with float, and then move on to advanced stuff like flexbox.

---

Everything said before does of course not mean, that you should shy away from using absolute positioning completely – there are definitively many use cases where it is the tool for the job, but mostly for smaller parts of your layout and “special” effects. But for the whole of your layout, it is not in 99.9% of cases.