Solved

How can I get this div to float to the right properly?

Posted on 2013-11-30
4
224 Views
Last Modified: 2013-11-30
Attached is a screenshot of a site I'm working on. I need to have the text wrap around the white container that you see in the image. Problem is, although I have it "floating" to the right, the surrounding text doesn't wrap correctly and I don't know why.

Screenshot is attached. My stylesheet and HTML are below as well.

HTML (line 19 is my dilemma):

<?php require_once('satellite_header.php'); ?>
<?php require_once('left_column_satellite.php'); ?>
<?php require_once('special_scripts.php'); ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
	tip = $(this).find('.tip');
        var leftIndent = ($(this).offset().left - $('#satellite_body_text').offset().left) + $(this).width();
	var topIndent =  ($(this).offset().top - $('#satellite_body_text').offset().top);
	tip.css({ top: topIndent, left: leftIndent});
	tip.show(); //Show tooltip
}, function() {
	tip.hide(); //Hide tooltip
})
});  
</script>
<div id="satellite_body_text"><div id="program_calendar"></div>
<?php
$jorja="select * from programs where id='$_GET[id]'";
$jorja_query=mysqli_query($cxn, $jorja)
or die("Couldn't execute query.");
$jorja_row=mysqli_fetch_assoc($jorja_query);
extract($jorja_row);

$the_page_name=stripslashes($jorja_row['name']);

?>
<div id="satellite_title"><?php echo stripslashes($the_page_name); ?></div>
<HR>
<P>
<?php 
if($jorja_row['id']==7)
{
?>
<table cellspacing="3" cellpadding="3" align="left"><tr><td><A HREF="pastor_student.php" class="tip_trigger"><IMG SRC="Photos/news/news_thumbs/Carlisle_Staff_Photo.JPG" border="0" align="left">
<span class="tip">Be sure to click on Carlisle's picture to read some devotional thoughts geared specifically for Student Ministry...</span></a></td></tr></table>
<P>
<?php echo stripslashes($jorja_row['description']);
}
	elseif($jorja_row['id']==8)
	{
	?>
	<table cellspacing="3" cellpadding="3" align="left"><tr><td><A HREF="pastor_children.php" class="tip_trigger"><IMG SRC="Photos/news/news_thumbs/dodd.jpg" border="0" align="left">
<span class="tip">Be sure to click on J-Rae's's picture to read some devotional thoughts geared specifically for Children's Ministry...</span></a></td></tr></table>
	<P>
	<?php echo stripslashes($jorja_row['description']);
	}
else
{
echo stripslashes($jorja_row['description']);
}
?>
</div>
</div>
<?php include('footer.php'); ?>	

Open in new window


Stylesheet (satellite_body_text and program_calendar are the two containers that I'm trying to get to behave):

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#202740;
}

body.staff_display {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 500px;
	margin: 0;
	background-color:#ffffff;
}

#body_tray {
position:relative;
width:997px;
height:815px;
margin:auto;
padding:25px;
}

#header {
position:relative;
margin:auto;
height:236px;
width:997px;
background-image:url(images/header.png);
background-repeat:no-repeat;
}

#header_link {
position:absolute;
margin-left:35px;
margin-top:30px;
width:600px;
height:173px;
}

#social_media {
position:absolute;
width:244px;
height:48px;
margin-top:35px;
margin-left:725px;
}

#search_box {
position:absolute;
z-index:2;
margin-left:820px;
margin-top:175px;
}

table.form {
border-spacing:0;
border-collapse:collapse;
background-color:#ffffff;
}

td.form {
vertical-align:bottom;
}

td.right {
text-align:right;
}

table.nav {
border-collapse:collapse;
border-spacing:0;
}

form.search {
display:inline;
}

#nav_bar {
float:left;
position:relative;
margin:auto;
width:997px;
height:38px;
background-image:url(images/nav_bar.png);
background-repeat:no-repeat;
}

#navcontainer {
width:997px;
height:38px;
margin:auto;
margin-top:-17px;
padding-left:25px;
}

#navcontainer ul {
padding: 0;
list-style-type: none;
line-height:38px;
}

