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



Question:

I wish to produce the following layout within a header div on my page, using CSS only

  +-----------+  +           +  +  Image    + Title text                         Some text aligned on the right  +           +  +-----------+  

I am having trouble aligning the text on the right. It keeps aligning immediately to the right and one line below the title text, like this

  +-----------+  +           +  +  Image    + Title text                           +           +            Some text aligned on the right  +-----------+  

This is my current markup.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      <html>        <head>          <style type="text/css">            #header, #footer { padding: 0.3em 0; border-bottom: 1px solid; }            #header img   { display: inline;}            #header h1    { display: inline; margin: 0px; padding: 0px;                           vertical-align: 50%; position: left;}            #login-status { margin: 0px; padding: 0px;                           display: inline;text-align: right; position: right;}          </style>            <title>Models</title>                    </head>          <body>            <div id="header">              <img alt="Logo" height="110" width="276"               src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" />              <h1>Models</h1>              <p id="login-status">You are currently logged in as steve</p>            </div> <!-- end of header -->          </body>        </html>   

I had expected the inline styling to not cause a line break after the h1 element but this is not the case. Can anyone suggest what I am doing wrong?


Solution:1

#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.


Solution:2

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.


Solution:3

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


Solution:4

Use "float:right;"


Solution:5

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">      <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>    

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »