CSS float problem with Chrome

I have a page I am working on and want to use the float feature to wrap the text around a picture in a box.  I want the picture in the top left corner and the text to fill the rest.  It works perfectly in IE10, but when opened with Chrome or Firefox they move the picture to the bottom of the box and the text wraps over the top and right.  How can I get this to display correctly in those browsers?

Here is the code for the two elements in question.

_________________________________________________________________________________________________

#tbox1  {
                        position:relative;
                        width:630px;
                        margin-left:320px;
                        margin-top:10px;
                        font-size:15px;
                        text-indent:8px;
}

#img1  {
                        float:left;
                        width:400px;
                        height:230px;                        
}

_________________________________________________________________________________________________

<div id="tbox1">
      <div id="img1"><img alt="" src="images/building.jpg" width="387" height="225" />
      </div>
      <p>paragraph of text of text.</p>
      <br /><br /><p id="homep">Another paragraph of text.</p>
</div>

_________________________________________________________________________________________________

I have tried adding position:(tried all) and top:0; but nothing I do gets me my desired result.
PangeiaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It seems to work fine.  I would suggest posting your entire link because there may be something else you don't see causing the issue.  See my updated code here http://jsbin.com/uwoyEJA/1/edit?html,output

I noticed you had br tags between your p tags. There should be no reason for that. Use your css to increase spacing.  Also position relative is default.  

#tbox1  {
                       
                        width:630px;
                        
                        margin-top:10px;
                        font-size:15px;
                        text-indent:8px;
}

#img1  {
                        float:left;
                        width:400px;
                        height:230px;                        
}

Open in new window

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <div id="tbox1">
      <div id="img1"><img alt="" src="images/building.jpg" width="387" height="225" />
      </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sodales augue. Maecenas lobortis ultrices nisl eu luctus. Nunc in libero nec metus interdum elementum vel ac enim. Etiam facilisis neque nibh, eu euismod sapien semper ac. Quisque sagittis nisl vitae sodales rhoncus. Integer ultricies turpis dolor, eget vulputate lectus consequat quis. Quisque molestie mauris vel elementum porta.</p><p>

Nullam sit amet metus eu sem lacinia dictum. Vestibulum ut est scelerisque nibh aliquet ultricies eu id nisl. Praesent semper fringilla mollis. Nulla vel pulvinar nulla. Suspendisse cursus justo fringilla purus pretium fringilla. Sed nisi dolor, molestie nec libero in, euismod iaculis dui. Etiam semper nisi sed scelerisque pretium. Sed nec justo lectus. Suspendisse faucibus libero et diam condimentum tempor in vitae nisi. Ut id dignissim nibh, eget egestas nisl.
</p><p>
Vestibulum non placerat dui, pharetra pretium neque. Cras lacinia condimentum odio, sed ultricies ante. Cras at placerat lacus. Nam in mi id orci aliquet tincidunt ac at quam. Suspendisse a luctus elit. Fusce sed consequat enim, suscipit ultricies nulla. Ut eu nisl blandit, posuere velit at, sagittis nulla. Vivamus nec fermentum ipsum, vitae tempor felis. Integer commodo mi quis lorem tristique, vitae euismod lacus dapibus. Nam fermentum rutrum urna a placerat. Integer ligula sapien, dictum nec convallis et, laoreet quis nulla. Integer ac venenatis lorem. Morbi at magna sit amet lorem hendrerit commodo. Morbi vitae nisl a metus congue euismod id venenatis mi. Aliquam vulputate vel leo vitae ornare. Nunc adipiscing in nisl a vestibulum.
</p><p>
Donec et nibh quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras malesuada mollis dolor. Donec interdum sem a volutpat feugiat. Phasellus a arcu est. Vestibulum tortor tellus, tempor eget eleifend nec, placerat eget urna. Mauris convallis ultrices placerat. Cras mi quam, luctus at varius sed, tempus egestas purus. Aliquam pharetra, quam ac aliquet pretium, justo nibh ultrices nisi, sed tristique dui dui id metus. Praesent semper luctus convallis. Praesent massa massa, congue a consequat quis, facilisis quis quam.
</p><p>
Proin vulputate ante eget odio mollis pulvinar. Pellentesque faucibus nunc ac sem tincidunt luctus. Curabitur euismod velit erat, non sodales felis tincidunt id. Vestibulum placerat rutrum malesuada. Sed et tincidunt arcu. Ut quis orci ac ligula lobortis mollis id nec ipsum. Nunc aliquam euismod enim eget fringilla. Nam interdum, nibh a consectetur mattis, risus tellus sodales lacus, a ornare eros leo non quam</p>
      <p id="homep">Another paragraph of text.</p>
   
</div>
</body>
</html>

