Help with making boxes with large wrapping text in them

Get Started
1

Hi,

I am fairly new to css design and I am trying to convert a photoshop comp to html and css. I’ve been working on and googling trying to get some boxes to display like I want them without much success. I thought it would be worth a try to get some help here. I’d like to break the text up into two lines like the original design without turning the boxes into images. When I do anything to create the line break, or increase the font size over a certain size, things start jumping out of the boxes. Any advice would be appreciated. I’m attaching a jpg of the desigin, and one of what I have the html looking like so far. I’m also pasting my code below. Thanks, Jeff



        <div id="containerbox">		
			<h2 class="bigboxes" id="boxone">Learn about our exports</h2>
			<div class="bigboxes" id="boxtwo">Visit Our Parts Store</div>
			<div class="bigboxes" id="boxthree">See Our Vehicle Gallery</div>
        </div>


     
	div#containerbox {
		position:absolute;
		border-top:solid 1px yellow;		
		border-bottom:solid 1px yellow;		
    	left:34px;
	    bottom:100px;
	    padding-top:40px;
	    padding-bottom:40px;

	}

	.bigboxes {
		text-align:center;
		text-transform: uppercase;
	    border:solid 1px red; 
		background:gray;	
		color:white;
		padding-left:10px;
		padding-right:10px;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-left:30px;
		margin-right:30px;
		width:265px;
		height:83px; 
		display:inline;
		font-size:18px;
	}
2

oops, in the code I posted I had also started experimenting with changing the divs to H2’s so that is why the first box is different in the code. in the screenshot all three boxes were divs