#navcontainer ul li { 
position:relative;
display: block;
float:left; 
z-index:10;
}

#navcontainer ul li:hover > ul 
{
display: block;
}

#navcontainer ul li a
{
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 18px;
color:#493417;
font-weight:bold;
text-decoration: none;
padding-left:35px;
padding-right:35px;
display:block;
}

#navcontainer ul li a:hover
{
color: #4b7235;
}

#navcontainer ul ul {
display: none;
margin-top:-1px;
margin-left: 0;
padding: 0;
width: 230px;
position: absolute;
background: #ffffff;
border-style:solid;
border-width: thin;
border-color:#deeec3;
}

#navcontainer ul ul li {
float:none;
margin:0;
padding: 0;
}

#navcontainer ul ul li a {
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 16px;
color:#493417;
padding-left:5px;
padding-right:5px;
}

#navcontainer ul ul ul {
display: none;
margin-top:-38px;
margin-left: 220px;
padding: 0;
width: 250px;
position: absolute;
background: #dbe2a8;
border-style:solid;
border-width: thin;
border-color:#deeec3;
}

#navcontainer ul ul li:hover > ul 
{
display: block;
}


#navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#body_block {
position:relative;
float:left;
width:997px;
height:860px;
background-image:url(images/title_body_block.png);
background-repeat:repeat-y;
}

#satellite_body_block {
position:relative;
float:right;
width:997px;
height:535px;
background-image:url(images/body_block.png);
background-repeat:repeat-y;
}

#body_text {
position:relative;
width:704px;
height:830px;
float:left;
margin-left:10px;
margin-top:8px;

}

#satellite_body_text {
position:relative;
width:704px;
height:535px;
margin-left:10px;
margin-top:8px;
padding-bottom:15px;
overflow:auto;
float:left;
}

#program_calendar {
position:absolute;
width:250px;
height:300px;
margin-left:450px;
margin-top:35px;
background-color:#ffffff;
z-index:400;
}
#ministry_photo {
position:relative;
}

.tip { 
 background-color:#ffffff;
	/* CSS3 standard */
	/*opacity:0.6;*/
	border:1px solid black;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;  
	z-index:1000;
	text-decoration: none;
	width:300px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#satellite_title {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
color:#493417;
}

#contact_map {
position:relative;
width:204px;
height:200px;
float:right;
}

#carousel {
position:relative;
width:701px;
height:312px;
margin-left:3px;
margin-top:-8px;
}

#title_news_calendar {
position:relative;
float:left;
width:691px;
height:32px;
padding-top:5px;
padding-bottom:10px;
}

#news_calendar_container {
position:relative;
width:701px;
height:485px;
}

#calendar_container {
position:relative;
float:left;
margin-left:3px;
width:337px;
height:240px;
background-image:url(images/calendar_background.png);
background-repeat:no-repeat;
}

#news_container {
position:relative;
float:right;
width:337px;
height:240px;
margin-right:5px;
background-image:url(images/news_background.png);
background-repeat:no-repeat;
}

#lion_king {
float:left;
width:701px;
margin-left:0px;
position: relative;
height:245px;
}

#left_column {
float:left;
position:relative;
width:230px;
height:800px;
margin-left:30px;
margin-top:8px;
}

#left_column_satellite {
float:left;
position:relative;
width:230px;
height:500px;
margin-left:30px;
margin-top:8px;
}


#missions {
position:relative;
margin-top:8px;
margin-left:-8px;
width:224px;
height:317px;
}

#cursor {
position:absolute;
float:left;
width:13px;
height:25px;
background-image:url(images/cursor.png);
background-repeat:no-repeat;
margin-top:150px;
margin-left:125px;
z-index:2;
}

#left_nav {
display:inline-block;
position:relative;
width:230px;
height:329px;
margin-left:0px;
margin-top:0px;
background-image:url(images/left_column_background.png);
background-repeat:no-repeat;
}

#footer {
clear:both;
position:relative;
height:26px;
width:997px;
margin:auto;
}

