DW Problem; Can't see border, text overlap

[johnMoss]

I actually have two things going on;

1) I've put a border on this div (formContainer) and it is visible just fine in design view; but switch to live and it's gone, ditto in the browser...

css:
.formContainer {
border-style:solid;
border:10px;
border-color:#cc2229;
position:relative;
margin:auto;
}

And here's the css on the div directly above it:
.bodyTopBox {
background-color: #CC2229;
text-align:center;
font-size:28px;
font-style:italic;
color:#FFF;
clear:both;
}

There is currently nothing below. This div 'formContainer' is nested in a master container encompassing the entire page: Here is it's css:

.container {
width: 780px;
background: #FFF;
margin: 0 auto;
}

I've scoured the net for a similar question and can't find one... I suspect that whatever I'm doing wrong here is also causing my second problem, that of content overlap. I'm using the relative positioning as I make my way down the page, and everybody plays nice until I created a container div and put two divs in it;

css:

.centerContainer {
position:relative;
}
.leftCenterBox {
background-color: #FCEFBC;
text-align:left;
margin: 0 auto;
padding-left:10px;
padding-right:10px;
font-size:18px;
position:absolute;
width:33%;
}

.rightCenterBox {
float:right;
font-size:16px;
}

I thought my second error (overlap) was somehow connected to this centerContainer, but I removed it and I still have the problem of the vanishing border so I assume I have not properly protected these divs from competing code. Is there an effective way of protecting divs as I move along such that new divs will respect the flow of the page and not try to compete for position with preceding divs?
Thank you very much for any light on the subject!
JM

[DWcourse]

I'd actually need to see the page. Can you post it somewhere and give us a link.

[johnMoss]

I'll upload the files.Thanx

[johnMoss]

here are the files...

[DWcourse]

To begin with, don't use absolute positioning as you did on the LeftCenterBox div. And remember the float property means objects that appear after the floated object will wrap around the floated object unless you add the clear property to their CSS rule.

For what you're trying to accomplish, I'd recommend looking at the 2 column with header and footer layout that is built into Dreamweaver and adapt that.

[johnMoss]

Copy that, what positioning, if any might you reccomend on that left div? The problem here is that the design incorporates solid blocks interspersed with two part blocks. What I'm stynied by is that this isn't aproblem until I pop in this container div w two components; can I not "wrap" this div such that it remains unmolested by what follows in the next div container?
Very much appreciate your input, thanx again!
JM

[DWcourse]

There are a lot of ways to do it but one is

.container {
margin: 0 auto 0 auto;
}
.leftDiv {
float: left;
width: 250px;
}
.rightDiv {
margin-left: 250px;
}
.fullwidthDiv {
clear: left;
}

<div class="container">
<div class="leftDiv"></div>
<div class="rightDiv"></div>
<div class="fullwidthDiv"></div>
<div class="leftDiv"></div>
<div class="rightDiv"></div>
<div class="fullwidthDiv"></div>
</div>

That would give you two columns then a full width div then two columns and another full width div. Repeat as needed.

[johnMoss]

Ans as expected, that worked like a charm, so thank you... The border on the ensuing div below this batch of CSS however still refuses to show the border in live view... Any thoughts?
JM

[johnMoss]

I found a way to make the border work:
border: .6em solid #CC2229;

I don't understand why it didn't work when I had the properties of the border separated though...

[DWcourse]

border is the shortcut property for all border properties. I suspect that using:

border:10px;

rather than border-width: 10px;

Was overwriting the border-style property (at least in Live Preview). That is a null value was assumed when the width wasn't specified for the border property.