Open in new window

0
PangeiaAuthor Commented:
I tried copying and pasting the entire page into the editor you linked.  It shows the same no matter what browser I use.  But if I pull up the site itself in Chrome or Firefox, they move the image.

Here are the entire CSS and HTML pages.

_____________________________________________________________________________________________________


html {
				background-color:#000063;
}

a {
				text-decoration: none;
}

a:hover  {
				text-decoration:underline;
}

#container {
				background-color: white;
				width: 1100px;
				margin-top: 0px;
				margin-left: auto;
				margin-right: auto;
				margin-bottom:-36px;
}

#header {
				position:inherit;
				width:auto;
				height:250px;
				margin-left:auto;
				margin-right:auto;
				line-height:normal;
				background-image:url('../images/top.jpg');
}


#aslogo {
				position:inherit;
				margin-top:120px;
				margin-left:130px;
				margin-right:auto;
				z-index:100;
}

#accellerate  {
				position:relative;
				margin-left:120px;
				margin-top:90px;
				width:435px;
				height:65px;
}

#menu3  {
				position:relative;
				width:12px;
				top:45px;
				left:130px;
				z-index:1;
				font-family:Arial;
}

#content {
				padding-top: 8px;
				padding-bottom: 8px;
				height:100%;
				background-image:url('../images/mid.jpg');
}

#tbox1  {
				position:relative;
				width:630px;
				margin-left:320px;
				margin-top:10px;
				font-size:15px;
				text-indent:8px;
				font-family:Helvetica;
}

#img1  {
				float:left;
				width:400px;
				height:230px;				
}

#footer-spacer {
    			height: 36px;
}
#footer {
				position:inherit;
				width:auto;
				height:200px;
				margin-top:auto;
				margin-left:auto;
				margin-right:auto;
				margin-bottom:0px;
    			text-align:center;
    			font-size:11px;
				background-image:url('../images/bottom.jpg');
}

Open in new window


___________________________________________________________________________________________________

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/layout3.css" rel="stylesheet" type="text/css" />
</head>

<body style="margin-top: 0">
<div id="container">
	<div id="header">
		<img id="aslogo" alt="" src="images/accellera_logo.gif" width="248" height="129" />
		<object id="accellerate" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="433" height="64" align="top">
			<param name="movie" value="flash/accelerating.swf" /><param name="quality" value="High" />
			<embed src="flash/accelerating.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="accellerate" width="433" height="64" />
		</object>
	</div>
	<div id="content">
		<div id="menu3"><!--#include virtual="menu-main3.aspx" --></div>
		<div id="tbox1">
			<div id="img1"><img alt="" src="images/building.jpg" width="387" height="225" /></div>
			<p>Paragraph of text.</p>
			<br /><br /><p id="homep">Paragraph of text.</p>
		</div>
	</div>
	<div id="footer">
	</div>
</div>
</body>

</html>

Open in new window

___________________________________________________________________________________________________

Thank you for your help.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I ran your code through the validator http://validator.w3.org/  and it looked like your doc type was wrong.  Try this html

http://jsbin.com/uReXAqe/1/

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/layout3.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
      <div id="header">
            <img id="aslogo" alt="" src="images/accellera_logo.gif" width="248" height="129" />
            <object id="accellerate" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="433" height="64" align="top">
                  <param name="movie" value="flash/accelerating.swf" /><param name="quality" value="High" />
                  <embed src="flash/accelerating.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="accellerate" width="433" height="64" />
            </object>
      </div>
      <div id="content">
            <div id="menu3"><!--#include virtual="menu-main3.aspx" --></div>
            <div id="tbox1">
                  <div id="img1"><img alt="" src="images/building.jpg" width="387" height="225" /></div>
                  <p>Paragraph of text.</p>
                  <br /><br /><p id="homep">Paragraph of text.</p>
            </div>
      </div>
      <div id="footer">
      </div>
</div>
</body>
</html>

Open in new window


If this is still wrong, please supply  screensshots for the 2 versions (good and bad)
0
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Pangeia, I had your post edited to use the code box.  Please place your code between the code tags (click the Code in the mark down box) You should see [ code ][ /code ] (without the spaces)
0
PangeiaAuthor Commented:
No changes.  Here are screen shots of how it does.
cssproblem.jpg
0
PangeiaAuthor Commented:
OK.  I have been playing with the page.  I have found how to make it layout correctly, but will have to figure out why because my "fix" is to remove the menu <div> in line 19.

      <div id="menu3"><!--#include virtual="menu-main3.aspx" --></div>

There is something about the position or other attribute of this <div> that is making my tbox1 <div> break.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ok, if you need more help, just post a link directly to your page.
0
PangeiaAuthor Commented:
After checking my external link, using remote computers, I have made a discovery.  The only thing that shows the picture in the right place is internet explorer on my laptop.  Every browser including internet explorer moves the picture to the bottom on the other systems.


