View Full Version : site help with layout

09-22-2007, 06:14 PM
Hello, this is my website. www.athletes4excellence.com/trackandfield.php
I was wondering if anyone knew how to make the sides be as long as where the Copyright panel is. So I want it to be even on everypage with the content (middle part) and I also want that to be like that too to touch the Copyright panel.

Thanks a lot.

09-22-2007, 07:43 PM
Well, since you have a fixed width you could do a cheat. I would make a background image that's the same width as your #contentwrapper div, maybe 10px high, then then put the two bands of color or imagery, each 145px wide. Then I'd set the background of the #contentwrapper div to the following:

#contentwrapper {background: #fff url(images/columns.gif) repeat-y; }

09-22-2007, 09:16 PM
This (http://bonrouge.com/3c-hf-fixed.php) should explain it.

09-23-2007, 03:29 AM
Ohh ok thanks. http://www.athletes4excellence.com/trackandfield.php However, how do I make the middle part touch the copyright?

09-26-2007, 01:42 AM
Anyone please and thanks very much.

09-26-2007, 01:57 AM
It's not touching the copyright div because the main content divs aren't as long as the advert bar on the right.

I'm with marilynn, you should put a faux column background on the back of the wrapper div that encapsulates everything.

Dan from Simplebits wrote an article about this technique for ALA--you can find it here:


09-26-2007, 02:17 AM
I think you missed an inner wrapper that is used in the bonrouge example.

<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="left">Left</div>
<div id="main">
<div id="right">Right</div>
<div id="content">Main Content</div>
<div id="footer">Footer</div>

Notice how bonrouge closes the inner-wrap, which encloses the three columns, then inserts the footer div. After the footer the outer wrap is closed. This is important for the styling to work and let the columns flow down to touch the footer.

In addition, you have some complex syntax errors to fix. You have duplicate <body> tags for one thing. No sense tweaking the html and css until this validates.

<div id="maincontainer">

<div id="topsection"><div class="top"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-image: url(New%20Design/backgroundsmall5pxhigh.jpg);


<div align="center"><span class="style1"><img src="AFE/Banner/newtop750by140px.gif" width="750" height="114" /></span></div>

Validate your code!


10-10-2007, 04:41 AM
I don't understand how to validate. I tried the codes, but they did not work.

10-10-2007, 07:24 AM
Touch this link.


That is the page which shows the validation errors. To get a page validated, browse to this link : http://validator.w3.org/ and enter the page URL into the input field, as per the page's instructions. The output page will be a list of the problems the validator has with your html page. Find the place in your source code and write new code to fix the problems and repeat the validation/repair steps until the page is valid.