PDA

View Full Version : Div Alignment Problem


number8pie
03-09-2011, 09:36 AM
I'm a bit new to web development, I have built a website using notepad and html years ago and am currently trying to teach myself how to use Dreamweaver and CSS, but have hit a bit of a block.

I'm in the middle of making a website and have a series of div's within div's to align everything on the page.

The issue I'm having is with a right hand column which contains 4 divs within another 4 (one for background and one for content), for featured news story's and news snippets. When I use Dreamweaver (CS5) design view to enter an image and a headline for the news snippet into the top div it looks fine, but in Live view and IE8 the image and headline is located on a div two down. :confused:

Could anyone please help me with this?

I'll copy the code below, the images wont load because the content hasn't been uploaded to a server yet. The section that isn't working is under an image with the name shakedown and its called Featured 1.

The images below this div are placeholders only, when I come to entering content I add a css background image and a content div within it.

Here's the code:

Main page 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>F3 Racing with Hywel Lloyd</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="css/hlf3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('images/nav_bar_hover/home_hover.png','images/nav_bar_hover/news_hover.png','images/nav_bar_hover/blog_hover.png','images/nav_bar_hover/gallery_hover.png','images/nav_bar_hover/career_hover.png','images/nav_bar_hover/guestbook_hover.png','images/nav_bar_hover/sponsors_hover.png','images/nav_bar_hover/support_hover.png','images/nav_bar_hover/contact_hover.png')">
<div id="container" class="container">
<!--Module 1-->
<div id="header" class="header"><img src="images/fireworks_layout/logo_top_s1.gif" width="120" height="125" alt="logo" /><img src="images/fireworks_layout/name_top_s1.gif" width="240" height="125" alt="name" /><img src="images/fireworks_layout/image_top_s1.gif" width="542" height="125" alt="graphic" /></div>
<div id="nav_bar" class="nav"><img src="images/fireworks_layout/nav_left_s1.gif" width="10" height="37" alt="navigation bar" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home_nav','','images/nav_bar_hover/home_hover.png',1)"><img src="images/fireworks_layout/nav_home_s1.gif" name="home_nav" width="98" height="37" border="0" id="home_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_nav','','images/nav_bar_hover/news_hover.png',1)"><img src="images/fireworks_layout/nav_news_s1.gif" name="news_nav" width="98" height="37" border="0" id="news_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog_nav','','images/nav_bar_hover/blog_hover.png',1)"><img src="images/fireworks_layout/nav_blog_s1.gif" name="blog_nav" width="98" height="37" border="0" id="blog_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery_nav','','images/nav_bar_hover/gallery_hover.png',1)"><img src="images/fireworks_layout/nav_gallery_s1.gif" name="gallery_nav" width="98" height="37" border="0" id="gallery_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('career_nav','','images/nav_bar_hover/career_hover.png',1)"><img src="images/fireworks_layout/nav_career_s1.gif" name="career_nav" width="98" height="37" border="0" id="career_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('guestbook_nav','','images/nav_bar_hover/guestbook_hover.png',1)"><img src="images/fireworks_layout/nav_guestbook_s1.gif" name="guestbook_nav" width="98" height="37" border="0" id="guestbook_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sponsors_nav','','images/nav_bar_hover/sponsors_hover.png',1)"><img src="images/fireworks_layout/nav_sponsors_s1.gif" name="sponsors_nav" width="98" height="37" border="0" id="sponsors_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('support_nav','','images/nav_bar_hover/support_hover.png',1)"><img src="images/fireworks_layout/nav_support_s1.gif" name="support_nav" width="98" height="37" border="0" id="support_nav" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactus_nav','','images/nav_bar_hover/contact_hover.png',1)"><img src="images/fireworks_layout/nav_contact_s1.gif" name="contactus_nav" width="98" height="37" border="0" id="contactus_nav" /></a><img src="images/fireworks_layout/nav_right_s1.gif" alt="navigation bar" width="10" height="37" /></div>
<div id="flash"><img src="images/fireworks_layout/flash_main_s1.gif" width="902" height="230" alt="flash video" /></div>
<div id="content"><!--Module 2-->
<div id="left_content">
<div id="bio">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Bio</li>
<li class="TabbedPanelsTab" tabindex="0">Car</li>
<li class="TabbedPanelsTab" tabindex="0">Position</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<h2><img src="images/bio_bio.png" width="149" height="41" alt="" /></h2>
<table width="255" border="0">
<tr>
<td>Nationallity:</td>
<td>Welsh</td>
</tr>
<tr>
<td width="97">Birthplace:</td>
<td width="148">Wrexham, North Wales</td>
</tr>
<tr>
<td>Height:</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Date of birth:</td>
<td>14th March 1985</td>
</tr>
<tr>
<td>Resides:</td>
<td>Corwen, North Wales</td>
</tr>
<tr>
<td>Weight:</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>F1 hero:</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<h2><img src="images/bio_car.png" alt="" width="201" height="41" /></h2>

