[CSS] 3 column problems, content overlapping?

Spider

Spider

Spider

Associate
Joined
28 Nov 2002
Posts
766
Location
Down the road
I have designed a site based on a master template which uses three columns – the left hand column is set to a width of 12%, the right hand column is also set to 12% and I want the center “content” pane to use the remaining space.
However, despite setting its width to various properties, I am not getting the behaviour I want.
One of my main problems being that items placed in the center column are over-lapping outside the boundary of the container and overlapping the right hand column, which is not what I want/need. For example a simple HTML table is wider than the container and overlaps which I cannot allow.

How do I contain the content within the boundaries of the central container and what CSS properties should I be using to explicitly place my columns where I want them to appear?

Thanks
 
Ok, here goes:

Code: 
.content 
{
	position:relative; 
	width:auto;
	max-width: 78%;
	margin: 0px 205px 30px 177px;
	padding:5px;
	z-index:3; 
	}
.footer
{
    position:relative;
    clear:both;
    bottom:1px;
    width:100%;
    margin-bottom:0px;
    z-index:0;
}

#navLeft {
	position:absolute;
	height:auto;
	width:10%;
	top:165px;
	left:10px;
	border:0px;
	color: White;
	padding: 2px;
	z-index:2 ;
	voice-family: "\"}\"";
	voice-family:inherit;
	}
		
#navRight {
	position:absolute;
	height:auto;
	top:165px;
	right:10px;
	padding: 2px;
	border:0px;
	color: White;
	z-index:2;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:10%;
	}

tbh I've butchered the CSS that much fiddling it about I cannot remember what worked best and what has not. LOL.

Then in my site master file I have three DIV's of class="navLeft", class="navRight" and the third is inside a form element as follows:

Code: 
<form id="form1" runat="server">
    <div class="content">
        <asp:contentplaceholder id="MainContent" runat="server">
        </asp:contentplaceholder>
    </div>
</form>

Thanks :)
 
Pr0t0c0L said:
http://www.positioniseverything.net/articles/onetruelayout/

read through this, and in the examples section you can get the layout template generated for you, this is tried and tested to work in IE firefox opera safari.

if you put content divs inside the blocks the template will stay robust for the future when you start populating your columsn heavily
Click to expand...

Thanks, but cut & pasting the templates given on that site (On the any order column page) but theydont work! LOL!
Block 1 (which should appear in the middle) appears at the top on its own, and blocks 2 & 3 are underneath, both on top of each other! I have literally cut and pasted them in and when viewed in IE7 its all over the place!
 
OK, I seem to have isolated the problem down to the main content holder having a FORM and an ASP:ContentPlaceHolder defined in the site master template file. When I comment these out the columns diaplay normally. When I re-enable them all sorts of weird things happen, such as the content pane appearing above or below the others, stritching to fith the width of the screen etc. etc.

<div class="content">
<form id="form1" runat="server">
<asp:contentplaceholder id="MainContent" runat="server">
</asp:contentplaceholder>
</form>
</div>


Any thoughts on what I can do about this?
 
You must log in or register to reply here.
Back
Top Bottom