SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Latinoamérica
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy My Background Image refuses to display correctly

    I want to use this arrangement

    Code:
    <div id="content">  
      <div id="column_1"></div>
      <div id="column_2"></div> 
    </div>
    Column #1 will contain: 1 Image
    Column #2 will contain: Varying amounts of text

    I'm adding the background-image to the contend div, but I can't make it show to the complete lenght of the #content on Firefox (it does on IE).

    • If I leave it just like that it doesn't show anything, probably because there isn't any text inside #content
    • If I add a height: __px, pixel perfect aligned to the exact height of the text inside #content it works fine on both browsers but that doesn't seem logical or practical, since from now on everytime I want to add text to the second column I would have to change the height of the content div.


    This is going to be part of a little Wordpress-based CMS the client wants, so I can't do the little trick without having problems later with the guy. Worst of all, I can't use a single CSS for most of the layouts because of this.

    Is this just not possible?


  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show us more? A link to the page or your CSS would be useful.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Latinoamérica
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, sorry. Here's the code. Tell me if you need the actual site, I think it's going to be harder that way since the CSS is quite large itself.

    HTML:
    Code:
    <div id="content">  
    	 
     <!-- COLUMNA 1 -->
     <div id="col1">
     <img src="gif/logo.gif" />
     </div>
    
     <!-- COLUMNA 2 -->
     <div id="col2">
     <h1>Lorem Ipsum</h1>
     <h2>Lorem Ipsum</h2>
     <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
      <li>Lorem ipsum dolor sit amet, consectetuer</li>
     </ul>  
     </div>
    
    </div>
    CSS:
    Code:
    #content {  
     margin: 0;
     padding: 0; 
     background-image: url(../jpg/back2.jpg);
     height: 600px;
     width: 760px;
    }
    #col1 {
     margin: 0;
     padding: 0;
     float: left;  
     width: 190px;
    }
    #col2 {
     margin: 0 0 0 20px;
     padding: 0;
     float: left;
     width: 510px;
    }

  4. #4
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you need to clear the floats.


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
  •