Click to See Complete Forum and Search --> : How do I allign these beside each other?


livewire1974
02-16-2009, 01:26 PM
Hi,
I have 2 boxs, I want them beside each other, rather than one under the other

Here is the CSS

/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
margin: 1px;
width: 17em; /* ems so it will grow */
background: url(sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(sbhead-l.gif) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
background: url(sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}


and here is the html

<div class="sidebox">
<div class="boxhead"><h2>Test </h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another one.</p>
</div>
</div>
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another one.</p>
</div>
</div>



Thanks for your time.

snowieken
02-16-2009, 02:01 PM
<div class="sidebox" style="float:left;">

And your second div:

<div class="sidebox" style="float:right;">

You can of course also give two different classes to your divs and include the float property in your CSS.

livewire1974
02-16-2009, 02:22 PM
thanks for the help, I'm pretty new to CSS.