wishing to have 'hello' to the left and 'world' to the right of the same line

[jasonc]

the following code seems to center all the text

 

wishing to have 'hello' to the left and 'world' to the right of the same line

 

<div style="display: inline;">
<div style="display: inline; text-align: left;">hello</div>
<div style="display: inline; text-align: right;">world</div>
</div>

[haku]

'Of' the same line, or 'in' the same line? If it's 'of', I don't really get what you are asking. But if it's 'in', you can do this:

 

<p id="the_line"><span class="left">hello</span><span class="right">world</span></p>

 

CSS:

#the_line
{
   position: relative;
}
.left
{
  float: left;
}
.right
{
  float: right;
}

[TheFilmGod]

'Of' the same line, or 'in' the same line? If it's 'of', I don't really get what you are asking. But if it's 'in', you can do this:

 

<p id="the_line"><span class="left">hello</span><span class="right">world</span></p>

 

CSS:

#the_line
{
   position: relative;
}
.left
{
  float: left;
}
.right
{
  float: right;
}

 

Although this code might it work, it isn't semantically correct. You should always enclose text with a block level text tag such as <p> or <h3>. <span> is inline. I understand that the author originally posted code with the declaration of "display: inline;" but that is incorrect!

 

This is the proper way of coding it.

 

#the_line p.left {

float: left;

}

#the_line p.right {

float: right;

}

#the_line .clear {

clear: both;s

}

 

<div id="the_line">

<p class="left">Left</p>

<p class="right">Right</p>

<div class="clear"></div>

</div>

 

I encourage you to use "clearfix" instead of adding the extra div to clear the floats, but for the sake of simplicity I added the extra div in!

 

Hope that helps! 

[haku]

The text WAS enclosed in a p tag. And since it was one statement 'hello world', to enclose it in two extra p tags for the sake of splitting it up, is both adding extra unnecessary markup, as well as making it semantically incorrect, since it isn't two paragraphs, it is one. As such, adding spans is the correct semantic markup, since the mark up for those tags is only spanning those words, not creating new paragraphs.

 

On top of this, you are adding the clearing div, which is also unnecessary non-semantic markup. This can be done better through the clearfix you speak of, or even better than that, through adding overflow:auto to the containing div.

 

I generally agree with what you say, but almost everything you posted this time was wrong.