Placing background image

HTML & CSS
1

Hi,
I am making a site in wordpress, i have used some wordpress template function to have background change on every page. my problem is of placement. if i place the code after body tag the image ends up where the right sidebar div ends. why is it happening? where as the div that hold the image in right after body why its cutting off with overflow-x of right side bar? here is the css and screenshot


#header,#masthead{
    padding:0;
    position:fixed;
    height:170px;
    width:800px;
    background-color:#FFF;
    z-index:4000;
}
#site-title{
    width:200px;
    float:left;
}
#container{
    width:580px;
    float:left;
    margin:0 10px;
}
#content{
    width:auto;
    padding:5px;
    
}
#main{
    width:1024px;
    
}
.leftBar{
    width:200px;
    float:left;
    overflow:scroll;
    overflow-x:hidden;
}
.rightBar{
    width:200px;
    float:left;
    padding:0 37px;
    overflow:scroll;
    }
.leftBar,#content{
    margin-top:200px;
}
.photo {
    margin: 0;
    position: absolute;
    top: 0px;
    right:0;
    overflow-x: hidden;
    width: 800px;
    z-index:-100;
}
2

We really need to see the live page to know what’s happening here … or at least the HTML. It would be better to set that image as a background image rather than in the HTML (which appears to be the case here).

3

here the generated html from start to what i can think is useful. sorry but reply box isn’t properl showing up to tag the html


	<div class="photo"> 		<img src="http://localhost/homeless/wp-content/uploads/2012/02/2008262.jpg" />         </div> <body class="page page-id-7 page-template page-template-custom-bg-php logged-in admin-bar custom-background"> <div id="wrapper" class="hfeed"> 	<div id="header"> 		<div id="masthead">         <div id="logo"> 	<img src="wp-content/uploads/2012/02/logo.jpg"> 	</div>

and here is the original code


</head>
    <div class="photo">
        <img src="<?php echo get_post_meta($post->ID,'background_images',true); ?>" />   
     </div>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
4

Hmm, that code on its own doesn’t revel much. This needs to be in content. Can you put together a test page of what gets rendered on screen?

5

As Ralph said, that may be the only code at fault, but even if it is, we won’t be able to recreate it without a bigger view of hte page.

I like that you understood to give us minimalized code though :).

6

Rendered code or original code?

7

Rendered code. More often than not you have PHP or some other server side language in the original code, and it will most likely only cause issues on our end.

8 

