Hello:
I am having problems with what I think is a fluid page that I thought worked, but it doesn’t. I basically have 3 problems, 1 major, 2 minor that are keeping me up at night.
The first problem ( major ) is that my “rite content” loses it’s bottom padding when the screen res goes beyond 1400px. I don’t know all that much about css, but I wonder why it would work on smaller res but changes on higher. I basically want a bottom padding of 10px above my footer. If the left content is larger, well the right padding would not matter, but when the left is shorter than the right, then the right padding should kick in.
Second problem is cosmetic in that the space between the “home” section and “footer” section have 10px, but the space between the first portion of the left content and the second is greater. I would like to get it to be the space, 10px for example. There could be more sections, so it needs to look uniform regardless of how many sections I have.
Third problem, and again, it is minor and perhaps not worth mentioning, but looking at the code below, I would like to have the “rite page” within the “page body”. Why??? I just think that it belongs to the main content section and should follow the “left page”.
http://www.pepelepew1962.x10.mx/
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Test Page</title>
<link rel=“icon” href=“favicon.ico” type=“image/x-icon”>
<meta name=“author” content=“Blank”>
<style type=“text/css”>
body
{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
background: #4A4A4A;
background-image: url(homeback.jpg);
}
img
{
border: none;
}
a
{
outline: none;
color: #0091E8;
text-decoration: none;
}
a:visited
{
color: #0091E8;
}
a:hover
{
color: #666;
text-decoration: underline;
}
#head_Main
{
background: url(homehead.png) repeat-x;
height: 112px;
}
#head_Wrap
{
width: 90%;
margin: 0px auto;
height: 112px;
}
#head_Logo
{
float: left;
height: 112px;
width: 90px;
padding-top: 6px;
}
#head_News
{
margin-top: 0px;
padding: 0px;
color: #0FF;
font-size: 20px;
height: 44px;
width: 0 auto;
margin-left: 90px;
line-height: 44px;
padding-left: 5px;
}
#head_Menu
{
text-align: center;
font-weight: bold;
height: 44px;
width: 0 auto;
margin-left: 90px;
}
#head_Menu ul
{
margin: 0;
padding: 0;
}
#head_Menu li
{
margin: 13px 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
display: inline; / ie7 */
}
#head_Menu a
{
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
border-radius: 5px;
background: #151515;
border: 1px solid #262626;
}
#head_Menu a:hover
{
color: #000;
border: 1px solid #383838;
border-radius: 5px;
background-color: #666666;
}
#head_Menu #current a
{
color: #fff;
background: #999;
border: 1px solid #383838;
border-radius: 5px;
background-color: #444444;
}
#head_Info
{
height: 22px;
width: 0 auto;
margin-left: 90px;
color: #F00;
font-size: 12px;
padding-top: 6px;
}
#head_Lead
{
clear: both;
height: 90px;
text-align: center;
}
#page_Body
{
width: 100%;
float: left;
/* [disabled]margin-top: 25px; /
/ [disabled]padding-bottom: 25px; /
/ [disabled]padding-left: 10px; /
/ [disabled]height: 100%; /
/ [disabled]border: 2px solid #383838; /
border-radius: 5px;
/ [disabled]background-color: #2C2C2C; */
}
#page_Left
{
margin-right: 210px; /Set right margin to RightColumnWidth/
/* [disabled]background-color: #90EE90; */
}
#page_Rite
{
margin-top: 10px;
width: 200px; /Width of right column in pixels/
margin-left: -210px; /*Set left margin to -(RightColumnWidth) */
background-color: #2c2c2c;
float: left;
color: #F00;
border-radius: 5px;
border: 2px solid #383838;
}
#page_Name
{
/* [disabled]margin-top: 0px; /
/ [disabled]margin-left: 10px; /
border: 2px solid #383838;
border-radius: 5px;
background-color: #333333;
width: 100%;
/ [disabled]height: 200px; /
/ [disabled]margin-right: 200px; /
/ [disabled]margin-bottom: 25px; /
margin-left: 0px;
padding: 4px 0;
clear: left;
/ [disabled]padding-right: -25px; */
}
#left_Body
{
margin: 0px; /Margins for inner DIV inside each column (to provide padding)/
margin-top: 0;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#rite_Body
{
margin: 0px; /Margins for inner DIV inside each column (to provide padding)/
margin-top: 0;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
.name_Text
{
/* [disabled]padding-right: 10px; */
color: #FF0;
font-weight: bold;
text-align: left;
padding-left: 25px;
}
.left_Text
{
margin-top: 25px;
/* [disabled]margin-left: 10px; /
border: 2px solid #383838;
border-radius: 5px;
background-color: #2c2c2c;
/ [disabled]width: 97%; /
/ [disabled]height: 200px; /
/ [disabled]margin-right: 200px; /
margin: 0px auto;
padding: 10px;
color: #CF6;
/ [disabled]margin-bottom: 25px; */
text-align: left;
}
.rite_Text
{
}
/* 300 x 250 IMU - (Medium Rectangle) /
/ 180 x 150 IMU - (Rectangle) /
/ 160 x 600 IMU - (Wide Skyscraper) /
/ 728 x 090 IMU - (Leaderboard) */
#head_Foot
{
/* [disabled]margin-top: 0px; /
/ [disabled]margin-left: 10px; /
border: 2px solid #383838;
border-radius: 5px;
background-color: #333333;
width: 100%;
/ [disabled]height: 200px; /
/ [disabled]margin-right: 200px; /
/ [disabled]margin-bottom: 25px; */
margin-left: 0px;
color: #0F0;
font-weight: bold;
text-align: center;
padding: 4px 0;
clear: left;
}
#head_Foot a
{
color: #FFFF80;
}
</style>
<script type=“text/javascript”>
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=[“THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.”, “the quick brown fox jumps over the lazy dog.”, “PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS.”, “pack my box with five dozen liquor jugs.”]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*4)]+" ")
}
</script>
</head>
<body>
<div id=“head_Main”>
<div id=“head_Wrap”>
<div id="head_Logo">
<a href="http://www.webintersect.com">
<img src="logo.png" alt="logo" title="Web Intersect Home">
</a>
</div><!--End of head_Logo -->
<div id="head_News">THIS IS A MSG AREA!!!</div>
<nav id="head_Menu">
<ul>
<li id="current"><a href="http://www.yahoo.com">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">LOG IN</a></li>
</ul>
</nav><!--End of head_Menu -->
<div id="head_Info"> <img src="pmFlash.gif" width="17" height="12" alt="fuk"> EMAILS ( 44 )</div>
<div id="head_Lead"><img src="728x090_uap.gif" width="728" height="90"</div>
<div id="page_Name"><div class="name_Text">HOME</div>
</div><!--End of page_Name -->
<div id="page_Body">
<div id="page_Left">
<div id="left_Body"><div class="left_Text"><script type="text/javascript">filltext(45)</script></div>
</div><!--End of left_Body -->
<div id="left_Body"><div class="left_Text"><script type="text/javascript">filltext(45)</script></div>
</div><!--End of left_Body -->
</div><!--End of page_Left -->
</div><!--End of page_Body -->
<div id="page_Rite">
<div id="rite_Body"><script type="text/javascript">filltext(14)</script>
</div><!--End of rite_Body -->
</div><!--End of page_Rite -->
<div id="head_Foot">FOOTER</a>
</div>
</div><!–End of head_Wrap Div –>
</div><!–End of head_Main Div –>
</body>
</html>
Any help regarding this would greatly be appreciated.