Hi everyone,
I am new to css and html. I am basically learning to do a good page
layoutby using css. Here I am showing my css and html formats. Though
I am writing
a lengthy one and sorry for that.
Please do anyone help me that am I writing all the rules correctly or not?
It shall help me a lot if I can get a feedback over it and thanks in advance
to you for helping me.
This is my CSS Coding:
/* Main Body Description */
body
{
background-color: #203D3F;
margin: 0px;
padding-bottom: 5px;
padding-left: 10%; /* padding 10% bothsides shall make the main page
centrally */
padding-right: 10%;
padding-top: 5px;
}
/* Here goes The Main Page */
#mainpage_container
{
background-color: #FAF0E6;
width:100%;
margin: auto; /* "auto" margin means the height and width shall
increase according to the browser relation */
display: block; /*"block" means the div tags inside this
mainpage_container shall come down to each other*/
}
/* This is the Header Part */
#header
{
width:100%;
background-color: #4169E1;
font-family: sans-serif;
font-size: 24px;
height: 300px;
text-align: center;
}
/*This is the Menu Bar*/
#nav-bar
{
background-color: #7FFF00;
width:100%;
height:60px;
}
/* This is the mid-content part of the Main Page Container */
#mid-content
{
background-color: #FFA500;
width: 100%;
height:600px;
font-family: "Kristen ITC";
font-size: 24px;
}
/* Side Left Content inside the mid-content */
#side_content
{
background-color: #B22222;
width: 30%;
height: 450px;
float:left;
margin-top: 0px;
}
/* Side Right Content inside the mid-content */
#side_content_rt
{
background-color: #22CAFF;
width:70%;
height:450px;
float:right;
position:relative;
margin-top: 0px;
}
/* Below Div Content inside the mid-content */
#new_content
{
background-color: Fuchsia;
clear:both; /* clear:both; for the clearance of the floats above it
hence this div directly fixes in the bottom of the float divs */
width:100%;
height:300px;
}
/* Below Div Content inside the mid-content */
#new_content2
{
background-color: #CD853F;
width: 100%;
height: 150px;
}
/* Below Div Content inside the mid-content */
#new_content3
{
background-color: #F0FFF0;
width: 100%;
height: 150px;
}
/* Footer inside the mid-content */
#footer
{
background-color: #B22222;
width: 100%;
height:60px;
}
Here is the HTML coding:
<!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=iso-8859-1" />
<title>CSS Layout </title>
<link href="index2.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="mainpage_container"><!-- Main Page Starts here-->
<div id="header"> This Is Header
</div><!-- End of Header-->
<div id="nav-bar"> Nav-Bar
</div><!-- End of Navbar-->
<div id="mid-content"><!-- Here starts the MId Content-->
<div id="side_content">This is Side Content
</div><!-- End of Left Column in the Mid
Content div-->
<div id="side_content_rt">This Is
Right
</div><!-- End of Right Column
in the Mid Content Div-->
<div id="new_content">New
</div> <!-- End of New Content
div just below the Columns in the Mid Content Div-->
<div id="new_content2">New2
</div><!-- End of New Content2 div just
below the New Content Div in the Mid Content Div-->
<div id="new_content3">New Content3
</div><!-- End of New Content3 div just below the
New Content2 Div in the Mid Content Div-->
<div id="footer">Footer
</div><!-- End of Footer inside the Mid Content Div-->
</div><!-- End of Mid Content Div-->
</div><!-- End of mainpage_container div-->
</body>
</html>
*Now my queries:-*
1. What I want to do is that my page must increase automatically and
the consequent
divs be fixed automatically after a previous div if further divs are
inserted in inside the mid-content div , so for that I have styled margin:
auto; & display:block; in the #mainpage_container div.
Is it a correct procedure? If not correct then please guide me how to style
it?
Thanks again.
--
*amitabhaghosh*
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
