SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: border problems

  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border problems

    I have a setup like this

    <div>
    <h2></h2>
    <div>
    </div>
    </div>

    The second div has a css border, my problem is, that the h2 appears within the border as well...

  2. #2
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="h_laser">
    	<h2 class="info_headers">New Trumpf Laser!</h2>	
    		<div class="info_boxes">
    			<a href="lasercutting.html"><img id="laser_header" src="site_images/laser_header.jpg" alt="header for trumpf laser on the home page"/></a>
    			<p>We have recently purchased a brand new <b>Trumpf Laser</b>, check out the installation process <a href="lasercutting.html">here!</a></p>
    			<p>We are committed to investing in the newest technology for our future.</p>
    		</div><!-- End of info_boxes -->
    	</div>
    Code:
    #h_laser{
    	margin: 0 0 50px 50px;
    	float: left;
    	width:315px; /*extra 2px for border*/
    }
    
    .info_boxes{
    	border: 1px solid black;
    	padding-bottom: 10px;	
    }
    
    .info_boxes img{
    	width: 313px;
    	height: 56px;
    }
    
    .info_boxes p{
    	font-size: 9.5pt;
    	padding: 5px 10px 0 10px;
    }
    
    .info_headers{
    
    }

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am looking at your mark up and html, and the h2 is outside the boder....

    unless what you are saying is that the IMAGE inside the <A> is supposed to be the header??

    if that is the case :
    #h_laser{
    margin: 0 0 50px 50px;
    float: left;
    width:315px; /*extra 2px for border*/
    }

    .info_boxes{
    border: 1px solid black;
    padding-bottom: 10px;
    }

    .info_boxes img, #laser_header{
    width: 315px;
    height: 56px;
    }

    .info_boxes p{
    font-size: 9.5pt;
    padding: 5px 10px 0 10px;
    }

    .info_headers{ margin-bottom:57px;}

    #laser_header{ display:block; margin-top:-57px; margin-left:-1px;}

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes the markup shows the h2 being outside the border, but if you actually take a look at my webpage the h2 is shown within the border.

    Welcome to OGS Industries | Gaskets | Shims | Fabricated Metal | Stampings

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure where I'm looking exactly. I've coloured the borders red in the attached screenshot which is showing them outside the h2 and not inside.

    Or did you mean something else?

    Remember that a float that starts above a bordered box will in fact float inside the border as backgrounds and borders always slide up until they reach the containing block whether a float is in the way or not.
    Attached Images Attached Images

  6. #6
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry guys,

    Earlier today the .info_headers was viewing on the webpage as if it were in the border, when clearly in the HTMl markup it was not.

    Not sure why it's correct now

    Thanks though, this thread can be closed.

  7. #7
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Remember that a float that starts above a bordered box will in fact float inside the border as backgrounds and borders always slide up until they reach the containing block whether a float is in the way or not.
    Interesting, good information.


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
  •