Solved

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

Posted on 2013-11-30
4
227 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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

Suggested Solutions

Title # Comments Views Activity
How to position loader with CSS 3 62
Show tab when enter div and change underline color 3 88
alert on input text 2 23
Text color in a select 11 21
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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).

685 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