SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Make a "Caption" with a Div Border

    Hello all,

    This is another question about the landing pages like this one.

    Notice at line 53 begins a div called .captionwrap. The styles for this div are as follows (lines 192,193 - lp.css):
    Code:
    .captionwrap{border:2px groove #330; height:auto; padding:0 4px;}
    .captionwrap img{border:none;}
    This div width, however, stretches across the entire length of the page as you can see in the border... and it doesn't cover the entire height of the image inside of the div.

    Screenshot

    Thanks all,

    Tyler

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,613
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, etidd. If I understand the issue correctly, adding {overflow:hidden;} to .captionwrap to should do the trick.
    Code:
    .captionwrap {
        border: 2px groove #333300;
        height: auto;
        overflow: hidden;
        padding: 0 4px;
    }

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's the solution! I should go to the CSS reference to find out why.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,322
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    That's the solution! I should go to the CSS reference to find out why.
    It's an issue of containing floats.


Tags for this Thread

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
  •