What is wrong with this

Forum Moderators: not2easy

Message Too Old, No Replies

What is wrong with this

andrewsmd

7:56 pm on Oct 20, 2010 (gmt 0)

I'm trying to display some information so it has and address then the phone and then an image I want them displayed inline. The html and css I have works fine until I add the image, it then makes them display vertically on top of each other instead of side by side.
i.e. without the image it displays a b c
with the image it displays
a
b
c

What am I missing here?
html
<div id="footerText" class="footerTextDiv" runat="server">
<div class="textFooter">
<b>Address</b><br />
2908 W 39th St<br />
Suite Office C<br />
Kearney 68845
</div>
<div class="textFooter">
<b>Phone</b><br />
308-338-2050<br />
</div>
<div class="textFooter">
<img src="images/map.png" />
</div>
</div>

CSS
.footerTextDiv{
float: right;
margin-left: 20px;
padding-right: 40px;
font-size: 12px;
color: #57441A;

}
.textFooter
{
float: left;
height: 100px;
text-align: left;
padding-top: 20px;
padding-left: 15px;

}

Major_Payne

8:09 am on Oct 21, 2010 (gmt 0)

Usually when that happens the divs are not wide enough. You float the elements and this removes those elements from the document flow. Some times you have to clear those floats.

You have two containers with the same CSS class. If you want to place one set of text on the left, one in the middle and image on the right, or any combo of these, you need to have a main wrapper div with the proper width and height. You can center this in its container, if you want, with the CSS property:

margin: 0 auto;

One div can be floated left, one centered and one floated right. Each has to have its width/height set. Always tell browsers what you want. You will have to tweak the inner widths of the divs if one or more continue to fall out of the main container div.

Sometimes, to help see what is going on with these divs, it helps to add different color borders to each of the divs. Then you can track where they are on the page.

Your image tag is incomplete. You are closing these tags which means you must be using a XHTML document type so you need to code correctly.

andrewsmd

9:13 pm on Oct 21, 2010 (gmt 0)

I know it's not a width problem, that was my first guess. If I add three of these divs with just text, they display the way I want them too. However, once I add an image to any of them, then they line up vertically. It does this with an image that is 1x1 px. I will try specifically floating them.

rocknbil

3:47 pm on Oct 22, 2010 (gmt 0)

Well, your code runs fine with me, IE and FF, with or without borders on the divs, and an artificial 100 x 100 image, so my guess is "something else" is throwing a wrench in the machinery. But a good rule to remember is to always assign a width when floating.

The other thing is that images are inline elements by default, and you're floating the container, you might be able to fix some problems with img { display:block; } (wild guess.)

Get rid of those <br>'s. :-)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<style type="text/css"> 
.footerTextDiv { 
 float: right; 
 width: 360px; 
 margin-left: 20px; 
 padding-right: 40px; 
 font-size: 12px; 
 color: #57441A; 
 
} 
.textFooter{ 
 float: left; 
 width: 100px; 
 height: 100px; 
 text-align: left; 
 padding-top: 20px; 
 padding-left: 15px; 
}  
.textFooter p { margin:0; padding:1px 0; } 
</style> 
</head> 
<body> 
<div id="footerText" class="footerTextDiv"> 
 <div class="textFooter"> 
 <p><b>Address</b></p> 
 <p>2908 W 39th St</p> 
 <p>Suite Office C</p> 
 <p>Kearney 68845</p> 
 </div> 
 <div class="textFooter"> 
 <p><b>Phone</b></p> 
 <p>308-338-2050</p> 
 </div> 
 <div class="textFooter"> 
 <img src="map.png"> 
 </div> 
</div><!-- #footerText --> 
</body> 
</html>

andrewsmd

4:30 pm on Oct 27, 2010 (gmt 0)

Well the issue with this is, it is in a skin for the CMS dotnetnuke, which jacks all sorts of things up. I ended up just putting them in a table. Not the best solution, but I'm on the clock and it worked! I thank you guys for all your help.