johnMoss
12-30-2010, 10:41 PM
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
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