Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Oct 2012
    Posts
    6
    Member #
    33529
    Hey all,

    I had a few problems with this issue and tried it numerous ways and nothing worked.
    Is it possible to have two divs next to each other and spread one picture as the background across both (without having to break up the background)? I believe one of the problems may be that both divs have used margins and padding but I'm pretty new to this so...?

    Thanks!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You'd have to wrap the 2 divs in another div and set the background on that.
    AlphaMare likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Oct 2012
    Posts
    6
    Member #
    33529
    HMM I tried that and thought that would work too. I definitely must have messed something up. When I did that- the background only showed in the top half of the div...Would margins or padding cut the bottom half of the background out for some reason? I'm going to re-try and then if it still doesnt work, I can paste the coding here...?

  5. #4
    Junior Member
    Join Date
    Oct 2012
    Posts
    6
    Member #
    33529
    Ok yes it still doesnt work. I may have made this overly complicated as I'm new to this, but I have a few divs within a div. I cant unload it to the FTP as its a re-design. I made a image that was a plain blue box to try out as the background (it was 154pxtall x 545pxwide) and it does not show up at all.

    CSS:
    <div id="divtoencompassbackground">
    <div id="toprightmiddle">
    <div id="linkedin"><img src="images/LinkedInIcon Small.png" class="linkedinimg"/></div>
    <div id="companyinfo"><p>Company Info</p></div>
    <div id="usa"><img src="images/FlagOriginal.gif" class="usaimg"/></div>
    <div id="usaword"><p>Made in USA</p></div>
    <div id="learnmore"><p>Learn More</p></div>
    <div id="facebook"><img src="images/FacebookIcon Small.png" class="facebookimg"/></div>
    </div>
    <div id="toprightbottom">
    <div id="email"><p>sales@myfreeoption.com</p></div>
    <div id="phone"><p>Phone: (927) 367-3137</p></div>
    </div>
    </div>

    HTML:
    #toprightmiddle {width:545px; height:97px; float:left;}
    #linkedin {float:left; margin-top:68.5px; margin-left:15px;}
    #companyinfo {float:left; width:100px; height:25px; margin-top:76px; margin-left:5px;}
    #companyinfo p {font-weight:600; font-size:13px;}
    #usa {float:left; margin-left:52.5px; margin-top:10px;}
    #usaword p {font-weight:600; font-size:13px; position:absolute; left:808px; top:148px; }
    #facebook {float:right; margin-top:68.5px;}
    #learnmore {float:right; width:100px; height:25px; margin-top:76px; margin-right:10px;}
    #learnmore p {font-weight:600; font-size:13px; margin-left:7.5px;}

    #toprightbottom { width:545px; height:37px; float:left; padding-top:20px;}
    #toprightbottom p { font-weight:600; font-size:13px;}
    #phone { float:left; width:135px; margin-left:170.5px;}
    #phone p { font-size:12px;}
    #email { float:left; width:210px; margin-left:15.5px;}

    #divtoencompassbackground {background-image:url(../images/Sample.jpg);}

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    [S]You need to declare a height for the #divtoencompassbackground. Height:auto; should work, if not just use a px value.[/S]

    Wrote that, then realized the div was collapsing due to uncleared floats. Clear your floats, and all should be well. Always clear your floats.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by Ronald Roe, post: 248314
    [S]You need to declare a height for the #divtoencompassbackground. Height:auto; should work, if not just use a px value.[/S]

    Wrote that, then realized the div was collapsing due to uncleared floats. Clear your floats, and all should be well. Always clear your floats.
    You can read that code without your eyes falling out? How?! (No offense meant)
    You should try to write your code more cleanly. By that I mean use more spaces, don't jam everything together. Also next time you upload code use the CODE tag's provided by the forum. It makes it a little easier on us.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:11 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com