ansaurus

Question

How do I align text on the right using css when in a div with block elements

Answer 1

A:

Use "float:right;"

Albert 2009-03-28 12:28:04

I had tried that but it then renders outside of the div and after it.

Steve Weet 2009-03-28 12:32:15

Answer 2

A:

img  float: left;  title text  float: left;    some text   float: right;

Darth 2009-03-28 12:34:42

Answer 3

+3 A:

You will most likely have to do something like this...

<head>
    <style type="text/css">
        #header, #footer
        {
            padding: 0.3em 0;
            border-bottom: 1px solid;
        }
        #login-status
        {
            margin: 0px;
            padding: 0px;
            line-height: 110px;
            vertical-align: middle;
        }
    </style>
    <title>Models</title>
</head>
<body>
    <div id="header">
        <div style="float: left">
            <img alt="Logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" style="width: 276px;
                height: 110px" />
        </div>
        <div style="float: left; margin: 0px 8px 0px 8px; 
            line-height: 110px; vertical-align: middle;">
            <h1>Models</h1>
        </div>
        <div id="login-status" style="float: right;">
            You are currently logged in as steve
        </div>
        <div style="clear: both">
        </div>
    </div>
    <!-- end of header -->
</body>

The "Clear" will be needed somewhere in order to clear your floating, but it could be applied to another div tag that would follow your header instead of being included in the header.

Note... I changed this up a bit to get the text areas that are to the right of the image to be vertically aligned "middle". You can change the styling to be css based, but this should acheive what you were looking for.

Bryan Sebastian 2009-03-28 12:37:23

+1 Thankyou. That will certainly work. I'm trying to avoid the extra markup if I can avoid it.

Steve Weet 2009-03-28 13:01:21

Thanks Steve, glad my suggestion helped... good luck with your project!!!

Bryan Sebastian 2009-03-28 13:04:36

Answer 4

+6 A:

#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; }  
    #header img   { float: left;}  
    #header h1    { float: left; margin: 0px; padding: 0px; }  
    #login-status { margin: 0px; padding: 0px; float: right; }

There's no need for extra divs around the elements or a clearing div when floating. I use the above technique regularly to do exactly what you're trying to do. overflow:hidden; makes the header clear the floats, but if there is no width specified you will need zoom: 1; for IE6. zoom doesn't validate, but it works flawlessly, and you can add it to an ie6 only css file if need be.

Justin Lucente 2009-03-28 13:59:30

Thanks Justin, that works perfectly. I had arrived at another solution using absolute posistioning from the right but the works for me.

Steve Weet 2009-03-28 14:06:38

That is a nice elegant solution Justin... and it satifies Steve's desire to use less mark up. I like it!!!

Bryan Sebastian 2009-03-28 14:21:00

Answer 5

A:

I played around with this a little more as the css using zoom and non-sized floats both failed validation. I also did not like the login status being shown vertically centred.

The final solution that I have arrived at (with much cribbing from Bryan) is as follows :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>  
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />  
      <style type="text/css">  
        #header, 
        #footer       { padding: 0.3em 0; border-bottom: 1px solid; 
                        height: 110px; }  
        #header img   { margin: 0px; padding: 0px; display: inline; }  
        #header h1    { line-height: 110px; vertical-align: middle; 
                        display: inline; position: absolute; left: 300px; 
                        margin: 0px; }  
        #login_status { font-size: 14px; margin: 0px; position: absolute; 
                        top: 100px; right: 10px; display: inline; 
                        text-align: right; }  
    </style>  
    <title>Models</title>     
  </head>  
  <body>  
    <div id="header">  
      <img alt="Logo" height="110" 
        src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" />   
      <h1>Models</h1>  
      <span id="login_status">You are currently logged in as stevew</span>    
    </div> <!-- end of header -->  
  </body>  
</html>

Steve Weet 2009-03-28 19:14:47

ansaurus

tags:

views:

answers:

How do I align text on the right using css when in a div with block elements

related questions