<DIV> layout

Hiya,

I'm using a template I got from one of those free template websites.

This is the site (its just a temporary one): www.yourleagueonline.com/yleague

Now you will see that the content are is split into 3 <div>'s - left, right, and main.

Here is where the CSS file is located: www.yourleagueonline.com/yleague/lib/style.css

My problem is that I want to remove the right side as I want to place it on the left.

So to attempt this I did the following:

a) Removed <div id="right"> content </div> from the index file.
b) Removed #right { content } from the style sheet.

Because the #main { width is set to auto I figured this would just take up the remainder of the room.

However instead what it did, was just take away the menu options from the right, but left just a black strip 170px in width.

Can someone have a look at the 2 source pages and give any suggestion.

Thanks in advance! :thumbsup:

Taylor.

PS. Before anyone says anything - the big black space up top is for the logo, which has yet to be created! lol :)

ok.. you will want to modify this block in your css ->

#main {
background: #fff;
border: 1px solid #393939;
margin: 2px 170px 0 170px;
padding: 0;
width: auto;
}

See how the margin has it's left and right margins set to 170px - you want to change the 2nd 170 to say.. 0px

#main {
background: #fff;
border: 1px solid #393939;
margin: 2px 0px 0 170px;
padding: 0;
width: auto;
}

Simple enough..

Thanks mac! :thumbsup:

Taylor.

Okay so my original question got answered.. but I have a further problem also to do with DIV so I kept it here rather than make a new post..

Anyway...

If you take a look at the following page:

www.yourleagueonline.com/yleague/?module=ladder&id=bg

And look at the main content area. You will see that the page does not go all the way down.

How to I overcome this? I want the length of the main DIV to be the same if not more than the left DIV.

Any suggestions much appreciated!

Thanks in advance! :thumbsup:

Taylor.

I've temporarily stuck this:

<p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>


At the bottom of it to make sure the main content goes longer than the left side - but obviously this is not really an ideal solution.. but will do for now until someone can show me how to fix this :)

2 Ways of doing this. One of them should fix the problem.
Either make your height longer
(example >>>) height: 180px; to height: 300px;

Or use an autoflow to use the rest of the page like this.

overflow: auto;

Use it in the css like this

.events {
height: 180px;
width: 280px;
margin: 20px auto;
background: #CCC;
padding: 20px;
overflow: auto;
}

If either doesn't work I have no clue!!