CSS/HTML Item Alignment Help

Rebtl · 05-28-2009, 01:31 PM

This has to be a simple solution to this, but I am a CSS noob.

I have 3 php call items that I want all on one line like so:

Item 1 | Item 2 | Item 3

but right now they show up as

Item 1
Item 2
Item 3

How can I fix this?

Here is the CSS

Quote:

.box2 {
background: #f0f0f0 url(img/hashbg.gif);
border: 1px solid #f1f1f1;
padding:1px 1px 1px 5px;
margin: 5px 5px 15px 5px;
font:10px/22px trebuchet ms, arial, verdana, helvetica, sans-serif;
color:#666;

}

and Here is the HTML/PHP calls

Quote:

<div class="box2">
<?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?> |<?php if(function_exists('the_ratings')) { the_ratings(); } ?> | More from <?php the_category(', ') ?>
</div> |

Any help would be greatly appreciated.

Thanks

Rebtl

pdjsolutions · 05-28-2009, 01:40 PM

try adding a height to your box2 , i think that might help,

Else another solution is to create a box2 with a particular height and width and create another div called boxin where the width is "box2" / 3 approx, so therefore it would be like

<div id=box2>
<div class="boxin>Item1</div> | <div class="boxin">Item2</div> | <div class="boxin">Item3 </div>

the height of boxin box2 should be the same.

I think this should work out.

If not mail me the files, and ill help you out with it.

Regards,
PDJSolutions

Rebtl · 05-28-2009, 01:53 PM

Hey, pdj,

Thanks again for helping me. I think your box solution would work, except

Since I posted, I have figured out there is more to the problem.

I am using wordpress, and the box I am adding things too is under the post content

Date | Comments | Categories | ....this sort of thing.

The final thing I am trying to add is a button that allows the reader to rate the post. This button is from a plugin.

Everything is aligned perfectly when I don't have the rating button on there.

But as soon I as I add it (just a php call) it drops down to the next line.

I have looked at the page source and I am pretty sure this is happening because the

plugin and php call is creating its own div in my box, but is not being controlled by the

.css.

I have no clue how to fix that.

Thanks again for any advice

Rebtl

pdjsolutions · 05-28-2009, 01:56 PM

Try adding a float to the div for the Rating thing

like a <div style-"float:right;"><THE RATING PLUGIN</div> or add a clear or something of that sort,

Maybe that should help.

Regards,
PDJSolutions

05-28-2009, 01:40 PM	#2
pdjsolutions Coding Expert !! :D War Room Member Join Date: May 2009 Location: India Posts: 178 Thanks: 14 Thanked 15 Times in 12 Posts Contact Info	Re: CSS/HTML Item Alignment Help try adding a height to your box2 , i think that might help, Else another solution is to create a box2 with a particular height and width and create another div called boxin where the width is "box2" / 3 approx, so therefore it would be like <div id=box2> <div class="boxin>Item1</div> \| <div class="boxin">Item2</div> \| <div class="boxin">Item3 </div> the height of boxin box2 should be the same. I think this should work out. If not mail me the files, and ill help you out with it. Regards, PDJSolutions

05-28-2009, 01:53 PM	#3
Rebtl HyperActive Warrior Join Date: Dec 2008 Location: U.S. Posts: 274 Thanks: 27 Thanked 17 Times in 12 Posts Contact Info	Re: CSS/HTML Item Alignment Help Hey, pdj, Thanks again for helping me. I think your box solution would work, except Since I posted, I have figured out there is more to the problem. I am using wordpress, and the box I am adding things too is under the post content Date \| Comments \| Categories \| ....this sort of thing. The final thing I am trying to add is a button that allows the reader to rate the post. This button is from a plugin. Everything is aligned perfectly when I don't have the rating button on there. But as soon I as I add it (just a php call) it drops down to the next line. I have looked at the page source and I am pretty sure this is happening because the plugin and php call is creating its own div in my box, but is not being controlled by the .css. I have no clue how to fix that. Thanks again for any advice Rebtl

05-28-2009, 01:56 PM	#4
pdjsolutions Coding Expert !! :D War Room Member Join Date: May 2009 Location: India Posts: 178 Thanks: 14 Thanked 15 Times in 12 Posts Contact Info	Re: CSS/HTML Item Alignment Help Try adding a float to the div for the Rating thing like a <div style-"float:right;"><THE RATING PLUGIN</div> or add a clear or something of that sort, Maybe that should help. Regards, PDJSolutions