Is there a way?

[ChatBox]

I've got a headache after trying to figure this out so maybe you guys can help 😀 I'm trying to have at least four in the same line of this coding.

<div class="sidebox">
<div class="boxhead"><h2>Numbers</h2></div>
<div class="boxbody">
12345678910
</div></div>

The CSS is

<style type="text/css">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
margin: 0 auto; /* center for now */
width: 17em; /* ems so it will grow */
background: url(http://www.vertexwerks.com/tests/sidebox/sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(http://www.vertexwerks.com/tests/sidebox/sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(http://www.vertexwerks.com/tests/sidebox/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(http://www.vertexwerks.com/tests/sidebox/sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}

</style>

Is there a way they can be on the same line across the page? Whatever I try and do it just goes down the page. :'(

 

[Bapinder]

Try This.
Just increase the width.

CSS

<style type="text/css">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
margin: 0 auto; /* center for now */
width: 17em; /* ems so it will grow */
background: url(http://www.vertexwerks.com/tests/sidebox/sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
width: 500px;
}
.boxhead {
background: url(http://www.vertexwerks.com/tests/sidebox/sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
width: 500px;
text-align: center;
}
.boxhead h2 {
background: url(http://www.vertexwerks.com/tests/sidebox/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(http://www.vertexwerks.com/tests/sidebox/sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 68px 31px;
}
</style>

HTML

<div class="sidebox">
<div class="boxhead"><h2>Numbers</h2></div>
<div class="boxbody">
12345678910
12345678910
12345678910
12345678910
</div></div>

 

[JamesD31]

What are you trying to have go across the whole page? THe whole "sidebox"? If so, do this..

CSS

.sidebox {
margin: 0 auto; /* center for now */
width: 17em; /* ems so it will grow */
background: url(http://www.vertexwerks.com/tests/sidebox/sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
float: left;
}
.boxhead {
background: url(http://www.vertexwerks.com/tests/sidebox/sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(http://www.vertexwerks.com/tests/sidebox/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(http://www.vertexwerks.com/tests/sidebox/sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}