#footer_index {
position:relative;
height:26px;
width:997px;
margin:auto;
}

#life_group_title {
background-color:#3f692a;
color:#ffffff;
font-weight:bold;
font-family: Helvetica, Microsoft Sans Serif;
font-size:14px;
width:704px;
height:20px;
vertical-align:center;
padding-top:2px;
padding-left:2px;
}

table.center {
margin-left:auto; 
margin-right:auto;
text-align:center;
}

table.album {
width:200px;
}

td.headline {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#585656;
}

td.calendar_title {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#b0c151;
}

td.album_cover {
width:200px;
}

td.staff_photo {
width:100px;
}

td.admin_body {
text-align:center;
}

td.staff_category {
background-color: #718959;
color:#ffffff;
}

td.album {
width:200px; 
vertical-align:top;
}


td.class_name {
background-color:#202740;
height:35px;
vertical-align:middle;
color:#ffffff;
}

td.class_location {
background-color: #718959;
color:#ffffff;
height:20px;
vertical-align:middle;
}

td.album_description {
width:200px;
height:50px;
}

TEXTAREA.events {
width:520px;
height:150px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
float:left:
}

TEXTAREA.directory {
width:400px;
height:150px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
float:left:
}



input.login_box{
   border:0px;
  width:109px;
  height:21px;
  font-size: 10px;
  color: #cccccc;
  display: inline;
}

#footer_text {
position:relative;
margin:auto;
color:#ffffff;
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 14px;
text-align:center;
margin-top:25px;
padding-bottom:25px;
}

#footer_text_index{
position:relative;
margin:auto;
color:#ffffff;
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 14px;
text-align:center;
margin-top:25px;
padding-bottom:25px;
}


A {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #202740;
text-decoration:none;
}

A:Hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:underline;
}

A:Visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #718959;
}

A.footer {
color:#ffffff;
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 14px;
text-decoration:none;
}

A.footer:hover {
color:#ffffff;
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 14px;
text-decoration:underline;
}

A.footer:visited {
color:#ffffff;
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 14px;
text-decoration:none;
}



A.news_display {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:none;
font-weight:bold;
}

A.news_display:Hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
font-weight:bold;
text-decoration:underline;
}

A.news_display:Visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
font-weight:bold;
}

a.staff {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_light.png);
background-repeat:no-repeat;
}

a.staff:hover {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_dark.png);
background-repeat:no-repeat;
}

a.directions {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_light.png);
background-repeat:no-repeat;
}

a.directions:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_dark.png);
background-repeat:no-repeat;
}

a.times {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_light.png);
background-repeat:no-repeat;
}

a.times:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_dark.png);
background-repeat:no-repeat;
}

a.directory {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_light.png);
background-repeat:no-repeat;
}

a.directory:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}

a.pastor {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_light.png);
background-repeat:no-repeat;
}

a.pastor:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}


a.campus {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_light.png);
background-repeat:no-repeat;
}

a.campus:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_dark.png);
background-repeat:no-repeat;
}

a.news {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#585656;
text-decoration:none;
}

a.news:hover {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#585656;
text-decoration:underline;
}

a.news:visited {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#ffffff;
text-decoration:none;
}

a.calendar_title {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#b0c151;
text-decoration:none;
}

a.calendar_title:hover {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#b0c151;
text-decoration:underline;
}

a.calendar_title:visited {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#ffffff;
text-decoration:none;
}

a.life_group {
color:#ffffff;
font-weight:bold;
font-family: Helvetica, Microsoft Sans Serif;
font-size:14px;
text-decoration:none;
}

a.life_group:hover {
color:#ffffff;
font-weight:bold;
font-family: Helvetica, Microsoft Sans Serif;
font-size:14px;
text-decoration:none;
}

a.life_group:visited {
color:#ffffff;
font-weight:bold;
font-family: Helvetica, Microsoft Sans Serif;
font-size:14px;
text-decoration:none;
}

#portfolio { margin-left: -37px; }

#imagefadebox {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 0px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
   margin-left: 0px;
}

#imagefadebox_sidebar {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 5px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
  margin-left: 3px;
}

