CODEWITHSUNDEEP
htmlcss
Manuel Selva
Manuel Selva

Reputation: 19050

How to align to text blocks differently inline in the same containing element?

I have a <div> element containing two blocks of text. One block is aligned in the center of the element, and I would like to align the second block to the right.

The page on which I am trying to do this can be seen here.

I have tried creating an inner <div> element in the footer with floating the second block of text and applying float: right to it. The problem with this solution is that the text first (centered) text element is now aligned in the center of the remaining space, minus the width of the floated <div>, instead of centered in the containing element.

Here is the code I have tried:

<div id="footer">
      <div id="Valid">
          Valid <a href="http://validator.w3.org/check/referer">HTML</a>
          and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
      </div>
  <div id="modified">
         Last modified ...
      </div>
</div>

How can I get the two text blocks to display in the positions I desire?

EDIT: I am setting up an http://jsfiddle.net/ example (suggested SSCCE seems down at the moment)

Here is the example http://jsfiddle.net/vjmVc/ I also tried with two nested div elements without success

Upvotes: 1

Views: 300

Answers (3)

PeeHaa
PeeHaa

Reputation: 72662

If you want to prevent the right part of taking up the space you can position it absolute. The only thing you would have to keep in mind in that case is set the positioning of the container element (footer) to relative: http://jsfiddle.net/vjmVc/1/

Also keep in mind that when people have a small screen the two element may overlap at some point using this solution.

Upvotes: 1

Jawad
Jawad

Reputation: 6672

First, Add a proper DOCTYPE. You page is loading in quirks mode.

<!DOCTYPE html>

Or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For the text

#footer
{
text-align: right;
}

For the alignment

#all
{
margin: 0 auto;
}

EDIT

#footer
{
position: relative;
}

#modified
{
position: absolute;
top: 0;
right: 0;
}

Upvotes: -1

Toping
Toping

Reputation: 755

display: inline; float: right; n the elements inside the div but this way you ill need to invert the order of the texts.

Upvotes: 1

Related Questions