jessmolchan Posted August 21, 2010 Share Posted August 21, 2010 Hi!I am trying to create a 3-column template for a website.At this point I am doing okay, other than this one issue.I can't seem to get my right column to stop overlapping my content column when the window is resized. I'll post the relevant code here and hopefully someone can help me. Thanks in advance!CSS CODE:body {margin:0px; padding:0px; font: 1.0em verdana, arial, sans-serif; text-align:left;}* {margin:0; padding:0;}#wrapper{width:960px;margin-left:auto;margin:right:auto;text-align:left;}#header {background-image: url(../image-files/header.png);height:268px; width:960px;text-align:center; margin-top:0; padding-top:0;background-repeat:no-repeat;}#nav {background-image: url(../image-files/nav.png);background-repeat:no-repeat;position:absolute; top:268px; width:223px;height:632px;float:left;} #content {background-image: url(../image-files/content.png);background-repeat:no-repeat;width:553px;height:632px;margin-left:223px;float:left;}#rightcolumn {background-image: url(../image-files/right-column.png);background-repeat:no-repeat; position:absolute;width:184px; height:632px;top:0px; right:0; margin:268px 0 0 0;float:left;}#footer{background-image: url(../image-files/footer.png);background-repeat:no-repeat;width:960px;height:376px;}and the HTML CODE:<!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" lang="en" xml:lang="en"><head><title>Disney Made Simple.com</title><meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Language" content="en-us" /><link href="support-files/dms.css" rel="stylesheet" type="text/css" /></head><body><div id="wrapper"><div id="header"></div><div id="nav"></div><div id="content"></div><div id="rightcolumn"></div><div id="footer"></div></div></body></html>Thank you so much!~Jess Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2010 Share Posted August 21, 2010 avoid using positioning, move content below right column, remove width and adjust content margins, and you are good to go. <!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" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Disney Made Simple.com</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">* {margin:0; padding:0;}body{font: 1.0em verdana, arial, sans-serif;text-align:left;}#wrapper{width:960px;margin-left:auto;margin-right:auto;text-align:left;}#header{background-image: url(../image-files/header.png);height:268px;width:960px;text-align:center;/*margin-top:0;padding-top:0;*/background-repeat:no-repeat;}#nav{background-image: url(../image-files/nav.png);background-repeat:no-repeat;/*position:absolute;top:268px;*/width:223px;height:632px;float:left;}#content{background-image: url(../image-files/content.png);background-repeat:no-repeat;/*width:553px;*/height:632px;margin:0 184px 0 223px;/*float:left;*/}#rightcolumn{background-image: url(../image-files/right-column.png);background-repeat:no-repeat;/*position:absolute;*/width:184px;height:632px;/*top:0px;right:0;margin:268px 0 0 0;float:left;*/float:right;}#footer{background-image: url(../image-files/footer.png);background-repeat:no-repeat;width:960px;height:376px;}</style></head><body><div id="wrapper"><div id="header"></div><div id="nav"></div><div id="rightcolumn"></div><div id="content"></div><div id="footer"></div></div></body></html> Link to comment Share on other sites More sharing options...
jessmolchan Posted August 21, 2010 Author Share Posted August 21, 2010 You are amazing! Thank you so much!! Everything is working great!!I really appreciate it~Jess Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.