Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-11-30
4
Medium Priority
?
236 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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…
Suggested Courses

604 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