How do I expand a div if another div gets bigger?

[anagoge]

I'm in the process of redesigning my site, but I'm very bad when it comes to HTML/CSS. I know the basics, but building websites is something I hate. I need your help.

Firstly, see this example (http://www.putfile.com/pic.php?img=6197777) for how I want the page to look. Sorry, Putfile resizes the image but you'll get the idea. Secondly, see the actual website (http://www.theworkof.co.uk/new/index.html) for how it currently looks.

My problem is that I don't know how to make those four vertical grey lines expand as the content in the "Who am I?" and "Featured" (section to the right of "Who am I?") sections contain more information.

Currently, I've got it set up so that those four lines are actually all one gif as a background in a div and I've told the div to tile the background. But, the only way I know how to make the div bigger when the "Who am I?" and "Featured" sections get bigger is to make the gif div bigger manually. That's not very usable in the long run.

CSS for the gif div and associated divs:

#Layout1 {
position:relative;
margin:auto;
left:0px;
top:67px;
width:800px;
z-index:3;
background-image: url(layout1.gif);
background-repeat:repeat-y;
background-position: center;
}
#Links {
position:relative;
text-align:left;
left:10px;
top:0px;
width:110px;
z-index:3;
}
#Introduction {
position:relative;
text-align:left;
left:138px;
top:-90px;
width:330px;
z-index:3;
}
#Featured {
position:relative;
left:490px;
top:-396px;
width:300px;
z-index:3;
height: 400px;
}

HTML:

<div id="Container">

<div id="Logo"><img src="logo.gif" alt="Logo" width="69" height="100" /></div>
<div id="Gradient"></div>
<div id="Layout1">
<div id="Links">
<p><a href="comissions.html">+ Comissions</a><br />
<a href="projects.html">+ Projects</a><br />
<a href="artwork.html">+ Artwork</a></p>
<p>&nbsp;</p>
<p><a href="contactme.html">+ Contact Me</a></p>
</div>
<div id="Introduction">
<h1>Who am I?</h1>
<p>Hi, I’m Neil. I’m a 23 year old graphic designer from Liverpool, UK. I’ve been designing since 2001.</p>
<p>&nbsp;</p>
<p>After achieving good results from a one year course in graphic design at Liverpool Arts Centre in 2003, I then went on to complete a two year course in multimedia at the same place and passed with a triple distinction. </p>
<p>&nbsp;</p>
<p>I’m currently studying graphic design at the University of Chester until 2009 at which point I would like to become part of a design company and further my experience and skills.</p>
<p>&nbsp;</p>
<p>I’m fluent in using all standard design software including Photoshop, Illustrator and InDesign. I’m also available for commissions, just get in touch.</p>
</div>
<div id="Featured">
<p><a href="projects/10x10/10x10.html"><img src="featured1.jpg" alt="Featured Artwork" width="300" height="80" border="0" /></a></p>
<p>&nbsp;</p>
<h1>10x10 - A Visual Book</h1>
<p>&nbsp;</p>
<p>A visually rich book that opens out to a huge 10 metres wide! <a href="projects/10x10/10x10.html">More&raquo;</a></p>
<p>&nbsp;</p>
<p><a href="artwork/2007/cat.jpg" rel="lightbox"><img src="featured2.jpg" alt="Featured Artwork" width="300" height="80" border="0" /></a></p>
<p>&nbsp;</p>
<h1>A Birthday Gift</h1>
<p>&nbsp;</p>
<p>An illustration of a friend for her birthday. <a href="artwork/2007/cat.jpg" rel="lightbox">View full image&raquo; </a></p>
</div>
</div>
</div>

You'll notice that even though links/introduction/featured are all level on the page, they all have different top heights (0, -90, -396 respectively). This really messes the page up when you increase the size of the text using the browser. I'm assuming/hope there has to be a better way.

Also, as in the example that I linked to, there's two other sections below the three mentioned already; the blog and photography section and a horizontal grey line that seperates them from the top three sections. I need to know how/where I should create this part of the layout.

Like I said, I'm terrible with building websites and I really need someone to just explain to me how to go about doing what I want to do. Maybe if I understand how to do this, the main page the other pages (which have slightly different layouts) will be easier to complete.

Thank you for your help. :)

[smyhre]

The way I see it is that you have it set up right I mean I'm kinda new at html and css myself but I have a 1 px high background image repeat down like in your css. When the content is too much for the division, the div and length that the image repeat automatically increases. You can look at my site (http://www.andrews.edu/~myhre) or this site (http://www.andrews.edu/~myhre/aias) for info on how I did it. Well look at the code anyway. My site is in html and the other is in xhtml. Don't know if it helps at all but its worth a shot I guess.

[Centauri]

Your main problem here is you are forcibly "pulling" things into position with position:relative - the only time you need to do that is when you want something to overlap, like your logo image.

The "faux column" you set up with the #Layout1 background image is probably the best way to handle equal column lengths. The three columns contained within should be "floated" left, which will put them side by side naturally, and spaced using margins. The container (#Layout1) can be made to enclose the floats by setting its overflow property.
#Container {
}
#Gradient {
height:40px;
background-image: url(gradient.gif);
}
#Logo {
position:relative;
text-align:center;
top:82px;
height:100px;
z-index:3;
}
#Layout1 {
margin:67px auto 0;
width:800px;
background-image: url(layout1.gif);
background-repeat:repeat-y;
background-position: center;
overflow: hidden;
}
#Links {
float:left;
text-align:left;
margin-left:10px;
width:110px;
display: inline;
}
#Introduction {
float: left;
text-align:left;
margin-left:20px;
display: inline;
width:330px;
}
#Featured {
float: left;
margin-left:20px;
display: inline;
width:300px;
}

Note that #container now has no properties set, so it is probably not needed at all. Unfloated divs normally take up the full available width, so 100% width setting is not required. You could also get rid of most of the <p>&nbsp;</p> stuff by setting wider top and bottom margins on <p> elements in your css :p {
padding: 0px;
margin: 15px 0;
}

[anagoge]

Many thanks for your help. Really really appreciated!