How to place boxes side by side

Hello
I was just messing up with bootstrap so i just wanted to know how to place these boxes side by side here is an image
Here is the source code

<style>
div.heh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
  border: .5px solid #e3e3e3;
  border-radius: 1px;
  padding: 19px;
  margin-bottom: 5px;
  min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:left
float:left;
}
div.hehh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
  border: .5px solid #e3e3e3;
  border-radius: 1px;
  padding: 19px;
  margin-bottom: 5px;
  min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:right
float:right;
}

</style>
<!------- here is the HTML Structure ----->
  <div class="heh" align="left">
        <h3>SteamRep:<button type="button" class="btn btn-default"  >Normal</button><br>
        <a href="http://backpack.tf/id/712">View Backpack</a><br>
        <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
        </h3>
      </div>
      <div class="hehh">
      <h3>Positive Reputation:<font color="green">100</font><br>
      Negative Reputation:<font color="red">1</font></br>
      Total Raffles Participated:<font color="green">12</font><br>
      Warnings Received:<font color="red">0</font><br>       
     
      </h3>     
      </div>
  

HTML:

Some help would be really appreciated
Thanks!

 

you could use float:left; on divs.

 

also you will need to consider removing from width the padding and the margin, if you have a container with fixed width.

 

i think you use position or float=left, and check margin

 

Try using display: inline; and float: left;

 

It may sound archaic, but you can always use <tables> to place boxes side by side. One thing I like about <tables> is that they are stretchable. Give it a try:

<table border="0" width="800">
<tr>
<td valign="top">

    <div class="heh">
      <h3>SteamRep:<button type="button" class="btn btn-default" >Normal</button><br>
      <a href="http://backpack.tf/id/712">View Backpack</a><br>
      <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
      </h3>
    </div>

</td>
<td valign="top">

    <div class="hehh">
      <h3>Positive Reputation:<font color="green">100</font><br>
      Negative Reputation:<font color="red">1</font></br>
      Total Raffles Participated:<font color="green">12</font><br>
      Warnings Received:<font color="red">0</font><br>    
      </h3>  
    </div>

</td>
</tr>
</table>

Code (markup):

You can change the width to whatever you want.

 

I would just have more questions than answers for you -- like this is 2013, not 1997 so why are you using the FONT tag? Where's the FORM for that BUTTON? Why are you designing a crappy inaccessible fixed width? Why are you trying to use the long deprecated ALIGN attribute? What makes any of those third level headings? Are you sure you even have H2 for those to be subsections of and a h1 for the h2 to be subsections of? Why are you trying to fix the height in pixels of an element with flow text in it?

A double wrapped floated first div and a dynamic second div can handle this quite easily. First let's drag the markup kicking and screaming into THIS century...

<div class="controlWrapper"><div class="controls">
		SteamRep: 
		<!-- really think this button should be an anchor... -->
		<button type="button">Normal</button><br />
		<a href="http://backpack.tf/id/712">View Backpack</a><br />
		<a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
<!-- .controls, .controlWrapper --></div></div>

<div class="info">
	<table>
		<tr>
			<th scope="row">Positive Reputation:</th>
			<td>100</td>
		</tr><tr>
			<th scope="row">Negative Reputation:</th>
			<td>1</td>
		</tr><tr>
			<th scope="row">Total Raffles Participated:</th>
			<td>12</td>
		</tr><tr>
			<th scope="row">Warnings Received:</th>
			<td>0</td>
		</tr>
	</table>
<!-- .info --></div>

Code (markup):

Double-wrapper for properly divided dynamic width, get rid of the headings since those weren't actually headings (suspect you were choosing tags based on appearance instead of meaning, which is choosing the wrong tags for the wrong reasons), switch that tabular data to a table for semantic reasons and so there's a logical relationship between the elements, wrapper around that table since they don't accept border-radius or box-shadow properly...

