1. Home
  2. Forums Index
  3. Browser Side / CSS 3:49 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE Right Align Pictures

The text moves to below the pictures...

         

noelgreen

4:24 pm on Aug 12, 2008 (gmt 0)

10+ Year Member



My question: How can I get the pictures to float to the right of the text, in a column like format, in IE on a PC as they do on Firefox, etc.?

Here's the site...
[scyouth.org...]

Here's the CSS
[scyouth.org...]

And you can look at the source for the HTML code.

Any ideas?

D_Blackwell

7:55 pm on Aug 12, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld - but your links are going to get whacked - TOS.

Strip out the the HTML & CSS that shows the problem and post the code sample for review. The process of preparing the problem for presentation may result in a solution at the same time. If not, we'll see what we've got.

noelgreen

8:16 pm on Aug 12, 2008 (gmt 0)

10+ Year Member



Good point.

Here's the HTML... 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/suckerfish_keyboard.js"></script>
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/flexcroll.js"></script>
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<div id="header">
<?php if (function_exists('suckerfish')) {suckerfish();} ?>
</div>
<?php get_header(); ?>
<div id="content">
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
</div>
 <?php endwhile; endif; ?>
<div id='mycustomscroll' class='flexcroll'>
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_header">
</div>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content('<p>Continue reading &raquo;</p>'); ?>
<br /><br />
<?php //if page is split into more than one
link_pages('<p>Pages: ', '</p>', 'number'); ?>
</div>
</div>
 <?php endwhile; endif; ?>
<!-- we clear our floats using the following div, check out the CSS for it-->
<div class="clearfloat"></div>
</div> <!-- end "mycustomscroll" -->
</div>
<?php get_footer(); ?></div>
</div><?php wp_footer(); ?>
</body>
</html>

And here's the CSS... 


/* basics */
*{
behavior: url(iepngfix.htc)
margin:0;
padding:0;
}
body {
background: #375a5a url('images/background.png');
font-family: verdana, arial, sans-serif;
font-size: 12px;
margin: 0px;
height: 100%;
}
h1 {font-size: 18pt;}
h2 {font-size: 14pt; margin-top:10px;}
h3 {font-size: 10pt; margin-top:10px;}
h4 {font-size: 9pt;}
/* images and misc. */
img{ border: none; padding: 0px; }
img a{border:none;}
img.left{ float: left; border: none; padding: 0px; }
img.right{ float: right; border: none; padding: 0px; }
blockquote{
border-left:1px solid #A5ABAB;
margin:15px;
padding:0 12px 0 12px;
}
code{
margin:10px;
font-family: verdana, arial, sans-serif;
}
/* links */
a{
color:#666;
text-decoration:none;
border: none;
}
a:hover{color:#6A7CA0;text-decoration: underline; border: none;}
/* container */
#container {
position: relative;
width: 100%;
height: 100%;
height: auto;
margin: 0;
padding: 0px;
color:#333;
}
/* header */
#header {
background: transparent url('images/header.png') no-repeat;
float: left;
 width: 100%;
 overflow: hidden;
