ansaurus

Question

CSS Positioning Help

Answer 1

A:

Look into float link text

n8wrl 2010-10-05 19:30:16

Answer 2

+2 A:

<div>
  <div style="float:left;border:solid 1px black;">
    Some text
  </div>
  <div style="border:solid 1px black;">
    More text
  </div>
</div>

Is this what you're looking for?

Keith 2010-10-05 19:31:56

Thanks....it worked.

Sarthak Srivastava 2010-10-06 12:07:42

Answer 3

A:

There are several options, depending on the situation:

use floats: float: left on the left container, float: right on the right container
make them inline elements or inline blocks - display: inline-block can do wonders
use absolute positioning, combined with the left and right properties

tdammers 2010-10-05 19:33:17

Answer 4

A:

Maybe something like this:

<html><head>
<style type="text/css">

#content{
    border:2px solid #999;
    padding:10px;
}
.titlebox{
    float:left;
    padding:0 5px;
    margin:-20px 0 0 30px;
    background:#fff;
}
</style></head><body>

<div id="content">
    <div class="titlebox">Title</div>
    <p>Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit.</p>
</div>
</body></html>

can be a good start for you. The example only places text on left side by exploiting a negative top margin but it should be easy to customize it! (taken from here)

You could split .titlebox in two parts by having a right aligned subcomponent (text-align: right) on which you have the right title

Jack 2010-10-05 19:33:37

ansaurus

tags:

views:

answers:

CSS Positioning Help

related questions