3 column layout

hyster · June 28, 2013

hey guys

im trying to get a 3 column layout to be used with php inside the columns. I have put all the columns inside a container div as I want a solid background to it while the main page has an image.

the middle column will extend the container div as im using position:inherit but I cannot get the side columns to use position:inherit else it push's each column under the previous 1.

the 2 side columns will extend depend on the php and the middle column will have several other blocks inside it depending on what news is in the database.

sorry if this is confusing. I hope the code will make it clearer

as u can see from the code the left colum goes outside the container div. I need the container div to stretch with all the columns.

thx for any help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
	margin-left:auto;
  margin-right:auto;
  margin-bottom:10;
	width:1130px;
	height:200px;
	top: 19px;
	border:2px solid;
 border-radius:25px;
}
#content{
	margin-left:auto;
  margin-right:auto;
  margin-bottom:10;
	width:1130px;
	border:2px solid;
  border-radius:25px;
 	height:auto;
 	border-color:red;
}

#leftcol {
	margin-top: 10px;
	position:absolute;
	width:230px;
	height:900px;
	top: auto;
	border:2px solid;
	border-radius:25px;
	margin-left:0px;
}
#rightcol {
	margin-top: 10px;
	position:absolute;
	width:230px;
	height:600px;
	top: auto;
	border:2px solid;
	border-radius:25px;
	margin-left:900px;
}

#wotnews {
	position:inherit;
	width:650px;
	height:200px;
	z-index:1;
	top: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	border:2px solid;
	border-radius:25px;
}

#tcres {
	position:static;
	width:650px;
	height:200px;
	z-index:2;
	top: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	border:2px solid;
	border-radius:25px;
}

#news {
	position:static;
	width:650px;
	height:200px;
	z-index:3;
	top: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	border:2px solid;
	border-radius:25px;
}

#cellhead {
	position:static;
	width:inherit;
	height:40px;
	z-index:1;
	border:2px solid;
	border-radius:25px;
	margin-top:-22px;
	border-color:blue;
}
-->
</style>
</head>

<body>
<!--header-->
<div>

  <div id="header">header</div>
</div>
<!--content-->
<div id="content">
    <!--left colum-->
    <div id="leftcol">left
    <div id="cellhead"></div></div>
    
        <!--right colum-->
      <div id="rightcol">right
      <div id="cellhead"></div></div>
        <!--top box-->
        <div id="wotnews">wot news
        <div id="cellhead"></div></div>
        
        <!--2nd box-->
        <div id="tcres">tc results
        <div id="cellhead"></div></div>
        
        <!--3rd box-->
        <div id="news">clan news
        <div id="cellhead"></div></div>

</div>
</body>
</html>

Sign In

3 column layout

Recommended Posts

hyster

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information