#portfolio_sidebar { 
margin:0px; 
}

A.album_description {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
font-weight:bold;
text-decoration:none;
}

A.album_description:Hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
font-weight:bold;
text-decoration:underline;
}

A.album_description:Visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
font-weight:bold;
text-decoration:none;
}

Open in new window

Screen-Shot-2013-11-30-at-1.00.4.png
0
Comment
Question by:brucegust
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39687251
program_calendar is absolutely positioned so everything else on the page will not see it there.
You can give your text content element a margin-right equal to the width of the calendar element then it won't go under it

For the future post the rendered HTML and not the PHP code - cannot debug when we don't know what is supposed to be there
0
 

Author Comment

by:brucegust
ID: 39687258
Hey, Gary!

I know I can do the margin-right approach, but then I lose the wrapping, which is what I'm trying to accomplish.

Here's my rendered HTML:

<div id="satellite_title">Youth Ministry</div>
<HR>
<P>
<table cellspacing="3" cellpadding="3" align="left"><tr><td><A HREF="pastor_student.php" class="tip_trigger"><IMG SRC="Photos/news/news_thumbs/Carlisle_Staff_Photo.JPG" border="0" align="left">
<span class="tip">Be sure to click on Carlisle's picture to read some devotional thoughts geared specifically for Student Ministry...</span></a></td></tr></table>
<P>
<p style="text-align: left;">Trinity Youth Group exists to equip and inspire youth for service and worships in order that they might navigate life with a biblically based foundation. We strive to expereince the presence of God in a number of ways, and we want you to join us in participating in the Kingdom of God. Come join us to take part in what God is already doing here in Spring Hill. Trinity Youth Group consists of youth grades 6th-12th.&nbsp;</p>
<p><strong>Sunday School</strong>: 8:45-9:45 in <em>The Beef</em> (former Beef O'Brady's location) Youth Space. During this time students are engaged in a lesson from one of the books of the Bible. This time is used for students to build a strong base of Biblical knowledge. (All ages)</p>
<p><strong>CONNECT:</strong> Sundays from 5-7pm in the Beef Youth Space. This is our large group time which consists of dinner, games, a relevant lesson, and small groups. This time exists to help students 'connect' with friends, with God, and the world. CONNECT will begin meeting Sunday September 8th and will meet every Sunday evening excluding holidays and other church-wide events.</p>
<p><strong>DIVE: </strong> This program will meet once a month, one the 2nd Wednesday of every month from 7-8pm. This hour is designed to help students who are ready to go deeper in their faith to explore God in new and fresh ways. Several members of the Trinity Congregation will be involved in this monthly meeting by sharing their own testimony.<br /><br />If you have ANY questions, feel free to contact Carlisle Jones, Director of Youth Ministry, at <a href="mailto:cjones@bumc.net">cjones@bumc.net</a>&nbsp;<br /><br /><br /><span style="color: #000080;"><span style="font-size: 14pt; font-family: 'trebuchet ms', geneva;">What's Happening with Trinity RIGHT NOW??<br /><br /></span><span style="font-size: 14pt; font-family: 'trebuchet ms', geneva;"><span style="font-size: 12pt;">Breakthru Sign-Ups: Breakthru Winter Retreat Dec 28-31st in Springville, AL. Cost of trip is $125 per youth. Youth need to turn in form and check AND have Trinity Medical and Release forms. Chaperones needed as well!</span></span></span><span style="font-size: 14pt; font-family: 'trebuchet ms', geneva; color: #0000ff;"><br /></span></p>
<p><strong>&nbsp;</strong></p></div>

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39687265
Better but still missing most of the page. Can you throw it up on your server?
This is just guessing (without seeing the whole picture) but place the calendar inside the content container as the first element (followed by the text) and just float it right (no absolute positioning)
So you end up with something like this
http://jsfiddle.net/P3vVF/
0
 

Author Comment

by:brucegust
ID: 39687342
That did it, Gary! Just got rid of the absolute positioning and we were gold.

Thanks!

BTW: Got another question at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28307131.html, would love it if you could look at that one as well.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

759 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now