My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.

Categories

My Older Tutorials

My Old Web Dev Site

CSS
Now that we have semi-compatible browsers (Firefox, IE7, Safari, Opera), using ccascading style sheets is even starting to be fun, but does not come without hours and hours of frustration leaving floats, etc. Advice for web developers: learning something about CSS every day.
 
CSS CODE EXAMPLE created on Sunday, March 08, 2009 permalink
How to absolutely position DIVs inside a relatively positioned DIV
I needed to have a centered web-2.0-looking site that had a number of centered sections (e.g. header, body, footer) and in each of these sections needed to be absolutely position elements. Here is some clean HTML/CSS to get you started.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
    <title>Title</title>

<style type="text/css">

body {
    margin: 0;
    padding: 10px;
}

#headerArea {
    position: relative;
    background: yellow;
    margin: 0 auto;
    width: 760px;
    height: 150px;
}

#headerArea div {
    position: absolute;
}

#logo {
    top: 20px;
    left: 20px;
    background: orange;
    text-align: center;
    font-size: 32pt;
    width: 150px;
    padding: 10px;
}

#menu {
    top: 20px;
    right: 20px;
    background: tomato;
    text-align: center;
    font-size: 14pt;
    width: 240px;
    padding: 10px;
}


#line {
    top: 80px;
    left: 20px;
    width: 720px;
    border-top: 1px solid blue;
}

#title {
    top: 90px;
    right: 20px;
    font-style: italic;
    font-size: 14pt;
}

</style>

</head>

<body>
    <div id="headerArea">
        <div id="line"></div>
        <div id="logo">LOGO</div>
        <div id="menu">One Two Three Four Five</div>
        <div id="title">This is the Title a Bit Longer</div>
    </div>
</body>
</html>
 
CSS ARTICLE created on Friday, January 02, 2009 permalink
Looks like an article explaning how to get columns to be the same height in CSS like you can do it so easily in tables.