Div alignments when using corner images

[Deepa Pillai]

I need curved images around the corner ,and am using below code ,

<div class="lfcorner">
<div class="rtcorner">
<div class="lttopcorner">
<div class="toprtcorner">
<div>
<div>AA </div>
<div>BB </div>
</div>
</div>
</div>
</div>
</div>

css for above code,

.btmlfcorner {background: url(lfcorner.gif) 0 100% no-repeat #FFFFFF; }
.btmlrtcorner {background: url(rtcorner.gif) 100% 100% no-repeat}
.lttopcorner {background: url(lttopcorner.gif) 0 0 no-repeat}
.toprtcorner {background: url(oprtcorner.gif) 100% 0 no-repeat; padding:10px}

I need text AA and BB to align in one line ,but BB is moving to next line.If i use the span and with position absolute it works , but i need to achieve this using div.

Please let me know where am going wrong in building images for corners or getting text aligned.


Thanks,
Deepa

[Katrina Owen]

Hi Deepa,

It looks like you are trying to use divs to replace table cells in a one-to-one map. My guess (even without knowing more about what you are trying to achieve) is that there is an easier way.

div elements are usually block elements by default, and span elements are inline elements.

You can use CSS to tell span elements to display as block elements and div elements to display inline, however if you could post a link to an image of what you are trying to achieve, we might be able to help you do so in an easier way.

Katrina