CODEWITHSUNDEEP
htmlcss
Fred
Fred

Reputation: 5808

Formatting Page Layout using DIV's

I get that there are many questions and answers regarding laying out a page using DIV's and CSS but none are helping me get close to the layout I am looking for.

I am trying to stop my habit of laying out a page using tables (its rare I do page layout and old habits die hard).

The layout I am looking for (on a black page) is:

enter image description here

I want this to remain in the centre of the page if the screen displays anything more than 800px wide

The HTML I have so far is:

<body>
   <form id="form1" runat="server">
      <div id="header">Header</div>
      <div id="outerleftcolumn">Left Column</div>
      <div id="leftcolumn">Left Column</div>
      <div id="content">Content</div>
      <div id="outerrightcolumn">Left Column</div>
      <div id="footer">Footer</div>
   </form>
</body>

The CSS I have so far:

body {
margin: 0px;
padding: 0px;
background-color:black;
}

#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
 }

I keep reading an article or post and think I know what I have to do only to change one setting and the whole thing goes loopy laa laa. I could achieve this using tables in a heartbeat but as I say I am trying (and failing) to drop my bad habits. The images in the two outside div are just jpg's with gradients.

Any pointer would be appreciated.

Upvotes: 1

Views: 127

Answers (2)

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

body {
	margin: 0px;
	padding: 0px;
	background-color:#000;
}
#outerleftcolumn {
	float: left;
	width: 15px;
	height: 700px;
	background-color: red;
}
#outerrightcolumn
{
	background-image: url(/Templates/Red/Images/RightBoarder.jpg);
	float: right;
	width: 15px;
	height: 700px;
	background-color: red;
}
#centercolumn{
	overflow: hidden;
}
form{
	display: block;
	margin: auto;
	width: 800px;
	background-color: #000;
}
#header {
	background: #438a48;
	width: 770px;
	height:50px;
}

#leftcolumn {
	background: #2675a8;
	float: left;
	width: 150px;
	height: 620px;
}
#content {
	background: #fff;
	float: left;
	width: 620px;
	height: 620px;
}
#anotherheader{
	float: left;
	width: 100%;
	height: 50px;
	background-color: yellow;
}
#footer {
	background: #df781c;
	height: 30px;
	width: 800px;
	float: left;
 }
<body>
   <form id="form1" runat="server">
   		<div id="outerleftcolumn">Left Column</div>
   		<div id="outerrightcolumn">Left Column</div>
   		<div id="centercolumn">
   			<div id="header">Header</div>
   			<div id="leftcolumn">Left Column</div>
   			<div id="content">
   				<div id="anotherheader">

   				</div>
   			</div>
   			<div id="footer">Footer</div>
   		</div>
   </form>
</body>

Upvotes: 1

anexo
anexo

Reputation: 505

I tweak a little bit your code, getting rid of the outter columns:

HTML:

<body>
 <form id="form1" runat="server">
  <div id="header">Header</div>
  <div id="leftcolumn">Left Column</div>
  <div id="content">Content</div>
  <div id="footer">Footer</div>
 </form>
</body>

CSS:

   body {
   margin: 0px;
   padding: 0px;
   background-color:red;
   width: 800px;
   }
   #header {
   background: #438a48;
   width: 770px;
   height:50px;
   margin: 0px 15px;
   }
   #leftcolumn {
   background: #2675a8;
   float: left;
   width: 150px;
   height: 700px;
   margin-left: 15px;
   }
   #content {
   background: #ff6a00;
   float: left;
   width: 620px;
   height: 700px;
   margin-right: 15px;
   }
   #footer {
   background: lightblue;
   clear: both;
   width: 770px;
   margin: 0px 15px;
   }

Here is a fiddle: http://jsfiddle.net/v81wdmgp/

Upvotes: 0

Related Questions