SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2006
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add Border - Create Box Effect

    Hi,

    I want to put a border around a number of items on my webpage.
    So I want the items to look like they are in a box i.e. part of same group.

    However, the border does not enclose all items. It just encloses the <h1> control.

    Any ideas how to fix this? Thanks.

    Code:
    <div id="main">
    
    <div id ="test1">
    <h1>News</h1>
    
    <img src="..." alt="..." class="grid">
    <img src="..." alt="..." class="graph" >
    
    </div>
    </div>
    Code:
    #test1{border: 5px solid red;}
    
    #main
    {
    	/*background: yellow;*/
    	margin-left: 5px;
    }
    
    
    .grid
    {
    	float: left;
    	margin-bottom: 20px;
    }
    
    .graph
    {
      float:right;
      margin-right: 30px;
      margin-bottom: 20px;
    }

  2. #2
    SitePoint Member
    Join Date
    Jan 2006
    Location
    UK
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you absolutely position #test1 it should work.

    #test1{border: 5px solid red; position:absolute}

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It's because the images are floated and the parent doesn't recognize it is there. Try this out
    Code:
    #test1{border: 5px solid red;overflow:hidden;}
    * html #test1{overflow:visible;height:1&#37;;}
    
    #main
    {
    	/*background: yellow;*/
    	margin-left: 5px;
    }
    
    
    .grid
    {
    	float: left;
    	margin-bottom: 20px;
    }
    
    .graph
    {
      float:right;
      margin-right: 30px;
      margin-bottom: 20px;
    }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2006
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It's because the images are floated and the parent doesn't recognize it is there. Try this out
    Code:
    #test1{border: 5px solid red;overflow:hidden;}
    * html #test1{overflow:visible;height:1%;}
    
    #main
    {
    	/*background: yellow;*/
    	margin-left: 5px;
    }
    
    
    .grid
    {
    	float: left;
    	margin-bottom: 20px;
    }
    
    .graph
    {
      float:right;
      margin-right: 30px;
      margin-bottom: 20px;
    }
    That's it! Thanks!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Your welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •