July 30, 200917 yr Gah, I'm having an issue with this layout I'm coding. For the most part,the layout is doing fine. The content portion and sidebar portion, however, are not. I'm not trying to make this fancy or anything just a blog layout. I always create a test file to make the layout work right and see what needs to be tweaked. The sidebar keeps angling towards the bottom which is annoying me. I put the values in right, I think. I just don't get why it continues to stay at the bottom. Here is the CSS & Test file coding. Oh and the site so you can see what I meant. Shockhorror CSS: body { background: url(http://shockhorror.org/wp-content/themes/stripes%20theme/images/bg.png); background-color: #ffffff; background-repeat: repeat; margin: 0; padding: 0; } /* LAYOUT */ #header { background-image: url(http://shockhorror.org/wp-content/themes/stripes%20theme/images/header.png); width: 773px; height: 120px; background-repeat: no-repeat; margin: 0 auto; } #container { background-image: url(http://shockhorror.org/wp-content/themes/stripes%20theme/images/container.png); width: 773px; height: 657px; background-repeat: repeat; padding: 0; margin: 0 auto; } #footer { background-image: url(http://shockhorror.org/wp-content/themes/stripes%20theme/images/footer.png); width: 773px; height: 123px; background-repeat: repeat; padding: 0px; margin: 0 auto; } #content { width: 488px; height: 652px; margin-right: 8px; padding: 3px; left: 332px; top: auto; float: right; margin-bottom: 0px; } #sidebar { width: 45%; height: auto; margin: 7px; padding: 3px; left: 103px; top: 127px; float: left; } Test File: <!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" /> <link href="http://shockhorror.org/wp-content/themes/stripes theme/style.css" rel="stylesheet" type="text/css" /> <title>Shock Horror</title> </head> <body> <div id="header"> </div> <div id="container"> <div id="content"> <h1>AHIGE</h1> <p>SEX</p> </div> <div id="sidebar"> <h2>HOAIEGEHOI</h2> <p>Kiss me through the phone. Thru the phone, i'll call you later on. Kiss me thru the phone. </p> </div> <div class="clear"></div> </div> <div id="footer"> </div> </body> </html> Thank you anyone and everyone that replies for the help, in advance.
July 30, 200917 yr You don't need top or left positions unless you are using position: absolute or unless you need to move the divs from a normal position. You also have mixed widths 45% and 488px; your #container is 773px and your #content is 488 + 8 + 2*3 = 502px. Your #sidebar has side margins 2*7 and side padding 2*3 = 20px total which added to 502px is 522px leaving 251px for #sidebar's basic width. Try these edits:- #content { width: 488px; height: 652px; margin-right: 8px; padding: 3px; /*left: 332px;*/ /*top: auto;*/ float: right; margin-bottom: 0px; } #sidebar { width: 251px;/*45%; */ height: auto; margin: 7px; padding: 3px; /*left: 103px;*/ /*top: 127px;*/ float: left; }
July 30, 200917 yr Author Yes that worked. Thank you so much. Guess there is still a lot I need to learn.
Create an account or sign in to comment