Then for CSS we float .contentWrapper at 50% width with a 0.25em right margin... we then margin .controls on the same side so we get 0.5em space between the two columns. (sneaky trick for perfect 50% dynamic width). .info doesn't get floated, and instead gets a de-indent prevention behavior on it making it auto-adjust to whatever space is available. (which works out to 50% minus that 0.25em right margin on .controlWrapper).

... and for the alternating colors, we just use nth-child. IE 8/earlier doesn't get the colors, OH WELL! You REALLY want that, just put classes on every other TD.

.controlWrapper {
	float:left;
	display:inline; /* prevent IE float oddities */
	width:50%;
	margin:0 0.25em 0.5em;
}

.info {
	overflow:hidden; /* prevent float de-indent */
	zoom:1; /* trip haslayout, prevent float de-indent IE7- */
	margin-bottom:0.5em;
}

.controls {
	margin-right:0.25em;
}

.controls,
.info {
	padding:1em;
	border:1px solid #EEE;
	background:#F5F5F5;
	margin-bottom:5px;
	-webkit-border-radius:1px;
	border-radius:1px;
	-webkit-box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.info table {
	border-collapse:collapse;
}

.info th {
	text-align:right;
	font-weight:normal;
}

.info td {
	color:#0C0;
}

.info tr:nth-child(even) td {
	color:#E00;
}

Code (markup):

Now it's fully automatically fluid, so it will fit whatever size container you put it in -- of course if you care about accessibility you won't have an inaccessible fixed outer width and instead have a semi-fluid, elastic and responsive layout... and of course since it's NOT tables for layout, it can also be made responsive with ease.

 

1. <div class ="textBox2">
2. <div class ="textBox" style="float:left;">
3. </div>
4. <div class ="textBox" style="float:left;">
5. </div>
6. <div class ="textBox" style="float:right; ">
7. </div>
8. </div>

 

Sorry for the post in an old thread. But no one actually answered the question correctly. If you are using Bootstrap why not use the grid?

<div class="col-md-6">
left box
</div>
<div class="col-md-6">
right box
</div>

Code (markup):

 

So in other words, if you're DUMB ENOUGH to be using that bloated halfwit steaming pile of ****, you might as well crap on the accessibility by using grids and fixing the width too?

STUNNING example of why bootstrap is absolute rubbish I can't fathom how anyone can be big enough a drooling moron to use by choice.

 

Your'e DUMB enough not to read what he actually asked. He said he is working with BOOTSTRAP and want's to know how to place boxes side by side.

STUNNING example of a keyboard warrior not reading the actual topic.

 

I have just re-done you code that will solve the issue. However it seem with the design partner in the image you are using Boostrap.. if you are using bootstrap please let us know which version you are using. Then we can help you in a better way.

<style>
  .boxes{margin-bottom: 5px;}
  .boxes .heh {
    display: block;
    float: left;
    width: 550px;
    height: 200px;
    border:1px solid black;
    background-color: #f5f5f5;
    border-radius: 1px;
    padding: 19px;
}
</style>

<div class="boxes">
  <div class="heh">
    <h3>Box Title One</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda!</p>
    <a href="http://backpack.tf/id/712">View Backpack</a><br>
    <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
  </div>
  <div class="heh">
    <h3>Box Title Two</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda!</p>
    <a href="http://backpack.tf/id/712">View Backpack</a><br>
    <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
  </div>
</div>

HTML:

 

<style>
div.heh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
border: .5px solid #e3e3e3;
border-radius: 1px;
padding: 19px;
margin-bottom: 5px;
min-height: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:left
float:left;
}
div.hehh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
border: .5px solid #e3e3e3;
border-radius: 1px;
padding: 19px;
margin-bottom: 5px;
min-height: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:right
float:right;
}

</style>

 

You can read bootstrap information about it:
http://getbootstrap.com/examples/grid/

Works very well with responsive designs.