Div elements and alignment in IE8

I'm having the usual problem with element alignment inside div's in IE8 (tables were so much easier). With the code below I need the second title (in h2 tags) to be vertically aligned with the top edge of image-6.jpg. At the moment it is aligned with the top of image-5.jpg.

Can anyone help please?
<!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" dir="ltr" lang="en">
<head>
<meta name="robots" content="index, follow" />
<title></title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style>
#container {
	width: 900px;
	margin: 0 auto;
	margin-top:10px;
}
#mainContent {
	width:840px;
	min-height:380px;
	background-color:#ffffff;
	padding:0 0 4px 0;
	color:#00382e;
	margin:0px 30px 0px 30px;
}
#mainContent h2 {
	margin:18px 18px 0px 0px;
	font-size:10px;
}
#mainContent img.blackBorder {
	float:right;
	margin:0 0 11px 10px;
	border:1px solid #000000;
}
</style>
</head>
<body>

<div id="container">
 <div id="mainContent">

<div style="height:318px;">
  <img class="blackBorder" src="images/image-2.jpg" alt="" title="" width="205" height="307" />
  <img class="blackBorder" src="images/image-1.jpg" alt="" title="" width="460" height="307" />
  <h2 style="margin-top:0;display:inline;">Two Storey 1500m<sup>2</sup> Classroom Accommodation</h2>
  <p></p>
  <div class="clear"></div>
</div>

<div>
  <img class="blackBorder" src="images/image-4.jpg" alt="" title="" width="206" height="364" />
  <img class="blackBorder" src="images/image-3.jpg" alt="" title="" width="460" height="364" />
  <div class="clear"></div>
</div>

<div style="height:358px;">
  <img class="blackBorder" src="images/image-6.jpg" alt="" title="" width="679" height="347" />
  <img class="blackBorder" src="images/image-5.jpg" alt="" title="" width="679" height="367" />
  <h2 style="margin-top:0;display:inline;">250m<sup>2</sup> Nursery School Accommodation</h2>
  <p></p>
  <div class="clear"></div>
</div>

</div>
</div>
</body>
</html>

Open in new window

LVL 1
ncwAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

i-CONICACommented:
I'm struggling to visualise what you're after achiving. Could you post a quick photoshop/paint chop-up of how you wanted it to be displayed?

Thanks.
0
LZ1Commented:
Try this and let us know if we're on the right track.
<!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" dir="ltr" lang="en"> 
<head> 
<meta name="robots" content="index, follow" /> 
<title></title> 
<meta name="Description" content="" /> 
<meta name="Keywords" content="" /> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 
<style> 
#container { 
        width: 900px; 
        margin: 0 auto; 
        margin-top:10px; 
} 
#mainContent { 
        width:840px; 
        min-height:380px; 
        background-color:#ffffff; 
        padding:0 0 4px 0; 
        color:#00382e; 
        margin:0px 30px 0px 30px; 
} 
#mainContent h2 { 
        margin:18px 18px 0px 0px; 
        font-size:10px; 
} 
#mainContent img.blackBorder { 
        float:right; 
        margin:0 0 11px 10px; 
        border:1px solid #000000; 
} 
#mainContent div .vertical {
	margin-top: 179px;
}
</style> 
</head> 
<body> 
 
<div id="container"> 
 <div id="mainContent"> 
 
<div style="height:318px;"> 
  <img class="blackBorder" src="images/image-2.jpg" alt="" title="" width="205" height="307" /> 
  <img class="blackBorder" src="images/image-1.jpg" alt="" title="" width="460" height="307" /> 
  <h2 style="margin-top:0;display:inline;">Two Storey 1500m<sup>2</sup> Classroom Accommodation</h2> 
  <p></p> 
  <div class="clear"></div> 
</div> 
 
<div> 
  <img class="blackBorder" src="images/image-4.jpg" alt="" title="" width="206" height="364" /> 
  <img class="blackBorder" src="images/image-3.jpg" alt="" title="" width="460" height="364" /> 
  <div class="clear"></div> 
</div> 
 
<div style="height:358px;"> 
  <img class="blackBorder" src="images/image-6.jpg" alt="" title="" width="679" height="347" /> 
  <img class="blackBorder" src="images/image-5.jpg" alt="" title="" width="679" height="367" /> 
  <div class="vertical"><h2 style="margin-top:0;display:inline;">250m<sup>2</sup> Nursery School Accommodation</h2> 
  <p></p> </div>
  <div class="clear"></div> 
