Help with CSS

Hello,

I don't understand CSS very well, and I'm trying to add two columns to my footer. I can do it with tables but maybe you can help me doing in right way!

First the code I have in footer:

Image of my actual footer:


Now as I wont it:


Thank you,
Vitor

 

You can do it like this:

<div id="footer">
<div style="padding-top:10px; float: left">image 1</div>
<div style="padding-top:10px; float: right">image 2</div>
<div style="padding-top:10px;">
<span class="cr_text">powered_by</span>
<a title="powered_by xxxxx1" href="www.xxxx.com"><small>XXXXXX</small></a>
<div style="text-align: center; margin: 0 0 8px;" class="cr_text">design by xxxxxx</small></a></div>
</div>
</div>

Code (markup):

 

First and foremost, never use inline styles. The point of CSS is to have all the content in one CSS file so you can change something, footer for instance, with one file. By doing inline styles you are not utilizing CSS to it's maximum capacity.

CSS File

#leftFooterText
{
 width:200px;
 height:30px;
 float:left;
}

#centerFooterText
{
 width:400px;
 height:30px;
 float:left;
 text-align:center;
}

#rightFooterText
{
 width:200px;
 height:30px;
 float:right;
}

Code (markup):

HTML Code

 <div id="leftFooterText">put your button here</div>

 <div id="centerFooterText">put your disclaimer here</div>

 <div id="rightFooterText">put your button here</div>

Code (markup):

Note: this will have to be tweaked to match the width and height of your footer and you will have to play around with padding and margin. If you have any questions, feel free to PM me.

 

Thank you both!

Best of all: I understand how it woks!

 

Also, don't throw div's around elements that don't need div. Waste of markup.

<div id="footer">
	<img
		src="images/image1.png"
		alt="first image"
		class="first"
	/>
	<img src="images/image2.png"
		alt="second image"
		class="second"
	/>
	<a href="www.xxxx.com"><span>powered_by</span>XXXXXX</a>
	design by xxxxxx
</div>

Code (markup):

Provides MORE than enough hooks for the CSS to do everything you are doing there. It's also a bad idea to waste time on 'title' when you can just put the entire text in the anchor; as a rule of thumb if you "need" title on an anchor, you have the wrong text in the anchor.