• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 539
  • Last Modified:

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

0
ncw
Asked:
ncw
  • 8
  • 6
1 Solution
 
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now