</div> 
 
</div> 
</div> 
</body> 
</html>

Open in new window

0
ncwAuthor Commented:
Not quite. The first title is aligned with the top of the first row of images. Then there's a 2nd row of images and then a 3rd row with one image. I'm wanting the 2nd title to align with the top of the image in the 3rd row, please.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

LZ1Commented:
Then we can move the div and make it float like this?
<!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" dir="ltr" lang="en"> 
<head> 
<meta name="robots" content="index, follow" /> 
<title></title> 
<meta name="Description" content="" /> 
<meta name="Keywords" content="" /> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 
<style> 
#container { 
        width: 900px; 
        margin: 0 auto; 
        margin-top:10px; 
} 
#mainContent { 
        width:840px; 
        min-height:380px; 
        background-color:#ffffff; 
        padding:0 0 4px 0; 
        color:#00382e; 
        margin:0px 30px 0px 30px; 
} 
#mainContent h2 { 
        margin:18px 18px 0px 0px; 
        font-size:10px; 
} 
#mainContent img.blackBorder { 
        float:right; 
        margin:0 0 11px 10px; 
        border:1px solid #000000; 
} 
.vertical   {
	float: left;
}
</style> 
</head> 
<body> 
 
<div id="container"> 
 <div id="mainContent"> 
 
<div style="height:318px;"> 
  <img class="blackBorder" src="images/image-2.jpg" alt="" title="" width="205" height="307" /> 
  <img class="blackBorder" src="images/image-1.jpg" alt="" title="" width="460" height="307" /> 
  <h2 style="margin-top:0;display:inline;">Two Storey 1500m<sup>2</sup> Classroom Accommodation</h2> 
  <p></p> 
  <div class="clear"></div> 
</div> 
 
<div> 
  <img class="blackBorder" src="images/image-4.jpg" alt="" title="" width="206" height="364" /> 
  <img class="blackBorder" src="images/image-3.jpg" alt="" title="" width="460" height="364" /> 
  <div class="clear"></div> 
</div> 
 
<div style="height:358px;"> 
    <div class="vertical"><h2 style="margin-top:0;display:inline;">250m<sup>2</sup> Nursery School Accommodation</h2>   </div>
<img class="blackBorder" src="images/image-6.jpg" alt="" title="" width="679" height="347" /> 
  <img class="blackBorder" src="images/image-5.jpg" alt="" title="" width="679" height="367" /> 
  
  <div class="clear"></div> 
</div> 
 
</div> 
</div> 
</body> 
</html>

Open in new window

0
ncwAuthor Commented:
What I now see is the bottom of the text aligned with the top of the image and the text going beyond the left edge of the image. What I'm looking for is a repeat of the 1st title/image position, ie top of text aligned with top of image, please.
0
LZ1Commented:
I see what you mean now.  My fault:
 

<!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" dir="ltr" lang="en">  
<head>  
<meta name="robots" content="index, follow" />  
<title></title>  
<meta name="Description" content="" />  
<meta name="Keywords" content="" />  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="css/stylesheet.css" />  
<style>  
#container {  
        width: 900px;  
        margin: 0 auto;  
        margin-top:10px;  
}  
#mainContent {  
        width:840px;  
        min-height:380px;  
        background-color:#ffffff;  
        padding:0 0 4px 0;  
        color:#00382e;  
        margin:0px 30px 0px 30px;  
}  
#mainContent h2 {  
        margin:18px 18px 0px 0px;  
        font-size:10px;  
}  
#mainContent img.blackBorder {  
        float:right;  
        margin:0 0 11px 10px;  
        border:1px solid #000000;  
}  
.vertical   { 
        float: left; 
} 
</style>  
</head>  
<body>  
  
<div id="container">  
 <div id="mainContent">  
  
<div style="height:318px;">  
  <img class="blackBorder" src="images/image-2.jpg" alt="" title="" width="205" height="307" />  
  <img class="blackBorder" src="images/image-1.jpg" alt="" title="" width="460" height="307" />  
  <h2 style="margin-top:0;display:inline;">Two Storey 1500m<sup>2</sup> Classroom Accommodation</h2>  
  <p></p>  
  <div class="clear"></div>  