<table width="332" border="0" align="left">
<tr>
<td>Engine:</td>
<td>Four cylinder, 16 valve &amp; twin overhead</td>
</tr>
<tr>
<td width="97">BHP:</td>
<td width="182">210</td>
</tr>
<tr>
<td>Top speed:</td>
<td>In exess of 160mph</td>
</tr>
<tr>
<td>Acceleration:</td>
<td>0-60mph in 3.0 secconds</td>
</tr>
<tr>
<td>Weight:</td>
<td>550kg including driver and ballast</td>
</tr>
<tr>
<td>Dimensions:</td>
<td><p>4188mm x 1825mm x 950mm</p></td>
</tr>
<tr>
<td>Construction:</td>
<td>Carbon Fibre sandwich with AL/Nomex™ honeycomb</td>
</tr>
<tr>
<td>Colour:</td>
<td>Red &amp; yellow</td>
</tr>
</table>
<p>&nbsp;</p>
</div>
<div class="TabbedPanelsContent">
<h2><img src="images/bio_position.png" alt="" width="201" height="41" /></h2>
<table width="259" border="1" cellspacing="0" bordercolor="#999999">
<tr>
<td align="left"><p>1st</p></td>
<td align="center">Hywel Lloyd</td>
</tr>
<tr>
<td width="41" align="left">2nd</td>
<td width="208" align="center">Adderly Fong</td>
</tr>
<tr>
<td align="left">3rd</td>
<td align="center">Pietro Fantin</td>
</tr>
<tr>
<td align="left">4th</td>
<td align="center">Scott Pye</td>
</tr>
<tr>
<td align="left">5th</td>
<td align="center">Willam Buller</td>
</tr>
<tr>
<td align="left">6th</td>
<td align="center">Lucas Foresti</td>
</tr>
<tr>
<td align="left">7th</td>
<td align="center">Carlos Huertas</td>
</tr>
</table>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
<div id="news_main">
<h3>Silverstone Shakedown </h3>
<div id="news_body" class="news_body">
<p>Welsh racing driver Hywel Lloyd has unveiled his new Formula Three Dallara Mercedes ahead of next week&rsquo;s first official practice session at Rockingham.</p>
<p>The new car with its distinctive red and yellow livery was given a shakedown at Silverstone this week ahead of the first official practice for the British F3 International Series.</p><br />
<p>The 25-year-old from Corwen was happy after the car came through its first outing and he said: &ldquo;We ran it on the runway one day but it was a bit wet so we didn&rsquo;t do anything too dramatic.</p>
<p>&ldquo;Then we had another day when we drove the circuit and gave it a good shakedown to make sure everything is working and that it starts and stops when I want it to.</p>
<p>&ldquo;I was pretty pleased with how it went and I don&rsquo;t think we&rsquo;re too far off but we&rsquo;ll know more after Rockingham next week.&rdquo;</p>
<p>Lloyd has been signed up by Chinese-backed Sino Vision Racing and the visit to Silverstone was also a chance to meet up again with Hong Kong&rsquo;s Adderly Fong, his fellow SVR driver.</p><br />
<p>They will both be at Rockingham next week on Tuesday and Wednesday for the practice session as they gear up for the start of the British F3 International Series at legendary Italian circuit Monza on April 15.</p>
<p>Lloyd was courted by the SVR team after impressing at the F3 Macau Grand Prix in the Far East in November. He was the fastest Briton in practice and that persuaded the Chinese-backed team to give him a special tyrial at Valencia in Spain in December.</p>
<p>There he confirmed the good impression he had made at Macau and SVR came up with a deal which will see Lloyd and Fong spearhead their campaign which is aimed at getting a driver into F1.</p><br />
<p>Home fans will get their first chance to see Lloyd in action in his new team colours a week after Monza when the F3 caravan comes to Oulton Park, near Chester, for the Easter weekend, with racing on Saturday and Monday, April 23 and 25. </p>
</div>
</div>
</div>
<!--Module 3-->
<div id="right_content" class="right_content">
<div id="news_snippet_1" class="featured">
<div id="snippet_1_content">
<p><img src="images/shakedown.jpg" alt="shakedown" width="275" height="117" border="1" align="left" /></p>
<p>Featured 1</p>
</div>
</div>
<div id="news_snippet_2" class="featured"><img src="images/fireworks_layout/news_snippet_s1.gif" width="297" height="147" alt="featured" /></div>
<div id="news_snippet_3" class="featured"><img src="images/fireworks_layout/news_snippet_s1.gif" width="297" height="147" alt="featured" /></div>
<div id="news_snippet_4" class="featured"><img src="images/fireworks_layout/news_snippet_s1.gif" width="297" height="147" alt="featured" /></div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>


