November 2, 200817 yr I'm working on a site and currently have the coding as: <style type="text/css"> <!-- #wrapper { position:absolute; left:20px; [b]top:10px;[/b] width:900px; height:680px; } #header { position:absolute; width: 900px; top: 10px; width: 200px; } #sidebar { bgColor=#fcfcfc position:absolute; width: 300px; left: 22px; [b]top: 200px;[/b] } #content { position:absolute; width: 590px; left: 310px; top: 200px; } --> </style> </HEAD> <div id="wrapper"> <div id="header"> test</div> <div id="content">test</div> <div id="sidebar">test</div> </div> the bold items are the problem. the sidebar just stayed in the top left courner of the wrapper div and neither will move down the page. They seem to be one element - content, header & wrapper have solid borders while sidebar has a dashed border. I can't see anything to change in the above code, please help
November 2, 200817 yr How come you are using absolute positioning? Remove those entries from your CSS.
November 2, 200817 yr Author when I remove absolute positioning the divs just line up under each other with the sidebar the width of the wrapper. Absolute positioning for the content * header places them where it should be. What is a 'css-p element'? in properties (i'm using dreamweaver) both content & header are these while wrapper & sidebar come up as 'div id' site not online yet
November 2, 200817 yr What you need to do is remove the absolute positioning on the DIV's and then set the width of the wrapper to say 800px, then set the header to 100%, then the content to say 600px and the sidebar to say 200px. Float the content container left and the sidebar container either left or right. Now, after the sidebar container add a new DIV like so: <div class="clear"></div> In your CSS create a class like follows: .clear { clear: both; } This will sort out your floats. Let me know how you get on and I'll go in to more details if needs be.
November 2, 200817 yr Author What you need to do is remove the absolute positioning on the DIV's and then set the width of the wrapper to say 800px, then set the header to 100%, then the content to say 600px and the sidebar to say 200px. Float the content container left and the sidebar container either left or right. Now, after the sidebar container add a new DIV like so: <div class="clear"></div> In your CSS create a class like follows: .clear { clear: both; } This will sort out your floats. Let me know how you get on and I'll go in to more details if needs be. thank you so much. One other thing - <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div class="style1" id="apDiv1">Hello and welcome to <span class="style2">Megyn Price Online</span>, the most extensive fansite dedicated to the talented actress Megyn Price. She can currently be seen in <em>Rules of Engagement</em> as Audrey.<BR> </div> <div id="apDiv2"> <CENTER> <p><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><br> <img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"> </p> </CENTER> </div> style: #apDiv1 { position:absolute; left:203px; top:83px; width:194px; height:94px; z-index:1; } .style1 {color: #747474} .style2 {color: #AA0000} #apDiv2 { position:absolute; left:203px; top:214px; width:194px; height:69px; z-index:2; } that code currently isn't add to the external style sheet yet. body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color:#acaaaa; background-repeat: repeat-x; background-image: url(images/bg.jpg); font-family:Trebuchet MS; font-size:11px; font-style:normal; font-weight:normal; letter-spacing:normal; color: silver; } TD, TR { font-family:Trebuchet MS; font-size:11px; font-style:normal; font-weight:normal; letter-spacing:normal; color: silver; } /* MENU ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++*/ .menu { background-color: #222222; padding: 6px; font-family:Trebuchet MS; font-size:11px; text-transform:uppercase; line-height:13px; color: silver; } td.menu { background-color: #222222; padding: 8px; color:silver; cursor:default; font-family:Trebuchet MS; font-size:11px; text-transform:uppercase; line-height:13px; margin-bottom:0px; margin-top:0px; text-align:center; text-decoration:none; text-transform:none; vertical-align: top; } td.menu:hover { background-color: #b73333; padding: 8px; color: black; cursor:default; font-family:Trebuchet MS; font-size:11px; text-transform:uppercase; line-height:13px; margin-bottom:0px; margin-top:0px; text-align:center; text-decoration:none; text-transform:none; vertical-align: top; } .menu a:link{ color:white; text-transform:uppercase; text-decoration:none; font-weight:none;} .menu a:visited{ color:white; text-transform:uppercase; text-decoration:none; font-weight:none;} .menu a:active{ color:white; text-transform:uppercase; text-decoration:none; font-weight:none;} .menu a:hover{ color:white; text-transform:uppercase; text-decoration:underline; font-weight:none;} /* VARIEDADES ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++*/ A:link{ color:#a03008; text-decoration:none; font-weight:none;} A:visited{ color:#a03008; text-decoration:none; font-weight:none;} A:active{ color:#a03008; text-decoration:none; font-weight:none;} A:hover{ color:#76716d; text-decoration:underline; font-weight:none;} input, textarea, select, button { font-size:11px; color:#ffffff; background: #000000; border: 1px solid #76716d;} input:focus, textarea:focus, label:focus, select:focus, button:focus { color:#000000; background: #76716d; border: 1px solid #000000;} /* SIDEBAR ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++*/ .sidebar { background-color: #050302; padding: 4px; } .side-title { background-color: #b73333; padding: 4px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #e1e1e1; text-transform: uppercase; text-align: center;} .side-content { padding: 2px; padding-top: 8px; padding-bottom: 14px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #9d9d9c; text-align: justify;} /* CONTENT ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++*/ .table-content { background-color: #838181; padding: 4px; text-align:justify; color: #050302; } .title { background-color: #050302; padding: 4px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #e1e1e1; text-transform: uppercase; text-align: center;} /* FOOTER ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++*/ .footer { background: #000000; font-weight: bold; background-image: url(); font-family: arial; font-size:11px; letter-spacing:0px; line-height:10px; color: #777777; text-align:center; padding:10px; border-bottom : 0px solid #151515; border-top : 0px solid #D1E0E2; } .footer strong, b, { color: #777777; } .footer a { font-weight: bold; color: #FFFFFF; text-decoration: none;} .footer a:link, .news-box2 a:visited { font-weight: bold; color: #FFFFFF; text-decoration: none;} .footer a:hover { font-weight: bold; color: #777777; text-decoration: underline;} /* WORDPRESS CSS ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +*/ .news-box-post { padding: 5px; line-height:15px; color:#000000; } .news-box2 { background: #222222; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px;} .news-box2 a { font-weight: bold; color: #76716d; text-decoration: none;} .news-box2 a:link, .news-box2 a:visited { font-weight: bold; color: #76716d; text-decoration: none;} .news-box2 a:hover { font-weight: bold; color: #a03008; text-decoration: underline;} .news-title, .news-title ul, .news-title ul ul { background-color: #000000; font-family: Trebuchet MS; font-size: 11px; line-height: 15px; letter-spacing: 0px; text-transform: uppercase; color: #ffffff; text-align: center; padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px;} .news-title li {} .news-title a { color: #fff; text-decoration: none;} .news-title a:link, .news-title a:visited { color: #dee3e9; text-decoration: none;} .news-title a:hover { color: #dee3e9; text-decoration: underline;} h2 { background-color: #050302; padding: 4px; font-family:Trebuchet MS; font-size:11px; letter-spacing:0px; line-height:9pt; color: #e1e1e1; text-transform: uppercase; text-align: center; } h3{ font-size: 13px; font-weight: bold; border-bottom: 1px solid; text-transform: uppercase; } I'm wondering why this is the case. Is it another position:absolute; problem? removing them just places them at the top of the page. This is what it's like with position:absolute;
November 2, 200817 yr No problem. I'm sorry can you explain a little more what is going wrong with your other code? Thanks
November 2, 200817 yr Author if you go to the site you will see the divs to the left and not positioned over the gray boxes like they should be
November 2, 200817 yr I see. As before remove any absolute positioning and then either place the DIV's or the content within those DIV's within the Grey DIV's. Place the following code within the Welcome Message DIV: <div class="style1" id="apDiv1">Hello and welcome to <span class="style2">Megyn Price Online</span>, the most extensive fansite dedicated to the talented actress Megyn Price. She can currently be seen in <em>Rules of Engagement</em> as Audrey.<BR> </div> Place the following code within the Affiliates DIV: <div id="apDiv2"> <CENTER> <p><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><br> <img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"><img src="images/DesiringJensenOrg.gif" alt="" width="35" height="25"> </p> </CENTER> </div> I see that you are using both DIV's and Tables for layout. This is I'm afraid very bad practice. You should only use tables to display tabular data. Where I have indicated to insert the code you could just copy the content of those DIV's and not the DIV and paste it in the Welcome Message DIV and the Affiliate DIV. Unfortunately, your code badly needs cleaning up. Are you also using WordPress as a backend content management system and then using PHP to display the posts?
November 2, 200817 yr Author I don't have Welcome Message DIV and the Affiliate DIV the gray boxes are part of the header image. I am using wordpress for all my posts & pages except gallery, forum etc. The links at the top are not correct yet.
November 2, 200817 yr OK, you need to get everything set up in to DIV's. If the Grey boxes and the pictures of the lady are all one image, go in to your image editing software and cut them up in to sections. Then create your layout using the tips I've given you (XHTML and CSS only) and then use the cut up images as backgrounds to the DIV's. When I get a minute I'll knock up an example for you.
November 2, 200817 yr Author i'll have a go at getting it into divs EDIT: slowly getting there. 1. The whole thing isn't centered yet and I've placed menu as a table inside a div. 2. Header has been sliced but haven't worked out how to get it out of a table 3. Content is below sidebar not besides it, think it's just wrong coding. header.php <!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=utf-8" /> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </head> <body> <div id="wrapper"> <table width="728" cellpadding="0" cellspacing="0"> <tr><td colspan="15" height="2"></td></tr> <tr> <td class="menu"><a href="index.php">updates</a></td> <td width="2"></td> <td class="menu"><a href="/info/">Information</a></td> <td width="2"></td> <td class="menu"><a href="/career/">career</a></td> <td width="2"></td> <td class="menu"><a href="/site/">website</a></td> <td width="2"></td> <td class="menu"><a href="/photos/">Photo Gallery</a></td> <td width="2"></td> <td class="menu"><a href="/videos/">Videos</a></td> <td width="2"></td> <td class="menu"><a href="/forum/">forum</a></td> </table> <div id="wrapperheader"> <table border="0" cellspacing="0" cellpadding="0" width="751" height="257"> <tr align="left" valign="top"> <td rowspan="1" colspan="1" height="1" width="1"></td> <td rowspan="1" colspan="1" height="1" width="199"></td> <td rowspan="1" colspan="1" height="1" width="210"></td> <td rowspan="1" colspan="1" height="1" width="169"></td> <td rowspan="1" colspan="1" height="1" width="172"></td> </tr> <tr align="left" valign="top"> <td rowspan="1" colspan="1" width="1" height="140"></td> <td rowspan="3" colspan="1" width="199" height="256"><img border="0" width="199" height="256" src="TEST/images/YOURHEADERR1C1.jpg" alt=""></td> <td rowspan="1" colspan="1" width="210" height="140"><img border="0" width="210" height="140" src="TEST/images/YOURHEADERR1C2.jpg" alt=""></td> <td rowspan="2" colspan="1" width="169" height="218"><img border="0" width="169" height="218" src="TEST/images/YOURHEADERR1C3.jpg" alt=""></td> <td rowspan="2" colspan="1" width="172" height="218"><img border="0" width="172" height="218" src="TEST/images/YOURHEADERR1C4.jpg" alt=""></td> </tr> <tr align="left" valign="top"> <td rowspan="1" colspan="1" width="1" height="78"></td> <td rowspan="2" colspan="1" width="210" height="116"><img border="0" width="210" height="116" src="TEST/images/YOURHEADERR2C2.jpg" alt=""></td> </tr> <tr align="left" valign="top"> <td rowspan="1" colspan="1" width="1" height="38"></td> <td rowspan="1" colspan="2" width="341" height="38"><img border="0" width="341" height="38" src="TEST/images/YOURHEADERR3C3.jpg" alt=""></td> </tr> </table> </div> <!-- sidebar --> <div class="sidebar"> <div class="side-title">latest gallery additions</div> <div class="side-content"> <p>More at our <A href="/gallery">gallery</A></p> <p> </p> </div> <div class="side-title">Projects</div> <div class="side-content">Latest Projects</div> <div class="side-title">media alerts</div> <div class="side-content">Latest Images Added</div></div> <!-- content --> <div id="content"><div class="table-content"></div></div> <!-- END HEADER.PHP --> </div> </body> </html> style BODY { FONT-WEIGHT: normal; FONT-SIZE: 11px; BACKGROUND-IMAGE: none; MARGIN: 0px; COLOR: #000000; BACKGROUND-REPEAT: repeat-x; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: normal; BACKGROUND-COLOR: #f7f7f7 } TD { FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: normal } TR { FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #000000; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: normal } .menu { PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 11px; PADDING-BOTTOM: 6px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 13px; PADDING-TOP: 6px; FONT-FAMILY: Trebuchet MS; BACKGROUND-COLOR: #f7f7f7 } TD.menu { PADDING-RIGHT: 8px; MARGIN-TOP: 0px; PADDING-LEFT: 8px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; VERTICAL-ALIGN: top; TEXT-TRANSFORM: none; CURSOR: default; COLOR: silver; LINE-HEIGHT: 13px; PADDING-TOP: 8px; FONT-FAMILY: Trebuchet MS; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center; TEXT-DECORATION: none } TD.menu:hover { PADDING-RIGHT: 8px; MARGIN-TOP: 0px; PADDING-LEFT: 8px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; VERTICAL-ALIGN: top; TEXT-TRANSFORM: none; CURSOR: default; COLOR: #8c1626; LINE-HEIGHT: 13px; PADDING-TOP: 8px; FONT-FAMILY: Trebuchet MS; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center } .menu A:link { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } .menu A:visited { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } .menu A:active { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } .menu A:hover { FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: #8c1626; TEXT-DECORATION: none } A:link { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } A:visited { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } A:active { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } A:hover { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } INPUT { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } TEXTAREA { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } SELECT { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } BUTTON { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; FONT-SIZE: 11px; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } INPUT:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } TEXTAREA:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } LABEL:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } SELECT:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } BUTTON:focus { BORDER-RIGHT: #f7f7f7 1px solid; BORDER-TOP: #f7f7f7 1px solid; BACKGROUND: #cc7883; BORDER-LEFT: #f7f7f7 1px solid; COLOR: #000000; BORDER-BOTTOM: #f7f7f7 1px solid } .sidebar { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BACKGROUND-COLOR: #f7f7f7; width:300px; top:187px } .side-title { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 4px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .side-content { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 11px; PADDING-BOTTOM: 14px; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 8px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; TEXT-ALIGN: justify } .table-content { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; COLOR: #000000; PADDING-TOP: 4px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: justify } #content { left:309px; top:288px; width:442px; } .title { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 4px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center } .footer { PADDING-RIGHT: 10px; BORDER-TOP: #f7f7f7 0px solid; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #f7f7f7; PADDING-BOTTOM: 10px; COLOR: #000000; LINE-HEIGHT: 10px; PADDING-TOP: 10px; BORDER-BOTTOM: #f7f7f7 0px solid; FONT-FAMILY: arial; LETTER-SPACING: 0px; TEXT-ALIGN: center } .footer STRONG { COLOR: #8c1626 } B { COLOR: #8c1626 } .footer A { COLOR: #8c1626; TEXT-DECORATION: none } .footer A:link { COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:visited { COLOR: #8c1626; TEXT-DECORATION: none } .footer A:hover { COLOR: #8c1626; TEXT-DECORATION: none } .news-box-post { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px } .news-box2 { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #d09ea5; PADDING-BOTTOM: 5px; PADDING-TOP: 5px } .news-box2 A { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:link { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:visited { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-box2 A:hover { FONT-WEIGHT: bold; COLOR: #8c1626; TEXT-DECORATION: none } .news-title { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .news-title UL { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .news-title UL UL { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 15px; PADDING-TOP: 5px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #cc7883; TEXT-ALIGN: center } .news-title LI { } .news-title A { COLOR: #000000; TEXT-DECORATION: none } .news-title A:link { COLOR: #000000; TEXT-DECORATION: none } .news-title A:visited { COLOR: #000000; TEXT-DECORATION: none } .news-title A:hover { COLOR: #000000; TEXT-DECORATION: none } H2 { PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 11px; PADDING-BOTTOM: 4px; TEXT-TRANSFORM: uppercase; COLOR: #000000; LINE-HEIGHT: 9pt; PADDING-TOP: 4px; FONT-FAMILY: Trebuchet MS; LETTER-SPACING: 0px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center } H3 { FONT-WEIGHT: bold; FONT-SIZE: 13px; TEXT-TRANSFORM: uppercase; BORDER-BOTTOM: 1px solid } #wrapperheader { width:750px; height:256px; top:100px; } #YOURHEADER1 { width:194px; height:256px; top:100px; background-color:#FFFBF0 } #YOURHEADER2 { width:171px; height:224px; top:100px; left:418px; background-color:#FFFBF0 } #YOURHEADER3 { } #title { } #welcome { width:215px; height:137px; top:100px; left:200px; background-color:#FFFBF0 } #affiliates { width:218px; height:117px; top:100px; left:200px; background-color:#FFFBF0 } the style sheet is based on a table layout & I haven't removed the styles not for divs maybe thats working against me.
November 5, 200817 yr What you need to do is remove the absolute positioning on the DIV's and then set the width of the wrapper to say 800px, then set the header to 100%, then the content to say 600px and the sidebar to say 200px. Float the content container left and the sidebar container either left or right. Now, after the sidebar container add a new DIV like so: <div class="clear"></div> In your CSS create a class like follows: .clear { clear: both; } This will sort out your floats. Let me know how you get on and I'll go in to more details if needs be. so i tried to go that with a site and it all goes wrong - here
Create an account or sign in to comment