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…

<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>

#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{

}

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;}

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

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.

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 :shifty:

Thanks though, this thread can be closed.

Interesting, good information.