<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"> <meta> <title>Homeless</title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="stylesheet" type="text/css" media="all" href="http://localhost/homeless/wp-content/themes/Genesis/style.css"> <link rel="pingback" href="http://localhost/homeless/xmlrpc.php"> <meta name='robots' content='noindex,nofollow'> <style type='text/css' media='screen'> .socialwrap li.icon_text a img, .socialwrap li.iconOnly a img, .followwrap li.icon_text a img, .followwrap li.iconOnly a img{border-width:0 !important;background-color:none;}#follow.right {width:32px;position:fixed; right:0; top:100px;background-color:#878787;padding:10px 0;font-family:impact,charcoal,arial, helvetica,sans-serif;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border:2px solid #fff;border-right-width:0}#follow.right ul {padding:0; margin:0; list-style-type:none !important;font-size:24px;color:black;} #follow.right ul li {padding-bottom:10px;list-style-type:none !important;padding-left:4px;padding-right:4px} #follow img{border:none;}#follow.right ul li.follow {margin:0 4px;} #follow.right ul li.follow img {border-width:0;display:block;overflow:hidden; background:transparent url(http://localhost/homeless/wp-content/plugins/share-and-follow/images/impact/follow-right.png) no-repeat -0px 0px;height:79px;width:20px;} #follow.right ul li a {display:block;} #follow.right ul li.follow span, #follow ul li a span {display:none}.share {margin:0 3px 3px 0;} .phat span {display:inline;} ul.row li {float:left;list-style-type:none;} li.iconOnly a span.head {display:none} #follow.left ul.size16 li.follow{margin:0px auto !important} li.icon_text a {padding-left:0;margin-right:3px} li.text_only a {background-image:none !important;padding-left:0;} li.text_only a img {display:none;} li.icon_text a span{background-image:none !important;padding-left:0 !important; } li.iconOnly a span.head {display:none} ul.socialwrap li {margin:0 3px 3px 0 !important;} ul.socialwrap li a {text-decoration:none;}ul.row li {float:left;line-height:auto !important;} ul.row li a img {padding:0}.size16 li a,.size24 li a,.size32 li a, .size48 li a, .size60 li a {display:block}ul.socialwrap {list-style-type:none !important;margin:0; padding:0;text-indent:0 !important;} ul.socialwrap li {list-style-type:none !important;background-image:none;padding:0;list-style-image:none !important;} ul.followwrap {list-style-type:none !important;margin:0; padding:0} ul.followwrap li {margin-right:3px;margin-bottom:3px;list-style-type:none !important;} #follow.right ul.followwrap li, #follow.left ul.followwrap li {margin-right:0px;margin-bottom:0px;} .shareinpost {clear:both;padding-top:0px}.shareinpost ul.socialwrap {list-style-type:none !important;margin:0 !important; padding:0 !important} .shareinpost ul.socialwrap li {padding-left:0 !important;background-image:none !important;margin-left:0 !important;list-style-type:none !important;text-indent:0 !important} .socialwrap li.icon_text a img, .socialwrap li.iconOnly a img{border-width:0}ul.followrap li {list-style-type:none;list-style-image:none !important;} div.clean {clear:left;} div.display_none {display:none;} .button_holder_left{margin-right:5px;display:inline}.button_holder_right{margin-left:5px;display:inline}.button_holder_show_interactive{display:inline}.icon_text { float:left; } </style>  <style type='text/css' media='print'> .socialwrap li.icon_text a img, .socialwrap li.iconOnly a img, .followwrap li.icon_text a img, .followwrap li.iconOnly a img{border-width:0 !important;background-color:none;}#follow.right {width:32px;position:fixed; right:0; top:100px;background-color:#878787;padding:10px 0;font-family:impact,charcoal,arial, helvetica,sans-serif;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border:2px solid #fff;border-right-width:0}#follow.right ul {padding:0; margin:0; list-style-type:none !important;font-size:24px;color:black;} #follow.right ul li {padding-bottom:10px;list-style-type:none !important;padding-left:4px;padding-right:4px} #follow img{border:none;}#follow.right ul li.follow {margin:0 4px;} #follow.right ul li.follow img {border-width:0;display:block;overflow:hidden; background:transparent url(http://localhost/homeless/wp-content/plugins/share-and-follow/images/impact/follow-right.png) no-repeat -0px 0px;height:79px;width:20px;} #follow.right ul li a {display:block;} #follow.right ul li.follow span, #follow ul li a span {display:none}.share {margin:0 3px 3px 0;} .phat span {display:inline;} ul.row li {float:left;list-style-type:none;} li.iconOnly a span.head {display:none} #follow.left ul.size16 li.follow{margin:0px auto !important} li.icon_text a {padding-left:0;margin-right:3px} li.text_only a {background-image:none !important;padding-left:0;} li.text_only a img {display:none;} li.icon_text a span{background-image:none !important;padding-left:0 !important; } li.iconOnly a span.head {display:none} ul.socialwrap li {margin:0 3px 3px 0 !important;} ul.socialwrap li a {text-decoration:none;}ul.row li {float:left;line-height:auto !important;} ul.row li a img {padding:0}.size16 li a,.size24 li a,.size32 li a, .size48 li a, .size60 li a {display:block}ul.socialwrap {list-style-type:none !important;margin:0; padding:0;text-indent:0 !important;} ul.socialwrap li {list-style-type:none !important;background-image:none;padding:0;list-style-image:none !important;} ul.followwrap {list-style-type:none !important;margin:0; padding:0} ul.followwrap li {margin-right:3px;margin-bottom:3px;list-style-type:none !important;} #follow.right ul.followwrap li, #follow.left ul.followwrap li {margin-right:0px;margin-bottom:0px;} .shareinpost {clear:both;padding-top:0px}.shareinpost ul.socialwrap {list-style-type:none !important;margin:0 !important; padding:0 !important} .shareinpost ul.socialwrap li {padding-left:0 !important;background-image:none !important;margin-left:0 !important;list-style-type:none !important;text-indent:0 !important} .socialwrap li.icon_text a img, .socialwrap li.iconOnly a img{border-width:0}ul.followrap li {list-style-type:none;list-style-image:none !important;} div.clean {clear:left;} div.display_none {display:none;} .button_holder_left{margin-right:5px;display:inline}.button_holder_right{margin-left:5px;display:inline}.button_holder_show_interactive{display:inline}.icon_text { float:left; } </style> <link rel="alternate" type="application/rss+xml" title="Homeless » Feed" href="http://localhost/homeless/?feed=rss2"> <link rel="alternate" type="application/rss+xml" title="Homeless » Comments Feed" href="http://localhost/homeless/?feed=comments-rss2"> <link rel='stylesheet' id='admin-bar-css' href='http://localhost/homeless/wp-includes/css/admin-bar.css?ver=20111209' type='text/css' media='all'> <link rel='stylesheet' id='utcw-css-css' href='http://localhost/homeless/wp-content/plugins/ultimate-tag-cloud-widget/utcw.css?ver=1.3' type='text/css' media='all'> <script type='text/javascript' src='http://localhost/homeless/wp-includes/js/jquery/jquery.js?ver=1.7.1'> </script> <script type='text/javascript' src='http://localhost/homeless/wp-content/plugins/ultimate-tag-cloud-widget/utcw.js?ver=1.3'> </script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/homeless/xmlrpc.php?rsd"> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/homeless/wp-includes/wlwmanifest.xml"> <meta name="generator" content="WordPress 3.3.1"> <style type="text/css"> body.custom-background { background-color: #000000; } </style>  <style type="text/css" media="print"> #wpadminbar { display:none; } </style>  <style type="text/css" media="screen">         html { margin-top: 28px !important; }         * html body { margin-top: 28px !important; } </style>  <style type="text/css"> .utcw-tag-link{background-color: !important;border-style:none !important;border-width:0px !important;}.utcw-tag-link:hover{background-color: !important;color: !important;border-style:none !important;border-width:0px !important;} </style>  <style type="text/css">  div.c21 {letter-spacing:normal;word-spacing:normal;}  div.c20 {text-align: center; font-size: xx-small;}  img.c19 {background: transparent url(http://localhost/homeless/wp-content/plugins/share-and-follow/default/24/sprite-24.png) no-repeat;padding:0;margin:0;height:24px;width:24px;background-position:-250px 0px}  img.c18 {background: transparent url(http://localhost/homeless/wp-content/plugins/share-and-follow/default/24/sprite-24.png) no-repeat;padding:0;margin:0;height:24px;width:24px;background-position:-1100px 0px}  img.c17 {background: transparent url(http://localhost/homeless/wp-content/plugins/share-and-follow/default/24/sprite-24.png) no-repeat;padding:0;margin:0;height:24px;width:24px;background-position:-1325px 0px}  img.c16 {background: transparent url(http://localhost/homeless/wp-content/plugins/share-and-follow/default/24/sprite-24.png) no-repeat;padding:0;margin:0;height:24px;width:24px;background-position:-275px 0px}  div.c15 {margin-left: 2em}  div.c14 {text-align:right; font-size:9px;color: #888;}  select.c13 {width:auto}  span.c12 {font-family:Tahoma, Geneva, sans-serif; font-size:12px;}  span.c11 {font-family:'Comic Sans MS', cursive; font-size:12px}  a.c10 {color:#ff1071;}  span.c9 {font-family:'Arial Black', Gadget, sans-serif; font-size:12px;}  a.c8 {color:#228ede;}  a.c7 {color:#97b72a}  span.c6 {font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size:12px}  a.c5 {color:#ffdb4f}  a.c4 {color:#454465;}  a.c3 {color:#570c71;}  span.c2 {font-family:Verdana, Geneva, sans-serif; font-size:12px}  a.c1 {color:#e68e50;} </style> </head> <body> <div class="photo"><img src="......" alt="** PLEASE DESCRIBE THIS IMAGE **"></div> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="logo"><img src="wp-content/uploads/2012/02/logo.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **"></div> <div id="access"> <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div> <div class="menu-header"> <ul id="menu-top-navigation" class="menu"> <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://localhost/homeless/?page_id=5">Home</a></li> <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost/homeless/?page_id=7">About Us</a></li> <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost/homeless/?page_id=9">What do we do?</a></li> <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://localhost/homeless/?page_id=11">For Whom</a></li> <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://localhost/homeless/?page_id=15">Gallery</a></li> <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="http://localhost/homeless/?page_id=17">Join Us</a></li> <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://localhost/homeless/?page_id=19">Contact</a></li> </ul> </div> </div> <!-- #access --> <p><span class="c2"><a class="c1" href="http://doingdreams.org/what-do-we-do">What?</a></span> To show <span class="c12"><a class="c3" href="http://doingdreams.org/dream">homeless people</a>, of the world<br> <span><a class="c4" href="http://doingdreams.org/connection">How?</a></span> To provide worldwide <span class="c6"><a href="http://doingdreams.org/about-us" class="c5">information</a></span> and be a <span class="c6"><a href="http://doingdreams.org/about-us" class="c7">platform</a></span> for everybody working with them. <span class="c9"><br> <a href="http://doingdreams.org/environment" class="c8">Why?</a></span> To tell that they are human beings in the <span class="c11"><a class="c10" href="http://doingdreams.org/visibility">wrong circumstances</a></span><br></span></p> </div> <!-- #masthead --></div> <!-- #header --> <div id="main"> <div class="photo"><img src="http://localhost/homeless/wp-content/uploads/2012/02/2008262.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **"></div> <div class="leftBar"> <div id="text-4" class="widget-container widget_text textwidget"><script type="text/javascript"> <!-- google_ad_client = "ca-pub-1675934412155884"; /* Homeless */ google_ad_slot = "6985456259"; google_ad_width = 170; google_ad_height = 200; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div id="google-translator" class="widget-container widget_google_translate"> <h3 class="widget-title">Google Translator</h3> <div class="c15" id="widget_google_translate"> <form action="http://translate.google.com/translate"><input name="u" id="url" value="http://localhost/homeless/" type="hidden"><input name="sl" value="en" type="hidden">Translate to:<br> <select name="tl" class="c13"> <option value="ar">Arabic</option> <option value="bg">Bulgarian</option> <option value="ca">Catalan</option> <option value="zh-CN">Chinese (Simplified)</option> <option value="zh-TW">Chinese (Traditional)</option> <option value="hr">Croatian</option> <option value="cs">Czech</option> <option value="da">Danish</option> <option value="nl">Dutch</option> <option value="en" selected>English</option> <option value="tl">Filipino</option> <option value="fi">Finnish</option> <option value="fr">French</option> <option value="de">German</option> <option value="el">Greek</option> <option value="iw">Hebrew</option> <option value="hi">Hindi</option> <option value="id">Indonesian</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ko">Korean</option> <option value="lv">Latvian</option> <option value="lt">Lithuanian</option> <option value="no">Norwegian</option> <option value="pl">Polish</option> <option value="pt">Portuguese</option> <option value="ro">Romanian</option> <option value="ru">Russian</option> <option value="sr">Serbian</option> <option value="sk">Slovak</option> <option value="sl">Slovenian</option> <option value="es">Spanish</option> <option value="sv">Swedish</option> <option value="uk">Ukrainian</option> <option value="vi">Vietnamese</option> </select><br> <input name="hl" value="en" type="hidden"><input name="ie" value="UTF-8" type="hidden"><script type="text/javascript">                 var thestr = window.location.href;                 var mystrlen = 16;                 var sresult = thestr.indexOf( "localhost" );                 if( sresult == -1 || sresult >= mystrlen) {                         document.write( '<input value="Translate" type="submit" disabled /> ' );                         document.write( '<a href="" target="_top" >return to original<\\/a>' );                 }else{                         document.write( '<input value="Translate" type="submit" />' );                 } </script></form> <div class="google_translate_footer c14">Powered by <a href="http://translate.google.com/" target="_blank">Google Translate</a>.</div> </div> </div> <div id="share-widget-2" class="widget-container share_links"> <h3 class="widget-title">Share this blog</h3> <ul class="socialwrap down"> <li class="icon_text"><a rel='nofollow' target='_blank' title='Recommend this blog : Homeless on Facebook' href='http://www.facebook.com/sharer.php?u=http%3A%2F%2Flocalhost%2Fhomeless&amp;t=Homeless'><img src='http://localhost/homeless/wp-content/plugins/share-and-follow/images/blank.gif' height='24' width='24' class='image-24 c16' alt='facebook'> <span class="head">..</span></a></li> <li class="icon_text"><a rel='nofollow' target='_blank' title='Tweet this blog : Homeless on Twitter' href="http://twitter.com/share?url=http%3A%2F%2Flocalhost%2Fhomeless&amp;text="><img src='http://localhost/homeless/wp-content/plugins/share-and-follow/images/blank.gif' height='24' width='24' class='image-24 c17' alt='twitter'> <span class="head">..</span></a></li> <li class="icon_text"><a rel="_self" href="http://localhost/homeless&amp;feed=rss2" title="Follow this blog : Homeless comments"><img src="http://localhost/homeless/wp-content/plugins/share-and-follow/images/blank.gif" height="24" width="24" class="image-24 c18" alt="rss"> <span class="head">..</span></a></li> <li class="icon_text"><a rel="_self" href="mailto:?subject=Homeless%20:%20Homeless&amp;body=here%20is%20a%20link%20to%20a%20site%20I%20really%20like.%20%20%20http://localhost/homeless" title="Tell a friend about this blog : Homeless "><img src="http://localhost/homeless/wp-content/plugins/share-and-follow/images/blank.gif" height="24" width="24" class="image-24 c19" alt="email"> <span class="head">..</span></a></li> </ul> </div> <div id="recent-posts-2" class="widget-container widget_recent_entries"> <h3 class="widget-title">Recent Posts</h3> <ul> <li><a href="http://localhost/homeless/?p=82" title="Lorem">Lorem</a></li> </ul> </div> <div id="text-6" class="widget-container widget_text"> <h3 class="widget-title">Partners</h3> <div class="textwidget"></div> </div> </div> <div id="container"> <div id="content"> <div id="post-82" class="post-82 post type-post status-publish format-standard hentry category-uncategorized"> <h2 class="entry-title"><a href="http://localhost/homeless/?p=82" title="Permalink to Lorem" rel="bookmark">Lorem</a></h2> <div class="entry-meta"><span class="meta-prep meta-prep-author">Posted on</span> <a href="http://localhost/homeless/?p=82" title="4:49 pm" rel="bookmark"><span class="entry-date">February 10, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://localhost/homeless/?author=1" title="View all posts by admin">admin</a></span></div> <!-- .entry-meta --> <div class="entry-content" id="lipsum"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut orci et lorem dapibus molestie. Nulla interdum, justo ac fermentum euismod, nibh nisi porta nisl, sit amet ullamcorper ipsum sem non ligula. Nunc pretium, est vel feugiat dapibus, diam leo porttitor diam, in scelerisque libero lacus non nunc. Cras fringilla tincidunt turpis, in sollicitudin purus sodales ut. Mauris in scelerisque libero. Aenean dignissim consequat odio, non iaculis nulla mattis eu. Nunc adipiscing porta leo quis laoreet. Etiam felis mauris, gravida nec iaculis eget, ullamcorper quis massa. In viverra, elit in rutrum rhoncus, est orci vehicula urna, vel consequat lectus massa at dui.</p> <p>Suspendisse mattis vestibulum sapien, et ullamcorper sem convallis vitae. Proin eget magna non nunc imperdiet porta euismod id est. Aliquam erat volutpat. Morbi sit amet ipsum nisl. Pellentesque gravida tincidunt turpis, ut sagittis eros porttitor sed. Suspendisse molestie hendrerit diam quis suscipit. Morbi eget metus purus, et fermentum est. Duis congue gravida sem, eu pharetra diam varius eget. Curabitur hendrerit elit vel purus ullamcorper venenatis. Morbi laoreet pellentesque nisl, vitae sodales magna faucibus nec. Sed et diam urna, at aliquam urna. Donec sodales tristique fringilla. Morbi vestibulum sollicitudin lorem sed tincidunt. Vivamus massa urna, lacinia eu faucibus nec, porta quis diam. Nunc sed condimentum nisi.</p> </div> <!-- .entry-content --> <div class="entry-utility"><span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="http://localhost/homeless/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> <span class="meta-sep">|</span> <span class="comments-link"><a href="http://localhost/homeless/?p=82#respond" title="Comment on Lorem">Leave a comment</a></span> <span class="meta-sep">|</span> <span class="edit-link"><a class="post-edit-link" href="http://localhost/homeless/wp-admin/post.php?post=82&amp;action=edit" title="Edit Post">Edit</a></span></div> <!-- .entry-utility --></div> <!-- #post-## --></div> <!-- #content --></div> <!-- #container --></div> <!-- #main --> <div id="footer"> <div id="colophon"> <div id="footer-widget-area"> <div id="first" class="widget-area"> <ul class="xoxo"> <li id="creativecommons-license" class="widget-container widget_ccLicense"> <h3 class="widget-title"></h3> <!--Creative Commons License--> <div class="c20">Blog under the <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License<br> <img alt="Creative Commons License" border="0" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a></div> <!--/Creative Commons License--></li> </ul> </div> <!-- #first .widget-area --> <div id="second" class="widget-area"> <ul class="xoxo"> <li id="search-2" class="widget-container widget_search"> <form method="get" id="searchform" action="http://localhost/homeless/"> <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s"> <input type="submit" id="searchsubmit" value="Search"></div> </form> </li> </ul> </div> <!-- #second .widget-area --> <div id="third" class="widget-area"> <ul class="xoxo"> <li id="utcw-2" class="widget-container widget_utcw"> <h3 class="widget-title">Tag Cloud</h3> <div class="widget_tag_cloud c21"></div> </li> </ul> </div> <!-- #third .widget-area --></div> <!-- #footer-widget-area --></div> <!-- #colophon --></div> <!-- #footer --></div> <!-- #wrapper --> <div id="follow" class="right"> <ul class="tab down"> <li class="follow"><img src="http://localhost/homeless/wp-content/plugins/share-and-follow/images/blank.gif" alt="follow:"><span>follow:</span></li> <li class="iconOnly"><a rel="nofollow me" target="_blank" href="http://localhost/homeless/?feed=rss" title="RSS"><img src="http://localhost/homeless/wp-content/plugins/share-and-follow/images/blank.gif" height="24" width="24" class="c18" alt="RSS"> <span class="head">RSS</span></a></li> </ul> </div> <script type='text/javascript' src='http://localhost/homeless/wp-includes/js/admin-bar.js?ver=20111130'> </script> <div id="wpadminbar" class="nojq nojs quicklinks"> <ul id="wp-admin-bar-root-default" class="ab-top-menu"> <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/about.php" title="About WordPress"></a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-wp-logo-default" class="ab-submenu"> <li id="wp-admin-bar-about" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/about.php">About WordPress</a></li> </ul> <ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu"> <li id="wp-admin-bar-wporg" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org">WordPress.org</a></li> <li id="wp-admin-bar-documentation" class=""><a class="ab-item" tabindex="10" href="http://codex.wordpress.org">Documentation</a></li> <li id="wp-admin-bar-support-forums" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/">Support Forums</a></li> <li id="wp-admin-bar-feedback" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li> </ul> </div> </li> <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/">Homeless</a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-site-name-default" class="ab-submenu"> <li id="wp-admin-bar-dashboard" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/">Dashboard</a></li> </ul> <ul id="wp-admin-bar-appearance" class=" ab-submenu"> <li id="wp-admin-bar-themes" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/themes.php">Themes</a></li> <li id="wp-admin-bar-widgets" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/widgets.php">Widgets</a></li> <li id="wp-admin-bar-menus" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/nav-menus.php">Menus</a></li> <li id="wp-admin-bar-background" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/themes.php?page=custom-background">Background</a></li> <li id="wp-admin-bar-header" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/themes.php?page=custom-header">Header</a></li> </ul> </div> </li> <li id="wp-admin-bar-updates" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/update-core.php" title="1 Plugin Update"><span class="ab-label">1</span></a></li> <li id="wp-admin-bar-comments" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a></li> <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/post-new.php" title="Add New"><span class="ab-label">New</span></a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-new-content-default" class="ab-submenu"> <li id="wp-admin-bar-new-post" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/post-new.php">Post</a></li> <li id="wp-admin-bar-new-media" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/media-new.php">Media</a></li> <li id="wp-admin-bar-new-link" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/link-add.php">Link</a></li> <li id="wp-admin-bar-new-page" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/post-new.php?post_type=page">Page</a></li> <li id="wp-admin-bar-new-user" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/user-new.php">User</a></li> </ul> </div> </li> </ul> <ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu"> <li id="wp-admin-bar-search" class=" admin-bar-search"> <div class="ab-item ab-empty-item"> <form action="http://localhost/homeless/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" tabindex="10" type="text" value="" maxlength="150"><input type="submit" class="adminbar-button" value="Search"></form> </div> </li> <li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/profile.php" title="My Account">Howdy, admin<img alt='' src='http://1.gravatar.com/avatar/f1edb320793125bf1d36ed27b87b9c51?s=16&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&amp;r=G' class='avatar avatar-16 photo' height='16' width='16'></a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-user-actions" class=" ab-submenu"> <li id="wp-admin-bar-user-info" class=""><a class="ab-item" tabindex="-1" href="http://localhost/homeless/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/f1edb320793125bf1d36ed27b87b9c51?s=64&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64'><span class='display-name'>admin</span></a></li> <li id="wp-admin-bar-edit-profile" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-admin/profile.php">Edit My Profile</a></li> <li id="wp-admin-bar-logout" class=""><a class="ab-item" tabindex="10" href="http://localhost/homeless/wp-login.php?action=logout&amp;_wpnonce=c76ce772e9">Log Out</a></li> </ul> </div> </li> </ul> </div> <div class="rightBar"> <div id="primary" class="widget-area"> <ul class="xoxo"> <li id="text-7" class="widget-container widget_text"> <div class="textwidget"><script type="text/javascript"> <!-- google_ad_client = "ca-pub-1675934412155884"; /* Homeless */ google_ad_slot = "6985456259"; google_ad_width = 170; google_ad_height = 200; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </li> <li id="youtube" class="widget-container widget_youtube"><object width="200" height="165"><param name="movie" value="http://www.youtube.com/v/5hzLsvR59gw"> <param name="wmode" value="transparent"> <embed src="http://www.youtube.com/v/5hzLsvR59gw" type="application/x-shockwave-flash" wmode="transparent" width="200" height="165"></object></li> </ul> </div> <!-- #primary .widget-area --> <div id="secondary" class="widget-area"> <ul class="xoxo"> <li id="text-5" class="widget-container widget_text"> <div class="textwidget"><object width="200" height="150"><param name="flashvars" value="offsite=true&amp;lang=en-us&amp;page_show_url=%2Fphotos%2Fdoingdreams%2Fsets%2F72157629231683891%2Fshow%2F&amp;page_show_back_url=%2Fphotos%2Fdoingdreams%2Fsets%2F72157629231683891%2F&amp;set_id=72157629231683891&amp;jump_to="> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=109615"> <param name="allowFullScreen" value="true"> <embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=109615" allowfullscreen="true" flashvars="offsite=true&amp;lang=en-us&amp;page_show_url=%2Fphotos%2Fdoingdreams%2Fsets%2F72157629231683891%2Fshow%2F&amp;page_show_back_url=%2Fphotos%2Fdoingdreams%2Fsets%2F72157629231683891%2F&amp;set_id=72157629231683891&amp;jump_to=" width="200" height="150"></object></div> </li> <li id="text-9" class="widget-container widget_text"> <div class="textwidget"><a href="#"><img src="wp-content/uploads/2012/02/button-facts-copy1.jpg" title="" alt="** PLEASE DESCRIBE THIS IMAGE **"></a></div> </li> <li id="text-10" class="widget-container widget_text"> <div class="textwidget"><a href=""><img src="wp-content/uploads/2012/02/button-events-copy.jpg" title="Events" alt="** PLEASE DESCRIBE THIS IMAGE **"></a></div> </li> </ul> </div> <!-- #secondary .widget-area --></div> </body> </html>

that’s mouthful of code but u guys wanted it but to be specfic the problem <div class=“photo”> what i want it to float on right side out of wrapper

9

We really need all of the CSS, so that we can see how the item in question interacts with the other elements as they are styled.

10

Its ok guys. i’ll look into it myself. but thanks!

11

Hm, sorry we can’t be more helpful. But the placement depends on the other page elements and their styles. I still think you should be using a background image (via CSS) than an image in the HTML. Looking at your second post again, it looks like the image div comes before the <body> element, but you should move it inside the body element, as no on-page elements can be outside the body.

12

Yeah just from looking at what little CSS you have given and eyeballing, the image appears to be on the right and under the sidebar, because on .photo you set a negative z-index (causing it to be underneith sidebar) and you also absolutely position it on the right:0;.

Where DID you want it? Sorry we can’t be of more help but we need the milk to go with the cereal :).