1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Equal Height Divs?

Discussion in 'CSS' started by Sam Designs, Dec 17, 2007.

0
  1. #1
    www.sam-designs.com

    The two grey boxes, under the div featured; how can i make them equal heights?

    I tried some of the scripts, though i couldn't get it to work.

    Thanks in advance.
     
    Sam Designs, Dec 17, 2007 IP
  2. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #2
    If you set a container and have them in it, then you have an image as a bg and repeat-y
     
    crazyryan, Dec 17, 2007 IP
  3. Sam Designs

    Sam Designs Active Member

    Messages:
    474
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #3
    A good idea, though it didn't seem to work. Unfortunately.

    Thanks anyway.
     
    Sam Designs, Dec 17, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    That just means you're doing it wrong. You need to have a container, and if the child elements are floats, you need to contain them by setting overflow to hidden and triggering hasLayout by doing something like applying a width.

    #container { overflow:hidden; background:url(foo.jpg) repeat-y; width:600px; }

    If container has 2 floating child elements, it will contain them and the pattern from the image will repeat vertically. This is called faux columns.
     
    soulscratch, Dec 17, 2007 IP
  5. Sam Designs

    Sam Designs Active Member

    Messages:
    474
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #5
    well i have a container called #featured, so i don't think i need another one. So i'll see if that works.

    I tried it, but it just mucked up the positioning of the two featured-posts - and it didn't seem to do the job.
     
    Sam Designs, Dec 17, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Let's see what there are for 'problems'

    Oh, wordpress - <adam>Well there's your problem</adam>

    inlined CSS loaded with !important - that's usually an indication of doing something wrong.

    inlined IE conditional style - usually an indication of doing something wrong.

    inlined style between the </head> and <body> - invalid markup.

    No header tags with obvious headers.

    Three times the wrapping DIV's than should be needed.


    Too bad it's a turdpress template - even if I did up an example page of how it should be coded it's not likely to do you much good.
     
    deathshadow, Dec 17, 2007 IP
  7. Sam Designs

    Sam Designs Active Member

    Messages:
    474
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #7
    Thanks for the 'help' deathshadow. I get by on what I do, I know i'm not a professional and you could probably do it 10x better but there's no need to criticize without help.
     
    Sam Designs, Dec 18, 2007 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Sorry, but I see the same problem over and over again post after post - when a lot of the problems are hardcoded into wordpress outside the skinning system (like the STUPID full URL's on everything).

    Well, not certain how much help it will be - and I'm not entirely sure this is how it's supposed to look given the errors you seem to have with that 'right column', but this is what I THINK you are trying to do, right?

    http://battletech.hopto.org/for_others/sam_designs/template.html

    The directory:

    http://battletech.hopto.org/for_others/sam_designs

    is unlocked so you can grab the gooey bits. It's about the same amount of CSS, roughly half the HTML once you strip my comments explaining things, validates XHTML 1.0 Strict, CSS would validate if not for the inclusion of cursor:hand (BFD), tested working in IE 5.5, 6 & 7, FF, Opera and Safari. I also re-mastered the logo image to be less than half the size... and stretched that yellow third column to 'fit' as well.
     
    deathshadow, Dec 19, 2007 IP
  9. Sam Designs

    Sam Designs Active Member

    Messages:
    474
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #9
    Thanks alot deathshadow, i appreciate your help.

    That template is exactly what i wanted, but i was going to advance to also put a container under the two featured posts, where main posts would be placed. The sidebar would then be stretched to fit the length of this aswell. Could you be able to do that?

    Thanks in advance. +rep
     
    Sam Designs, Dec 19, 2007 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Would that new container be the width of both 'featured' posts? If so you'd add a second image (or expand the width of the existing background-image and slide it around), and have to add ANOTHER wrapping container. In that case, I would probably have a single container wrapping the two featured posts, attach just the background-image for just those two there, then have a container wrapping all posts and the sidebar styled with the full width post image.

    If I have time after work, I'll toss together an example.
     
    deathshadow, Dec 19, 2007 IP
  11. Sam Designs

    Sam Designs Active Member

    Messages:
    474
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #11
    Yes, the bottom container is the width of the very left to the very right of the featured posts.

    Then the sidebar would fit down to this container aswell.

    Okay, thanks in advance. Don't worry if you don't have time - i know christmas is very busy and i really appreciate it.
     
    Sam Designs, Dec 19, 2007 IP
  12. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #12
    A perfect quote from Adam Savage. ;)
     
    ChaosFoo, Dec 19, 2007 IP
  13. Sam Designs

    Sam Designs Active Member

    Messages:
    474
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #13
    I tried to do what you suggested, though it probably wasn't what you meant. So if you have some free time, could you have a go.

    Thanks,
    Sam.
     
    Sam Designs, Dec 21, 2007 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Ok, have another look at:
    http://battletech.hopto.org/for_others/sam_designs/template.html

    I increased the .gif width to 1336 wide to add the second background style, which on the new 'featured' container I slide over to show the new part. A second container is also needed to keep the new newsitem(s) in the same column as the two smaller 'featured' ones.
     
    deathshadow, Dec 21, 2007 IP
  15. Sam Designs

    Sam Designs Active Member

    Messages:
    474
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #15
    That's perfect. I have looked at the techniques you have used, and i hope my templates from now on can be cleaner and less messy.

    Thank you,
    Sam.
     
    Sam Designs, Dec 22, 2007 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    .featured {
    overflow:hidden; /* wrap floats */
    width:568px; /* haslayout wraps floats lte IE6 */
    background:url(images/fauxColumns.gif) -768px; 0 repeat-y;
    }

    take the ; out after -768px! --typo
     
    Stomme poes, Dec 24, 2007 IP