Alignment...?

[seblake]

Me...again.

I appreciate the help I keep getting. Hopefully, I can reciprocate one day!

As you can ascertain from the jpg, I have two (I think) alignment problems. (I thought tables would be the better way to go...)
(1) I thought it would be better to have the boxes on the same heighth, but I can live with it the way it is...
(2) I was trying to get them evenly spaced horizontally. As you see, Box 1 and Box 3 contain the exact same text yet are different sizes.

And a spacing problem: I tried to drop the "Please..." line down a bit as you can see in the code. No luck whatsoever.

Do you think I'll ever learn this cr*p?? Would appreciate some help (again).

Thank you very much!

(Code follows)

< Steve >

...
Vista Lock & Safe Co<br />
</ul>
</span>
<br />
<h1>Testimonials</h1>
<br />
</div>

<div id="setMainRight" >
<table id="setMainRight">
<tr>
<td><span class="myBox" style="background-color: AliceBlue">"As a small business owner with ONE computer, it is an invaluable tool. It has to stay running, trouble free.  Max-Tech is my go-to guy for any and all computer problems.<br />
Sincerely,<br />
<strong>Lawrence & Son Mobile Locksmith Service</strong>"<br /></span>
</span></td>
<td><span class="myBox" style="background-color: PowderBlue">"Steve is very efficient and resourceful. We have an ongoing need for website development and were pleased to let Steve know what we needed and have him run with it. Communication with him is excellent along with his work. It is a relief to find someone to work with who is self-sufficient and knows what he is doing in the arena of website development and webpage posting."<br />
<strong>- Retirement DNA</strong><br /></span>
</span></td>
<td><span class="myBox" style="background-color: MistyRose">"As a small business owner with ONE computer, it is an invaluable tool. It has to stay running, trouble free.  Max-Tech is my go-to guy for any and all computer problems.<br />
Sincerely,<br />
<strong>Lawrence & Son Mobile Locksmith Service</strong>"<br /></span>
</span></td>
</tr>
<tr>
<td><span class="myBox" style="background-color: PaleGreen">"Steve is very efficient and resourceful. We have an ongoing need for website development and were pleased to let Steve know what we needed and have him run with it. Communication with him is excellent along with his work. It is a relief to find someone to work with who is self-sufficient and knows what he is doing in the arena of website development and webpage posting."<br />
<strong>- Retirement DNA</strong><br /></span>
</span></td>
<td><span class="myBox" style="background-color:Lavender">"As a small business owner with ONE computer, it is an invaluable tool. It has to stay running, trouble free.  Max-Tech is my go-to guy for any and all computer problems.<br />
Sincerely,<br />
<strong>Lawrence & Son Mobile Locksmith Service</strong>"<br /><br /></span><br /><br /><br /><br /><br /><br />
</span></td>
</tr>
</table>
<br />
</div>
<br />
<br />
<br />
<br />
<br />

<div class="verdana18ptBd" style="text-align:center" >Please<a href="contact.html" class="priv"><strong>Contact Us</strong></a>if we can help you.
</div>

CSS file:

...
#setMainRight {
	font:11pt Verdana, Arial, Helvetica, sans-serif;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: -15px;
	float: right;
}
...
.myBox {
	border: 2px solid black;
	margin: 5px ;
	padding: 10px 10px 10px 10px;	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: navy;
   	background-color: #FF9;
	float:left;
    
   	/* Do rounding (native in Opera, Firefox and Safari) */
   	border-radius: 10px 10px;
   	-webkit-border-radius: 10px 10px;
   	-moz-border-radius: 10px 10px;
}
...

[twiss]

Some tips (what I would do):
- Drop the table, you don't need it.
- Put every row in a div (and give them a class with position:relative)
- Put every box in a div and give them a (class with) 100% height and a fixed width (1/3 minus spacing)
- Make them float:left
- Give the Please.. box an ID and give it margin-top:20px or something.

[seblake]