height: 167px;
}
#header h1{
font-family: verdana, arial, sans-serif;
font-size: 16pt;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
padding: 120px 0 0 16px;
}
#header h1 a{color: #404040; text-decoration: none;}
#header h1 a:hover{color: #666; text-decoration: none;}
#header h2{
font-family: verdana, arial, sans-serif;
font-size: 10pt;
font-weight: 300;
font-style: italic;
color: #404040;
letter-spacing: 1px;
margin: 0;
padding: 0 0 0 18px;
}
/* main menu */
#menu,
#menu a,
#menu a:visited {
background: #879c73;
font-family: verdana, arial, sans-serif;
font-size: 10px;
text-transform: uppercase;
width:760px; 
height:25px;
}
#menu ul {
margin: 6px 0 0 0;
padding: 0;
text-align: left;
}
#menu ul li {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}
#menu ul li a {
padding: 6px 13px 6px 13px;
margin: 0;
text-decoration: none;
color: #fff;
}
#menu ul li a:hover {
background-color: #fff;
color:#0B1316;
}
/* homepage content */
.main_page img {
float: right;
margin: 0px;
padding: 0px;
}
#main_page {
height: 397px;
width: 835px;
margin: 0;
background: transparent url('images/main_image.png') no-repeat;
}
#content_main {
float: left;
width: 830px;
height: 100%;
margin: 0px 0 0 46px;
padding: 0px 0 0 0px;
}
.post_main h2 {
font-family: verdana, arial, sans-serif;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
color: #66cccc;
margin: 0 0 0px 20px;
padding: 0 0px 0px 0px;
text-transform: lowercase;
}
.post_main h2 a{
color: #66cccc;
text-transform: lowercase;
text-decoration: none;
}
.post_main h2 a:hover{
color: #666;
text-decoration: none;
}
.post_main {
width: 830px;
height: 100%;
min-height: 100%;
height: auto;
}
.post_main p {
line-height: 18px;
}
.entry_main {
margin: 0px 0 0px 20px;
padding: -20px 0 0 0;
}
.entry_main p {
margin:12px 0;
color: #fff;
}
/* Sub-Page Content */
#content {
float: left;
width: 790px;
height: 100%;
overflow: hidden;
margin: 0px 0 0 44px;
padding: 0px 0 0 20px;
}
.post_header {
/*background: transparent url('images/content_top.png') no-repeat; */
width: 740px;
height: 23px;
border: 0;
margin: 0 0 0 0;
}
.post {
/*background: transparent url('images/content_bg.png') repeat-y; */
width: 740px;
height: 100%;
min-height: 100%;
height: auto;
}
.post img {
float: right;
clear: right;
padding: 0;
margin: 0 0 20px 10px;
border: 3px solid #66cccc;
}
.post p {
line-height: 24px;
}
.post h2{
font-family: verdana, arial, sans-serif;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
color: #66cccc;
margin: 0 0 20px 0;
padding: 0 0px 5px 0px;
border-bottom: 1px solid #66cccc;
text-transform: lowercase;
}
.post h2 a{
color: #66cccc;
text-transform: lowercase;
text-decoration: none;
}
.post h2 a:hover{
color: #666;
text-decoration: none;
}
.post p{
width: 740px;
margin: 0 0 40px 0;
padding: 0 20px 0 30px;
font-size: 12px;
}
.post a{text-decoration:underline;}
.post ul {}
.post li {}
.entry {
margin: -30px 0 0 0px;
}
.entry p {
margin:12px 0;
color: #fff;
}
.postmetadata{
clear: both;
background:#F7F7F7;
padding:6px;
margin-top: 16px;
}
.navigation {
font-size:8pt;
float:left;
width:100%;
}
.alignleft {float:left; margin:25px;}
.alignright {float:right; margin:25px;}
.notfound{padding: 25px; font-size: 14pt; font-weight: 300;}
/* sidebar */
#sidebar {
font-family: verdana, arial, sans-serif;
font-size:8pt;
width: 200px;
float:right;
margin: 12px 0 24px 0;
padding: 0;
border-left: 1px dotted #A2A2A2;
}
#sidebar h2{
font-family: verdana, arial, sans-serif;
font-weight: normal; 
font-size: 10pt; 
text-align: left;
color: #08122E;
margin: 0;
padding: 0;
}
#sidebar p {margin:0; padding: 0 6px 0 12px;}
#sidebar img {padding: 0; margin: 0;}
#sidebar ul {
margin:12px;
padding:0;
list-style-type: none;
}
#sidebar ul li {
margin: 0;
padding: 0;
line-height: 14pt;
list-style-type: none;
}
#sidebar ul ul {
margin: 6px 0 6px 12px;
padding: 0;
}
#sidebar ul ul li {
list-style-type: none;
list-style-position: inside;
}
#sidebar ul ul ul{
margin: 0;
padding: 0;
}
#sidebar ul ul ul li{
padding: 0 0 0 15px;
list-style-type: square;
color: #898989;
}
/* comments */
#commentssection{
clear: both;
padding: 2px 12px;
margin: 0;
}
#commentssection h3{
font-family: verdana, arial, sans-serif;
font-size: 12pt;
font-weight: 300;
font-style: normal;
color: #000;
}
#commentform{
background: #F0F0F0;
margin: 12px 12px 20px 12px;
padding:20px;
}
#commentform p{
color: #000;
}
#commentform a{color: #000; text-decoration: none; border-bottom: 1px dotted #465D71;line-height: 14pt;}
#commentform h3{
font-family: verdana, arial, sans-serif;
font-size: 10pt;
font-weight: 300;
color: #000;
}
#commentbox{
width:75%;
min-width:400px;
margin:5px 5px 0 0;
}
#author, #email, #url, #commentbox, #submit{
background: #fff;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
margin:5px 5px 0 0;
border: none; 
padding: 6px;
border: 1px solid #B2B2B2;
}
#submit{margin:5px 5px 0 0;}
ol.commentlist {list-style-type: none;}
ol.commentlist li {
background: #fff;
margin:10px 0;
padding:5px 0 5px 10px;
overflow: hidden;
}
ol.commentlist li.alt {background: #E5E5E5;}
ol.commentlist li p {margin: 6px 0 6px 0; padding: 0 12px 0 0; line-height: 14pt;}
ol.commentlist a {color:#000;}
cite {
font-family: verdana, arial, sans-serif;
font-size: 9pt;
font-weight: bold;
font-style: normal;
}
cite a{color: #000; text-decoration: none; border-bottom: 1px dotted #465D71;}
/* search */
#searchform{
padding: 6px 0 6px 6px;
font-family: verdana, arial, sans-serif;
}
#searchform input#s{
font-family: verdana, arial, sans-serif;
font-size: 8pt;
padding: 2px;
margin: 2px;
border: 1px solid #B7B7B7;
}
#searchform input#searchsubmit{
font-family: verdana, arial, sans-serif;
font-size: 7pt;
padding: 2px;
margin: 2px 0 0 2px;
border: 1px solid #B7B7B7;
background-color: #fff;
color: #797979;
}
/* footer */
#footer {
background: #0B1224;
clear: both;
width: 100%;
margin:0px;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
}
#footer p{padding:6px;margin: 0; color: #eee;}
#footer a{color: #BCBCBC;text-decoration: none;}
#footer a:hover{color: #5D5D5D;text-decoration: underline;}
/* Drop Down Menu */
#suckerfishnav {
position: absolute;
top: 120px;
left: 25px;
 font-size:11px;
 font-family:verdana,sans-serif;
 font-weight:bold;
 width: 835px;
 margin: 0px 0px 10px 0px;
 }
