CSS help

November 23, 2005

Okay, so Ive been doing a bit of searching, and so far no luck.

Im hoping that some of you will be able to help me figure my little problem out.

If you view this;

in IE and Firefox, you will see my problem.

The main <div> is not stretching to 100% height, thus causing the content to keep going and the rest of the page to stop.

I will post my CSS file as well as my index.tpl.

/* new design */



#pageborder {

	width: 775px;

    height: 100%;

	margin: 0px auto;

	padding: 0px;

	border: 1px solid #E52026;

	background-color: #FFFFFF;



}



#header {

	width: 775px;

	margin-top: 0px auto;

	padding: 0px;

	background-image: url(../styleImages/title/header.jpg);

	background-color: #FFFFFF;

    color: #000000;

    font-family: tahoma;

    font-size: 10pt;

    text-align: center;

    height: 100px;

}



#leftContent {

	height: 100%;

    color: #000000;

    font-family: tahoma;

    font-size: 10pt;

    text-align: left;

	position: relative;

	left: 0px;

	width: 70%;

	padding-left: 0px;

	padding-right: 5px;

	float: left;

}



#rightContent {

    color: #000000;

    font-family: tahoma;

    font-size: 10pt;

    text-align: right;

	position: relative;

	left: 0px;

	width: 200px;

	padding-left: 5px;

	padding-right: 0px;

	float: right;

}



#footer {

	width: 100%;

	margin: 0px auto;

	padding: 0px;

	background-color: #FFFFFF;

    color: #000000;

    font-family: tahoma;

    font-size: 12pt;

    text-align: center;

    height: 50px;

}



#topnav {

	width: 200px;

	border: 0px solid #000000;

	background-color: #ffffff;

    color: #000000;

    font-family: tahoma;

    font-size: 10pt;

    text-align: center;

}



#midnav {

    padding: 2px;

	width: 188px;

	background-color: #ffffff;

    color: #666458;

    font-family: tahoma;

    font-size: 10pt;

    text-align: left;

    float: right;

    position: relative;

}



#botnav {

	width: 100%;

	margin: 0px auto;

	padding: 0px;

	border: 1px solid #00ff00;

	background-color: #FFFFFF;

    color: #000000;

    font-family: tahoma;

    font-size: 12pt;

    text-align: center;

    height: 50px;

}





index.tpl;

<body>



<div align='center'>

    <div id='pageborder'>



        <div id='header'>{SESSION}</div>

    

        <div id='leftContent'>

            {PAGE_CONTENT}

        </div>

        <div id='rightContent'>

           {SHOPPING_CART}

        {CATEGORIES}

        {SALE_ITEMS}

        {RANDOM_PROD}

        {POPULAR_PRODUCTS}

        </div>

    </div>

</div>



</body>

Thanks!

markscarts · November 24, 2005

Hi Chris,

I mentioned in your show-off post awhile back how I really like your skin. Every time I see it I like it more. Great design, man

Sorry to see you're still having cross-browser display problems! This time, IE seems to be displaying fine, it's Mozilla that's having trouble; at least it looks that way on my machine.

I don't understand why you're having this problem. I can understand why rightContent would want to be longer than leftContent, but since both are encompassed by pageBorder, and it has a white background, it seems that the display should not do as it does.

Here's one thing - you do not show the footer id in the index.tpl code given above. Where is your footer coded in?

Try using the <br clear="all" /> before the footer division, and see if that makes a difference

--------

EDIT: BTW, in my experience, a 100% height property never clears up these types of display problems. Look for the answer elsewhere. Good luck!

Sign In

CSS help

Recommended Posts

Guest

Link to comment

Share on other sites

markscarts

Link to comment

Share on other sites

Join the conversation

Browse

Activity