CSS Main:

body, h1, h2, h3, h4, p, ul, li {
margin: 0px;
padding: 0px;
}
#bio {
height: 297px;
width: 572px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 3px;
background-image: url(../images/fireworks_layout/bio.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 20px;
float: left;
margin-right: 3px;
text-align: left;
text-indent: 0;
}
#flash {
margin: 0px;
clear: both;
}
#news_main {
float: left;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 0px;
background-repeat: no-repeat;
height: 297px;
width: 602px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding-top: 1px;
background-image: url(../images/fireworks_layout/news_main_s1.gif);
color: #333;
}
#news_main h3 {
text-indent: 30px;
margin-top: 2px;
}
#news_body {
overflow: auto;
height: 250px;
width: 582px;
float: right;
margin-top: 24px;
margin-right: 7px;
margin-bottom: 5px;
margin-left: 5px;
color: #999;
}
.news_body {
scrollbar-face-color: #5C5C5C;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #333333;
scrollbar-3dlight-color: #333333;
scrollbar-darkshadow-color: #333333;
scrollbar-track-color: #333333;
scrollbar-arrow-color: #333333;
}

.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 924px;
}
.header {
margin-top: 0px;
margin-right: auto;
margin-bottom: 3px;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.nav {
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
border: none;
}
.featured {
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #CCC;
}
a img { border: none; }
#news_snippet_1 {
background-image: url(../images/fireworks_layout/news_snippet_s1.gif);
background-repeat: no-repeat;
height: 147px;
width: 297px;
float: left;
}
#snippet_1_content {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 17px;
font-weight: bold;
font-variant: normal;
text-transform: none;
text-align: left;
margin-top: 6px;
margin-right: 7px;
margin-bottom: 5px;
margin-left: 13px;
height: 137px;
width: 282px;
position: static;
}

johnMoss
03-12-2011, 01:38 PM
Without your imagery it's difficult to get a grip on your layout, but you described it as fine in design view. Without the images I cannot say for sure but it doesn't layout in a manner you speak of, what I see is a large image space where the copy should be. That said, I do notice that in the flow of the page you've got bio floated left with a width of 572 px, and then immediately thereafter you've got newsbody floated right with a width of 582 px. Could this be your problem?

DWcourse
03-12-2011, 05:40 PM
Post your page somewhere and give us a url so we can look at it.

number8pie
03-22-2011, 10:16 AM
Thank you for your replies, much appreciated.

John got me thinking maybe that the right content div should really come after the bio div and before the news main div. I tried this but the right content div was misbehaving and moving the other div's about.

In the end I've got it looking how I want it by setting the position to absolute and setting it that way. I know this isn't the ideal way to do things but its working so far and I'll try not to use it often.

Once again thanks for your help.