#suckerfishnav,
#suckerfishnav ul {
 float:left;
 list-style:none;
 line-height:19px;
 padding: 0 0 0 30px;
 margin:0;
 }
#suckerfishnav a {
 font-size:11px;
 background: transparent;
 display:block;
 color:#000;
 text-decoration: none;
 text-transform: uppercase;
 padding:0px 10px 0px 10px;
 margin: 0px 10px 0px 0px;
 }
#suckerfishnav li {
 float:left;
 padding: 0;
 margin: 0;
 }
#suckerfishnav ul {
 position:absolute;
 left:-999em;
 height:auto;
 font-weight:normal;
 margin:0;
 line-height:1;
 }
#suckerfishnav li li {
 font-weight:bold;
 font-family:verdana,sans-serif;
 }
#suckerfishnav li li a {
background: transparent url('images/nav_bg.png') repeat-x;
 padding: 4px;
 border-top: 1px solid #000;
 margin: 0 0 0 -20px;
 }
#suckerfishnav li ul ul {
 margin:-23px 0 0 100px;
 }
#suckerfishnav li li:hover {
 background: transparent;
 }
#suckerfishnav li ul li:hover a,
#suckerfishnav li ul li li:hover a,
#suckerfishnav li ul li li li:hover a,
#suckerfishnav li ul li li li:hover a {
 color:#000;
 }
#suckerfishnav li:hover a,
#suckerfishnav li.sfhover a {
 color:#000;
 }
#suckerfishnav li:hover li a,
#suckerfishnav li li:hover li a,
#suckerfishnav li li li:hover li a,
#suckerfishnav li li li li:hover li a {
 color:#000;
 }
#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li:hover ul ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul,
#suckerfishnav li.sfhover ul ul ul ul {
 left:-999em;
 }
#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul,
#suckerfishnav li li li li.sfhover ul {
 left:auto;
 }
#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
 background: transparent;
 }
/* Scrolling Text */
#mycustomscroll {
/* Typical fixed height and fixed width example */
width: 835px;
height: 390px;
overflow: auto;
/* IE overflow fix, position must be relative or absolute*/
position: relative;
margin: 0;
padding: 0px;
}
.scrollgeneric {line-height: 1px;font-size: 1px;position: absolute;top: 0; left: 0;}
.vscrollerbase {left: 0 !important;}
.vscrollerbase {
width: 15px;
background: transparent url('images/basebarcaps_verticalbarbody.png') 0px 0px repeat-y;
}
.vscrollerbar {
width: 15px;
background: transparent url('images/basebarcaps_verticalbarbody.png') -15px 0px repeat-y;
}
.vscrollerbar {
padding: 0px;
z-index: 2;
}
.vscrollerbarbeg {
background: transparent url('images/basebarcaps_verticalbarbody.png') -45px -30px no-repeat;
width: 15px;
height: 15px !important;
}
.vscrollerbarend {
background: transparent url('images/basebarcaps_verticalbarbody.png') -45px 0px no-repeat;
width: 15px;
height: 15px;
}
.scrollerjogbox {
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background: transparent url('images/horizontalbarbody_cornerjog.png') 0px 0px;
}
.vscrollerbasebeg {
background: transparent url('images/basebarcaps_verticalbarbody.png') -30px -30px no-repeat;
width: 15px;
height: 15px !important;
}
.vscrollerbaseend {
background: transparent url('images/basebarcaps_verticalbarbody.png') -60px -30px no-repeat;
height: 15px;
width: 15px;
}
.scrollerjogbox:hover {
background: transparent url('images/basebarcaps_verticalbarbody.png') -45px -15px;
}

I will say too that I'm working in WordPress... so, before my code is turned in the actual website the code for the content looks like this... 


<div class="entry">
<?php the_content(); ?>
</div>

So it puts the images in dynamically and I can't really add the div wrapper around the individual div tags to them.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:49 am May 2, 2026