I have a section of links at the bottom of my page i.e AboutUs,ContactUs etc relatively placed after the content which palced in middle of the page.
So i actually made the position relative and padding to that section as 80px from content. But for my pages which contain small info for content i can see the links placed.
So is there any way in CSS that i can position some default padding and as my content grows the links are placed accordingly.Maybe you could use the min-height property to make the content block always be at least some height that would "push" the links block down where you want it?
PS: Unfortunately, a quick test would seem to indicate that IE6 does not support min-height (though of course Firefox does).
Actually I developed my site using CSS.so i divided my page into three parts vertically i.e Logo, Content and InfoLinks.
Content contains all the forms so i only specified the width.
Coming to InfoLinks they are placed by having a fixed padding from content. But for smaller forms in content the InfoLinks appear so up which doesnt look nice.
My URL is <!-- w --><a class="postlink" href="http://www.kenpeople.comYou'll">www.kenpeople.comYou'll</a><!-- w --> need to use floats. A very simple layout is below that you can use for a reference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
#footer {
background-color: #ccf;
clear: both;
}
#header { background-color: #ffc; }
#mainContent {
background-color: #fcc;
float: left;
position: relative;
width: 450px;
}
#navigation {
background-color: #cfc;
float: right;
position: relative;
width: 150px;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 600px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
/* Prevent IE-Win from breaking layout when contents are too wide \\*/
* html #mainContent,
* html #navigation { overflow: hidden; }
/* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header / Logo</div>
<div id="mainContent">Main Content</div>
<div id="navigation">Left Navigation</div>
<div id="footer">Footer</div>
</div><!-- end wrapper -->
</body>
</html>
... and you have an opening FORM tag and in INPUT tag before your DOCTYPE tag
This will cause Internet Explorer to run in Quirks mode where it misinterprets the CSS box model, among other things.
So i actually made the position relative and padding to that section as 80px from content. But for my pages which contain small info for content i can see the links placed.
So is there any way in CSS that i can position some default padding and as my content grows the links are placed accordingly.Maybe you could use the min-height property to make the content block always be at least some height that would "push" the links block down where you want it?
PS: Unfortunately, a quick test would seem to indicate that IE6 does not support min-height (though of course Firefox does).
Actually I developed my site using CSS.so i divided my page into three parts vertically i.e Logo, Content and InfoLinks.Content contains all the forms so i only specified the width.
Coming to InfoLinks they are placed by having a fixed padding from content. But for smaller forms in content the InfoLinks appear so up which doesnt look nice.
My URL is <!-- w --><a class="postlink" href="http://www.kenpeople.comYou'll">www.kenpeople.comYou'll</a><!-- w --> need to use floats. A very simple layout is below that you can use for a reference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
#footer {
background-color: #ccf;
clear: both;
}
#header { background-color: #ffc; }
#mainContent {
background-color: #fcc;
float: left;
position: relative;
width: 450px;
}
#navigation {
background-color: #cfc;
float: right;
position: relative;
width: 150px;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 600px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
/* Prevent IE-Win from breaking layout when contents are too wide \\*/
* html #mainContent,
* html #navigation { overflow: hidden; }
/* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Header / Logo</div>
<div id="mainContent">Main Content</div>
<div id="navigation">Left Navigation</div>
<div id="footer">Footer</div>
</div><!-- end wrapper -->
</body>
</html>
... and you have an opening FORM tag and in INPUT tag before your DOCTYPE tag
This will cause Internet Explorer to run in Quirks mode where it misinterprets the CSS box model, among other things.