I have a temporary link to the site.

Right now it is just a few layout ideas while I play around with CSS.  Nothing is linked so Ill have to give you direct links to the pages I am working with.

This one has everything but the pic is moved to the bottom of the <div>
(The reason I opened the case)
http://excelent.accellera.us/test3.aspx


This one I removed the menu which causes the pic and text show properly.  I noticed it also makes the other objects move, most of all the flash object.
http://excelent.accellera.us/test4.aspx

With this page I was hoping to do a layout with zero tables and position everything on the page with CSS.  This is proving to be very difficult.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Part of the issue may be coding.  See the link here that is using the validator for your first link

When I see, ": end tag for "head" which is not finished", that could be your doctype.  Double check it is correct.  

http://www.w3.org/QA/2002/04/valid-dtd-list.html
0
PangeiaAuthor Commented:
I have double checked the doc type.  It is correct both according to my editor and the link you provided.

At this point I feel I have spent too much time trying to resolve something trivial.

I will go ahead and use the tables to line up the <div> elements since I already know how to do this.

Thank you for your help.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you review my notes http:Q_28258266.html#a39548068 you will see I am suggesting your errors in your coding are an issue.   The coding is a mess and there is a good chance once that works, things will work as expected.  

If you look at lines 1-7 of your test3.aspx page, you have your doctype html, head statement. Then again on line 29 - 37 you are starting with a doc type and head section again. Then on BOTH line 61 and 85 you are closing out your body and html tags.  
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/layout3.css" rel="stylesheet" type="text/css" />
</head>

<body style="margin-top: 0">
<div id="container">
	<div id="header">
		<table style="width: 1000px; height: 100%" cellspacing="0" cellpadding="0" align="center">
						<tr>
										<td>
		<img id="aslogo" alt="" src="images/accellera_logo.gif" width="248" height="129" /></td>
										<td>
		<object id="accellerate" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="433" height="64" align="top">
			<param name="movie" value="flash/accelerating.swf" /><param name="quality" value="High" />
			<embed src="flash/accelerating.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="accellerate" width="433" height="64" />
		</object>
										</td>
						</tr>
		</table>
	</div>
	<div id="content">
		<table style="width: 1000px; height: 100%" cellspacing="0" cellpadding="0" align="center">
						<tr>
										<td>
		<div id="menu3"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/reset.css" rel="stylesheet" type="text/css" /><link href="css/menu-main3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="js/menu.js"></script>
<title>

</title></head>

<body>
	<div id="menulist">
		<ul id="navbar">
			<li><a href="menu-main.aspx">HOME</a></li>
			<li><a href="menu-main.aspx">ABOUT US</a></li>
			<li><a href="menu-main.aspx">SOLUTIONS</a>
				<ul>
					<li class="submenuitem"><a href="menu-main.aspx">Accounting</a></li>
					<li class="submenuitem"><a href="menu-main.aspx">Business Phones</a></li>
					<li class="submenuitem"><a href="menu-main.aspx">Infrastructure</a></li>
					<li class="submenuitem"><a href="menu-main.aspx">Internet</a></li>
					<li class="submenuitem"><a href="menu-main.aspx">Security</a></li>
					<li class="submenuitem"><a href="menu-main.aspx">Software</a></li>
				</ul>
			</li>
			<li><a href="menu-main.aspx">SUPPORT</a></li>
			<li><a href="menu-main.aspx">CONTACT US</a></li>
			<li><a href="menu-main.aspx">LINKS</a></li>
		</ul>
	</div>
</body>

</html>
</div>
										</td>
										<td>
		<div id="tbox1">
			<div id="img1"><img alt="" src="images/building.jpg" width="387" height="225" /></div>
			<p>Accellera Solutions is a solutions provider in the technology areas of designing, building, and delivering innovative business solutions. We can assist you in network infrastructure, internet and web solutions, accounting software customization and support, business telephone systems, network security, and software development.</p>
			<br /><br /><p id="homep">Our focus is on supporting our clients on the Microsoft and Linux platforms. We have an unparalleled depth of expertise in these technologies. This allows us to accelerate our clients business by defining and implementing solutions efficiently, exceptionally, and quickly to gain the maximum benefit from their technology.</p>
		</div>
										</td>
						</tr>
		</table>
	</div>
	<div id="footer">
	<table style="width: 1000px" cellspacing="0" cellpadding="0" align="center">
					<tr>
									<td>&nbsp;</td>
					</tr>
					<tr>
									<td>&nbsp;</td>
					</tr>
	</table>
	</div>
</div>
</body>

</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.