my problem is i have two sections inside a content div one section is floated left and the other right. i have both sections displaying their correct back grounds but i want to put headers and footer images on both sections. so what would the best way to do this be? ive already tried making divs above the sections and just putting the header/footer background image in which works but i cant seem top get the right footer to go in place, it goes at the bottom of the left content for some reason. if any one knows a better way of doing this please help me. thanks.
Use containing divs that are floated on each side then put your lil header div or bg top with spans or h's or w/e, then content and footer under in the same floated div. Otherwise your elements ordering will be screwed and is not very friendly.
Yeah, without code and/or (preferably AND) a picture of what you are trying to accomplish, we'll not be much help here... and not just CSS, we'd need HTML too.
thanks for taking the time to help guys but ive coded another layout insted now which i like better, however i would like to know how to do it for future use. thanks.
If you would like to know how to do it for future use, like other said, you need to post the code otherwise its only a guessing game.
ok heres the code. <title>Untitled Document</title> </head> <body> <div id="wrap"> <div id="logo"> <h1><a href="index.html" title="skins for bebo">Skins for bebo</a></h1> </div><!--closes logo div --> <div id="navigation"> <ul> <li><a href="/" title="/">Link</a></li> <li><a href="/" title="/">Link</a></li> <li><a href="/" title="/">Link</a></li> <li><a href="/" title="/">Link</a></li> <li><a href="/" title="/">Link</a></li> </ul> </div><!--closes nav div --> <div id="content"> <h2>Cool Skins for Bebo</h2> <div id="left"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div><!--closes left div --> <h3>Bebo Skins</h3> <div id="topright"></div> <div id="right"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div><!--closes right div --> <div id="bottomright"></div> </div><!--closes content div --> <div class="clear"></div> <div id="footer"> <p>This Website is in no way affiliated with Bebo.com</p> </div><!--closes footer div --> </div><!--closes wrap div --> </body> </html> and the css /* CSS Document */ html, body{ padding:0; margin:0; } body { font-family:"sans serif", Times, serif; font-size:14px; color:#000000; text-align:center; background:#393939 url(images/coolbg.jpg) no-repeat top center; line-height:1.5em; } #wrap{ width:900px; margin:0 auto; text-align:left; } #logo h1{ font-size:1px; text-indent:-5000em; padding:0; margin:0; } #logo h1 a{ display:block; background:url(images/logo.png) no-repeat; height:213px; width:469px; margin-bottom:-150px; } #navigation{ width:900px; height:46px; background:url(images/nav.png) no-repeat; } #content{ width:900px; } #left{ float:left; background:url(images/left.png) repeat-y; width:599px; margin-top:15px; padding-top:10px; } #content h3{ background:url(images/leftbottom.png) no-repeat; height:20px; text-indent:-1000px; margin-top:30px; } #content h2{ background:url(images/lefthead.png) no-repeat; height:18px; margin-bottom:-15px; text-indent:-1000px; } #botleft{ background:url(images/leftbottom.png) no-repeat; height:20px; } #left p{ margin:0 20px 10px 20px; } #left a{ margin:0 20px 0 20px; } #right{ float:right; background:url(images/right.png) repeat-y; width:282px; margin-top:15px; padding-top:10px; } #topright{ background:url(images/righthead.png) no-repeat; height:20px; float:right; } #bottomright{ background:url(images/rightbottom.png) no-repeat; height:20px; float:right; } #right p{ margin:0 20px 10px 20px; } #right a{ margin:0 20px 0 20px; } .clear{ clear:both; } .clearleft{ clear:left; } #footer{ }