?
Solved

CSS float issue

Posted on 2011-03-16
9
Medium Priority
?
319 Views
Last Modified: 2012-05-11
Hi,

With the code posted, how can I get this line aligned to the left:
<?php echo "There are $numPhotos photos total for this event"; ?>

and the rest on the right?

Thanks!
<style type="text/css">
.bold_right {
font-weight: bold;
font-size: 14px;
}

.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
}
</style>

<span class="float_right_PN">
	<?php echo "There are $numPhotos photos total for this event"; ?><span class="bold_right">Page Navigation</span>
	<?
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo '<span class="page_button_active"> ' . $i . '</span>';
		else
			echo '<span class="page_button"><a href="event.php?group=' . $group . '&event=' . $event .'&page=' . $i . '"> ' . $i . '</a></span>';
	}

	?>

Open in new window

0
Comment
Question by:Computer Guy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151313
.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
}

add text-align: left;
?
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151319
AND set a fixed width of this container - example: 300px;
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35151400
When you say width, you mean this?

.float_right_PN {
float:right;
width:450px;
margin-bottom:3px;
margin-right:22px;
text-align: left;
}
Didn't do anything
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151490
Can you show more of the page ?
Wrap the "there are ... photos..." inside a div.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35151532
Like this?

.left{
text-align: left;
}

<div class="left"><?php echo "There are $numPhotos photos total for this event"; ?>

0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35151768
You may try even to float it left
.left{
text-align: left;
float: left;
clear: right;
}
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35152080
Hi,

Please see the attached image so you have an idea of whats going on.

The width of the area I want to cover is about 900px, so I set that fixed.

I also posted my code since it's been updated a tad.

Thanks!

My SUDO code
<left>Number of Photos Here</left>                                        <right> Page Navigation 1, 2, 3</right>
<style type="text/css">
.page_button 
{
	background:url(gallery/images/TEST_IMAGES/page.png);
    display:inline-block;	
    height: 27px;
	color: #FFF;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}

.page_button:hover {
background:url(gallery/images/TEST_IMAGES/page-hover.png);
color:#FFF
	}
	.page_button_active {
background:url(gallery/images/TEST_IMAGES/page-active.png);
    display:inline-block;	
    height: 27px;
	color: #000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}
	
.page_button a {
color:#fff;}

.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
text-align:left;
width:850px;
}
.bold_right {
font-weight: bold;
font-size: 14px;
}
.num_left{
text-align: left;
float: left;
clear: right;
} 

</style>

<span class="float_right_PN">
	<div class="num_left"><?php echo "There are $numPhotos photos total for this event"; ?></div><span class="bold_right">Page Navigation</span>
	<?
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo '<span class="page_button_active"> ' . $i . '</span>';
		else
			echo '<span class="page_button"><a href="event.php?group=' . $group . '&event=' . $event .'&page=' . $i . '"> ' . $i . '</a></span>';
	}

	?>

Open in new window

Results2.PNG
0
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 2000 total points
ID: 35154237
Try this:



<style type="text/css">
.page_button 
{
	background:url(gallery/images/TEST_IMAGES/page.png);
    display:inline-block;	
    height: 27px;
	color: #FFF;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}

.page_button:hover {
background:url(gallery/images/TEST_IMAGES/page-hover.png);
color:#FFF
	}
	.page_button_active {
background:url(gallery/images/TEST_IMAGES/page-active.png);
    display:inline-block;	
    height: 27px;
	color: #000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 14px;
	font-weight: bold !important;
	text-decoration: none;
    text-align:center;
    margin-top: 3px;
	line-height:27px;
    padding:0 12px 0 12px;
	border: 1px solid #000000;	}
	
.page_button a {
color:#fff;}

.float_right_PN {
float:right;
margin-bottom:3px;
margin-right:22px;
text-align:left;
width:850px;
border : 1px solid black;
}
.bold_right {
font-weight: bold;
font-size: 14px;
float: right;
}
.num_left{
text-align: left;
float: left;

} 
.clear{ clear: both;}

</style>


<span class="float_right_PN">
	<div class="num_left"><?php echo "There are $numPhotos photos total for this event"; ?></div>
	<div class="bold_right">Page Navigation</div>
	<div class="clear" />
	<?
	for ($i = 1; $i <= $pages; $i++) {
		if ($i > 1)
			echo '&nbsp;';
		if ($i == $page)
			echo '<span class="page_button_active"> ' . $i . '</span>';
		else
			echo '<span class="page_button"><a href="event.php?group=' . $group . '&event=' . $event .'&page=' . $i . '"> ' . $i . '</a></span>';
	}

	?>

Open in new window

     
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35155162
Did the trick
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month15 days, 17 hours left to enroll

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question