logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-21-2012, 01:57 PM   #1
pamr
 
Join Date: May 2012
Posts: 6
Default Aligning Bottom of Three Columns

Right now, I'm working on the most basic of basic website using Dreamweaver CS5 and CSS. I attached what the layout should look like. I'm having major issues with those three boxes underneath the featured image. No matter what I do (add padding to the image numbers, make the image number larger in Photoshop with a bunch of white space at the bottom, etc.), I can't get them to line up equally. Here is the relevant code from the HTML page:

<div id="left_column">
<h2><img src="images/1.png" height="220" align="left"/>You've had an accident and it wasn't your fault</h2>
<p>Chances are a worryfreeclaims representative has already been in contact and qualified you for the program. You're ready to get started.</p>
</div>
<div id="center_column">
<h2><img src="images/2.png" height="220" align="left"/>Your car goes to one of our qualified shops</h2>
<p>Our nationwide network of qualified shops means you are being serviced by one of the best body shops in your area. And work is guaranteed.</p>
</div>
<div id="right_column">
<h2><img src="images/3.png" width="95" height="238" align="left" />Your car is fixed, no fuss, no hassle</h2>
<p>Your repairs will be completed and your car will be back to it's pre-accident condition. It's worry free!</p>
</div>



Here is the CSS code:

#left_column, #center_column, #right_column {
width: 290px;
float:left;
padding: 10px 10px 10px 10px;
border:2px solid #85c441;
-moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;
}
#center_column, #right_column {
margin-left: 10px;
}


Any ideas? This is making me crazy! Thank you so much in advance
Attached Images
File Type: jpg website-widgets.jpg (68.9 KB, 4 views)
pamr is offline   Reply With Quote
Old 05-22-2012, 12:01 AM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

I took the image out of the h2 tag and deleted the 'align: left' (is deprecated). I gave the img a float: left in the CSS and I guess you will need to adjust some more things to meet the design, but you have a beginning now.

http://dabblet.com/gist/2765452
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-22-2012, 07:18 PM   #3
pamr
 
Join Date: May 2012
Posts: 6
Default

Thank you so much!!
pamr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:59 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com