DWT Question

Question

If you look at the lower left column on this page, you will see that the light green background and the line to the right of the background do not extend all the way to the bottom of the page. If I detach the DWT, I can make the change to the left column height and it works but with the DWT attached, the option to change the left column is greyed out. Is there a way to change that left column without detaching the DWT?

Answer 1

First, before ever taking my advice, save a copy of your page so that if this screws it up you can go back to what you had.

Here is what I would do:

In the dwt, add another style to the list of styles:
hr.letsmeetatbottom {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}

Then, add this as the very last thing in the outerwrapper, right before the closing tag (which in your example is right after the <br class="clearFloat" /> tag:

<hr class="letsmeetatbottom" />

See if that does any good or not.
pg

Answer 2

PseudoGeek said:

First, before ever taking my advice, save a copy of your page so that if this screws it up you can go back to what you had.

Here is what I would do:

In the dwt, add another style to the list of styles:
hr.letsmeetatbottom {
clear:both;
height:1px;
margin: -1px 0 0 0; padding:0;
border:none;
visibility: hidden;
}

Then, add this as the very last thing in the outerwrapper, right before the closing tag (which in your example is right after the <br class="clearFloat" /> tag:

<hr class="letsmeetatbottom" />

See if that does any good or not.
pg

That put a horizontal line completely across the page just above the footer but the left column did not change. During the process I also found out that if you detach a page from the DWT, everything gets messed up if you dont change it back before closing EW so I had to download the web from the server to get back to square one.

Answer 3

Hmmm.
Sorry, I thought sure that would work.

To pull the columns down together, you have to have some kind of cleared element that sits as the last thing in the container that holds the two (or more) columns.

Here's one that I used in the www.calldolly.com master page:

In the style sheet I have a class named clearfix:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


Then in the master page (works kinda like a dwt) I have a div which holds two columns that I want to have meet at the bottom. The id of that div is "maincontent."

I applied the clearfix class to the maincontent id as follows:

<div id="maincontent" class="clearfix">

I was hoping the other method would work because it looked simpler, but this is simple also. It was originally developed by Tony Aslett, of csscreator.com and I found it at http://www.positioniseverything.net/easyclearing.html.

Maybe that will work for you.

What you are wanting to do is certainly feasible; hang in there.

Steve

Answer 4

gskywalkers said:

If you look at the lower left column on this page, you will see that the light green background and the line to the right of the background do not extend all the way to the bottom of the page. If I detach the DWT, I can make the change to the left column height and it works but with the DWT attached, the option to change the left column is greyed out. Is there a way to change that left column without detaching the DWT?

Here is the method I use to accomplish the left column match:

I put both columns inside a container div.

Set the container background to match the left column.

Set the right column to whatever background you want it to have, which I think was white on your site.

Set the left border style of the right column to the line you are trying to exend all the way down between columns.

Set the left border style of the container to the line you are trying to extend all the way down the left side.

no border on bottom of left column

When the left column stops, the container will pickup and complete the background color.

The 2 border settings will complete the lines.

I've used this approach many times. Let me know if you need furhter tweaking.

---

Perry

Answer 5

Thanks for your replies both Perry and PG. This is a CSS Sculptor Layout I am working with so I wanted to stay within the parameters of the program, otherwise I might just as well start from scratch. I should probably have mentioned that in my initial post. In any event, after messing with it for 2 days, I found that the only thing needing change was the height of the left column. Where I ran into trouble was being able to do it without detaching the DWT.

After poking around in there for another day and a half, I found that I could create an additional left column style #leftColumn1 to control the height while the DWT Style #outerWrapper #contentWrapper

#leftColumn1 controlled all other aspects of the left

column.

It seems to work. I left the home page the way it was and created a new #leftColumn1 style for all the other pages so that you can see what I was trying to do. It's a bit cumbersome doing it this way but it's the best I could come up with.

In the meantime, I will create a couple new webs and see what kind of results I get using both of your suggestions. Thanks again for your posts.