</div>  
  
<div>  
  <img class="blackBorder" src="images/image-4.jpg" alt="" title="" width="206" height="364" />  
  <img class="blackBorder" src="images/image-3.jpg" alt="" title="" width="460" height="364" />  
  <div class="clear"></div>  
</div>  
  
<div style="height:358px;">  
	<img class="blackBorder" src="images/image-6.jpg" alt="" title="" width="679" height="347" />  
  	<img class="blackBorder" src="images/image-5.jpg" alt="" title="" width="679" height="367" />  
   
  <div class="clear"></div>  
</div>  
     <h2 style="display:block;">250m<sup>2</sup> Nursery School Accommodation</h2>   
 
</div>  
</div>  
</body>  
</html>

Open in new window

0
ncwAuthor Commented:
The text is now in the correct vertical position, but in IE8 the word 'Accommodation' is now crossing over the image. It needs to wrap to a 2nd line like the 1st title, please.  
0
ncwAuthor Commented:
The class 'clear' is simply:
.clear {
        clear:both;
}
0
LZ1Commented:
Do you have a live link?  I tested in IE 8 & FF and it looked fine.
 

ee.jpg
0
LZ1Commented:
If it is still wrapping you can always throw a width in there if you need to.
0
ncwAuthor Commented:
Using IE8 on XP it's wrapping ok, but in my IE8 on Vista it doesn't wrap, and in both it seems to have a top margin. As you say if I add a width then it wraps ok, just the top margin I need to remove (which I see is not evident in your screenshot).
0
LZ1Commented:
The margin is being inherited from the #mainContent h2.  If you give it a class you won't have to display anything inline like that.
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
LZ1Commented:
Any updates?
0
ncwAuthor Commented:
Yes ... I'm now even more frustrated with table-less layouts than before!!

Eventually I found the code below worked. I gave the h2 and div elements a class with width and float left and right respectively, and I took the h2 element outside of and before each div. Then the div.clear was only required at the bottom.

Thanks for your help.
<!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" dir="ltr" lang="en">
<head>
<meta name="robots" content="index, follow" />
<title></title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style>
#container {
        width: 900px;
        margin: 0 auto;
        margin-top:10px;
}
#mainContent {
        width:840px;
        min-height:380px;
        background-color:#ffffff;
        padding:0 0 4px 0;
        color:#00382e;
        margin:0px 30px 0px 30px;
}
#mainContent h2.caseStudies {
	margin:0px 0px 0px 0px;
	font-size:10px;
	width:144px;
	float:left;
}
#mainContent img.blackBorder {
        float:right;
        margin:0 0 11px 10px;
        border:1px solid #000000;
}
#mainContent div.caseStudies {
	width:690px;
	float:right;
}
.clear {
        clear:both;
}
.vertical   {
        float: left;
}
</style>
</head>
<body>

<div id="container">
 <div id="mainContent">

<h2 class="caseStudies">Two Storey 1500m<sup>2</sup> Classroom Accommodation</h2>
<div class="caseStudies" style="height:318px;">
  <img class="blackBorder" src="images/image-2.jpg" alt="" title="" width="205" height="307" />
  <img class="blackBorder" src="images/image-1.jpg" alt="" title="" width="460" height="307" />
</div>

<div class="caseStudies">
  <img class="blackBorder" src="images/image-4.jpg" alt="" title="" width="206" height="364" />
  <img class="blackBorder" src="images/image-3.jpg" alt="" title="" width="460" height="364" />
</div>

<h2 class="caseStudies">250m<sup>2</sup> Nursery School Accommodation</h2>
<div class="caseStudies" style="height:358px;">
	<img class="blackBorder" src="images/image-6.jpg" alt="" title="" width="679" height="347" />
  	<img class="blackBorder" src="images/image-5.jpg" alt="" title="" width="679" height="367" />
</div>

</div>
</div>
</body>
</html>

Open in new window

0
LZ1Commented:
Glad you got it.  I understand the learning curve from tables to table-less, but in the long run it gets easier.  
Please remember to close the question by accepting the correct answer.
0
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
Internet Protocols

From novice to tech pro — start learning today.