SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,314
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    background-color not appearing

    I am using the Foundation template for this responsive web page (http://foundation.zurb.com/).

    My problem: I have a div "four columns" (which is 1/3 of a page width of 12 columns) with a black background so the white heading text will stand out (It needs to be white on black to match the existing web site design). Inside that div are two divs side by side with a thumbnail and text in each, both with a light blue background (matching the existing web site design). But if the text is longer in one div than the other, then the light blue box gets longer in height, and the uneven box heights effect looks awkward.

    So I thought I'd put the two divs into another div with the background-color set to the blue color so the uneven divs would appear to be the same height against the matching color, but the background color did not show up. Can anyone explain that?

    Here is the code after adding the background-color div surrounding the two divs.

    HTML Code:
    <div class="four columns" style="background-color:#000">
    <p style="color:#fff; font-weight:bold; text-align:left; font-size:1.2em;padding:0;margin:0">Featured Multimedia</p>
    
    <div style="background-color:#93c2e9">
    <div style="background-color:#93c2e9;text-align:center;width:50%;padding:.5em;float:left"><img src="images/multimedia-1.jpg" width="100%" alt="Featured Multimedia: videos" title="Featured Multimedia: videos" style="max-width:140px"></div>
    
    <div style="background-color:#93c2e9;text-align:center;width:50%;padding:.5em;float:right"><img src="images/multimedia-2.jpg" width="100%" alt="Featured Multimedia: wallpaper" title="Featured Multimedia: wallpaper" style="max-width:140px"></div>
    </div>
    </div>

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,314
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This problem is actually much worse! There are two of these "four column" divs next to each other. Even if I were to get the boxes evened out in one "four columns" div, the other "four columns" div, if it has longer text in its divs, will extend its height, so the overall effect will be uneven again.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The question is really hard to understand—at least for me. Could you post a screen shot or something indicating what you want? I was jusming back and forth between your post and the page and question and can't relate the two.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •