?
Solved

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

Posted on 2013-11-30
4
Medium Priority
?
233 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
[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
  • 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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 Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…
Suggested Courses
Course of the Month12 days, 8 hours left to enroll

777 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