Spacers are bad-How to line up text?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
How do I push a few lines of text to the right, so it lines up?

I have a page with text and photos. The first photo is on the right, the 2nd is on the left of the text. The text flows around the graphic, probably doing what I would normally want.

However, on this particular page, the text to the right of the 2nd photo is a list.

The problem is: After the photo, the list items are shown UNDER the photo.

What I want: I want the list to continue and be lined up on the right.
I want the last item (or the last 3 items) to line up with the first 10 items.  
That would leave a white space under the photo, but I think that's OK for a small area.  

Here's the link:

I thought about  using an invisible spacer to push the text over, but I would prefer to do it a better way. How would I do that?

Thank you!

Re: Spacers are bad-How to line up text?

On 5/6/2015 5:03 PM, Bill wrote:
Quoted text here. Click to load it

What you need is to put the text into a container.  The div element --
<div> text </div> can suffice.  But then you must align the container.
Go to my < and view the source
HTML.  You will see the appropriate container around the table for
rainfall, from line 106 to line 130.  Yes, rainfall is in a table; but
that is not relevant.  What is relevant is the container in which the
table sits.

David E. Ross

Why do we tolerate political leaders who
spend more time belittling hungry children
than they do trying to fix the problem of
hunger?  <

Re: Spacers are bad-How to line up text?

On Wed, 6 May 2015 17:03:03 -0700 (PDT), Bill wrote:

Quoted text here. Click to load it

Two divisions inside a container.
One for the image, the other for the text.

<div id="container">

Re: Spacers are bad-How to line up text?

On 7.5.2015 3:03, Bill wrote:
Quoted text here. Click to load it

What you have there is not a list (in the HTML sense), but a paragraph  
with several line breaks.

Quoted text here. Click to load it

A quick fix:

Add a container, say a DIV, for the two paragraphs after:

<div class="picture left"...</div>

Something like the following:

<div style="float:right;width:55%">
     <p>We would also like to thank the following ...</p>
     <p>Barnes and Noble, Emery Bay, Emeryville<br>...</p>

And then modify the following HR:

<hr style="height:1px;...>

By adding a clear property, say:

<hr style="clear:both;height:1px;...>

And perhaps changing the HR's width property from 48% to 100% or  
something similar.

Best wishes, Osmo

Re: Spacers are bad-How to line up text?

On 07/05/2015 01:03, Bill wrote:
Quoted text here. Click to load it
Hi there,

If I understand correctly - you are refering to the 'list' beginning  
with "Barnes and Noble, Emery Bay, Emeryville" and ending with "Peet’s  
Coffee and Tea, 878 B Street, Hayward ".

- and you want the text to be with a consistent left-edge below the image.

Assuming this is correct you could -

1) Put the image and the relevent text in a table with no margins,  
borders or cell-spacings etc. An 'invisible table'.
This is the easiest way, but the most improper from a proper-standards  
school-of-thought. Some people would sneer at you for it. ;)

2) For the better way, use the following HTML and CSS -

2.a) The HTML -

<div class="outer_container">
   <div class="inner_left_container">
     [image box HTML]
   <div class="inner_right_container">
     [textual HTML]
   <br class="clear_both">

2.b) The CSS -

.outer_container {}
.inner_left_container {float: left; width:200px;}
.inner_right_container {margin-left: 210px;}

Obviously the '200px' and '210px' is just a starting-point; you should  
change that to whatever fits your page layout correctly.

I made the margin-left propery 10px larger the create a 10px gap between  
the right-edge of the left-column, and the left edge of the right-column.
Simply so the text is not positioned immediately against the image. You  
could make it a bigger difference if that looks better.

Just remember - if you change the width of the left container to, say  
'280px', the you should change the margin-left property of the  
right-container to '290px' also.

Note. the 'clear_both' <br> element is to ensure that following content  
appears after both left and right containers.

Note: you could obviously ommit the 'outer-container' class from the  
HTML and the CSS, I just put it in there for completeness. :)
Perhaps you might want to add 'margin-top' and 'margin-bottom'  
properties to the 'outer_container' class - have a try and see if you  
need any extra top/bottom spacing.

Note: the CSS inside the <style> element could be put in a seperate  
style-sheet file (.css), if not then you should put the <style> element  
inside the document <head> element.

In conclusion: I tried this HTML/CSS combination for myself. It seems  
fine but please let me know if you find any error/problem with it - I  
have made mistakes before. :)

Re: Spacers are bad-How to line up text?

On 5/6/2015 8:03 PM, Bill wrote:
Quoted text here. Click to load it

<div style="margin-left:338px;">
<p>We would also like to thank .....
Peet’s Coffee and Tea, 878 B Street, Hayward</p>


Site Timeline