Page 1 of 1

div align >> help !!

Posted: Mon Jun 30, 2008 9:01 am
by Monopoly
Lets say i have a <div> tag ...

How can I align some text to the left and some to the right within the same <div> tag ??


Thank you

Re: div align >> help !!

Posted: Mon Jun 30, 2008 10:07 am
by matthijs
Wrap something around the text (another div, span, em, etc) and use either float (left and right) or text-align. Which method to choose depends a bit on the content and the rest of the styling.

Edit: you can even use positioning. Again, depends on other aspects which method suits the situation

Re: div align >> help !!

Posted: Mon Jun 30, 2008 11:59 am
by Monopoly
Well , I tried wrapping the text with divs (I tried both float:left/right and text-align:left/right) but it results that the text on the right begins on the next line or some other unwanted results...Can you please show me a simple example how to do it ?

Re: div align >> help !!

Posted: Mon Jun 30, 2008 12:43 pm
by matthijs
Two examples would be

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    
    <!-- Date: 2008-06-30 -->
    <style type="text/css" media="screen">
    body { background:#eee;}
        /* First example, using floats */
        #container { width:800px;margin:20px auto;background:#fff;height:100px;}
        .left { float:left;width:49%;}
        .right { float:right;width:49%;text-align:right; }
        /* second example, using positioning */
        h3 { position:relative;}
        h3 em { position:absolute;right:0;}
    </style>
</head>
<body>
<div id="container">
    <div class="left">
        <p>Left text</p>
    </div>
    <div class="right">
        <p>right text</p>
    </div>
    
    <h3>Some title <em>23/06</em></h3>
</div>
</body>
</html>
 

Re: div align >> help !!

Posted: Mon Jun 30, 2008 1:04 pm
by Monopoly
hmm , thanks , that cleared the problem for me :D


Another question : Is it possible to align divs from different vertical divs in column using the width attribute ? :oops:

Re: div align >> help !!

Posted: Mon Jun 30, 2008 1:32 pm
by matthijs
Yes, if I understand what you mean.