Great! Easy to comprehend. And 20 for the top margin is right on! (I went without a table at first, but I didn't like what it gave me...) Thanks, twiss!

I did as you suggested. I do understand everything - and I think I have a pretty good understanding of nested divz. Except...I cannot seem to center the Please - or the last two boxes. I even put the Please into the same type of row... There is no position: center. ;) Maybe I need a little explanation as well... (cuz I'm cornfuzed...:confused:)

Thank y'all very much!

< Steve >

The HTML code (most text cut-out):

<h1>Testimonials</h1>
<br />
</div>  <!--  End setMain  -->

<div id="setMainRight" >
<div id="setTestiRow" >
<div class="myTestiBox" style="background-color: AliceBlue">"As a small business owner <br /></div>
<div class="myTestiBox" style="background-color: PowderBlue">"Steve is very <br /></div>
<div class="myTestiBox"  style="background-color: MistyRose">"As a small business owner <br /></div>
</div>  <!-- End setTestiRow -->

<div id="setTestiRow" align="center" >
<div class="myTestiBox" style="background-color: PaleGreen">"Steve is very efficient <br /></div>
<div class="myTestiBox" style="background-color:Lavender">"As a small business <br /></div>
</div>  <!-- End setTestiRow -->
</div>  <!-- End setMainRight -->

<div id="setTestiRow" align="center" >
<div id="please" >
<div class="verdana18ptBd" >Please<a href="contact.html" class="priv"><strong>Contact Us</strong></a>if we can help you.</div><br /><br />
</div>  <!-- End please -->
</div>  <!-- End setTestiRow -->

<!-- Footer -->
<div class="footer">

The CSS code:

#setMainRight {
	font-family: 11pt Verdana, Arial, Helvetica, sans-serif;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: -15px;
	float: left;
}

#setTestiRow {
	font-family: 11pt Verdana, Arial, Helvetica, sans-serif;
	position: relative;
	float: left;
}

.myTestiBox {
	height: 100%;
	width: 275px;
	border: 3px ridge black;
	margin: 10px;
	padding: 10px 10px 10px 10px;	
	color: navy;
   	background-color: #FF9;
	float: left;
    
   	/* Do rounding (native in Opera, Firefox and Safari) */
   	border-radius: 20px 20px;
   	-webkit-border-radius: 20px 20px;
   	-moz-border-radius: 20px 20px;
}

#please {
	margin-top: 20px;
}

[twiss]

Just change the margin-top to margin:20px auto 0; . That sets an automatic (equal) margin left and right.

[seblake]

Thanks, again.

I must not be doing it correctly. I changed the div please to margin: 20px auto 0px. It still isn't centered.

How do I change the div for the row to center the last box(es)? (See code below)

I apologize if I'm being too thick-headed...I just can't seem to get it working...

Appreciate your time!

< Steve >

#setTestiRow {
	font-family: 11pt Verdana, Arial, Helvetica, sans-serif;
	position: relative;
	float: left;
}

[twiss]

I think I understood your question wrong. Anyway, every div you want centered should have a margin left and right of auto. Also, give the rows a class instead of an id. You can also give them an extra class for the margins, if that's handy.

[seblake]

Thanks, twiss. I do appreciate your time!

I changed the row divs to class instead of id. May I ask what different results should I expect?

I also set the L & R margins to auto. (see code below) Whether I keep the position:relative in the class or not, the last row and the "please" are not centered. What next?

Do appreciate your efforts! Thanks!!

< Steve >

.setTestiRow {
	font-family: 11pt Verdana, Arial, Helvetica, sans-serif;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	float: left;
}
#please {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

[seblake]

Twiss!

I got the Please line to look right. Changed it to a class, added text-align and clear. Still working on the second row of boxes... Did you get anywhere with them?

Appreciate your help!!

< Steve >

.please {
	margin-top: 500px;
	text-align: center;
	clear: both;
}

[Azmah]

Are you trying to get text or box centred? Until I'm sure, I can't really give advice.

[seblake]

Already got the text centered; just trying to center the boxes. And trying...and trying...and...

Thanks!

[twiss]

You should probably give it a width:auto or display:inline-block . An ID, to answer your question, must be unique. A class, however, can be applied to multiple elements.

[ko ko]

<div id="setTestiRow" >

'id' is unique id for CSS selector and you must identified only one element in one document.

<div id="setTestiRow" align="center" >

Remove 'align="center"'.

[Azmah]

try the margin and padding properties in css and set them to auto or manually adjust their positioning using % or pixels. You could also try the position and float properties to position it - Though I'm not the float and position may help :/

I'll also have a better look at your code.

[seblake]

Do appreciate all of the help!

Is there a Rule of Thumb or some cheat sheet showing the results or comparisons of different changes? I can do Trial & Error all day (as I have been) but I get to the point where I am duplicating what I have already done - because I have done it for so long. Punch-drunk, as it were...

When I coded (albeit, a long time ago), I could easily write a routine to place anything in the middle: 1/2screenwidth - 1/2objectwidth and that's where to place it. All of this "new" WYSIWYG doesn't seem to be easier...

Thanks.

< Steve >

[Azmah]

Hang on, what editor are you using? Because that might help you.

[seblake]

I'm using DreamWeaver CS4, but I occasionally use Notepad.