/    Sign up×
Community /Pin to ProfileBookmark

parent Div width affects child divs float?

Copy linkTweet thisAlerts:
Jul 01.2009

Hi Everyone.

I have been trying to deal with this issue for months now. No Jokes.

I have a wepage that has a main div (#pagewrapper) and inside it is another div (#pagecontainer) with margins set to auto to center the div. Insede the #pageontainer div there is a left floated #navwrapper div and another div #contentwrapper which is also left floated. These two divs the nav and content are meant to be next to each other side by side.

Heres the problem. In firefox all is fine however in IE6 the #contentwrapper div is forced below the #navwrapper. I have tried expanding the width of the #pagecontainer. from 869 (which is perfect no gaps) to 878 this fixes it but there is a gap on the right in both firefox and IE.

Please help if you can, here is the HTML and CSS code:

[CODE]<!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=”assets/styles/style01.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
<!–
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_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_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];}
}

function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf(“MSIE”) != -1 && userAgent.indexOf(“Opera”) == -1);
var isWin = (appVersion.toLowerCase().indexOf(“win”) != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins[“Shockwave Flash”] ? plugins[“Shockwave Flash”].description : “”;
desc = plugins[“Shockwave Flash 2.0”] ? plugins[“Shockwave Flash 2.0”].description : desc;
if (desc == “”) flashVer = -1;
else{
var descArr = desc.split(” “);
var tempArrMajor = descArr[2].split(“.”);
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != “”) ? descArr[3].split(“r”) : descArr[4].split(“r”);
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + “.” + verMinor);
}
}
// WebTV has Flash Player 4 or lower — too low for video
else if (userAgent.toLowerCase().indexOf(“webtv”) != -1) flashVer = 4.0;

var verArr = reqVerStr.split(“,”);
var reqVer = parseFloat(verArr[0] + “.” + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = “http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash”;
}
}
}
}
//–>
</script>
<script src=”Scripts/AC_RunActiveContent.js” type=”text/javascript”></script>
</head>

<body onload=”MM_preloadImages(‘assets/images/aboutus_over.jpg’,’assets/images/gallery_over.jpg’,’assets/images/childlearning_over.jpg’,’assets/images/readytolearn_over.jpg’,’assets/images/brightstar_over.jpg’,’assets/images/thefederation_over.jpg’,’assets/images/events_over.jpg’,’assets/images/awards_over.jpg’);MM_CheckFlashVersion(‘8,0,0,0′,’Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?’);”>
<div id=”pagewrapper”>
<div id=”pagecontainer”>
<div id=”navwrapper”><img id=”index_01″ src=”assets/images/index_01.jpg” width=”193″ height=”127″ alt=”” /><img src=”assets/images/aboutus.jpg” width=”193″ height=”93″ id=”Image1″ onmouseover=”MM_swapImage(‘Image1′,”,’assets/images/aboutus_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /><img src=”assets/images/gallery.jpg” width=”193″ height=”60″ id=”Image2″ onmouseover=”MM_swapImage(‘Image2′,”,’assets/images/gallery_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /><img src=”assets/images/childlearning.jpg” width=”193″ height=”60″ id=”Image3″ onmouseover=”MM_swapImage(‘Image3′,”,’assets/images/childlearning_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /><img src=”assets/images/readytolearn.jpg” width=”193″ height=”60″ id=”Image4″ onmouseover=”MM_swapImage(‘Image4′,”,’assets/images/readytolearn_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /><img src=”assets/images/brightstar.jpg” width=”193″ height=”60″ id=”Image5″ onmouseover=”MM_swapImage(‘Image5′,”,’assets/images/brightstar_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /><img src=”assets/images/thefederation.jpg” width=”193″ height=”60″ id=”Image6″ onmouseover=”MM_swapImage(‘Image6′,”,’assets/images/thefederation_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /><img src=”assets/images/events.jpg” width=”193″ height=”60″ id=”Image7″ onmouseover=”MM_swapImage(‘Image7′,”,’assets/images/events_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /><img src=”assets/images/awards.jpg” width=”193″ height=”60″ id=”Image8″ onmouseover=”MM_swapImage(‘Image8′,”,’assets/images/awards_over.jpg’,1)” onmouseout=”MM_swapImgRestore()” /></div>
<div id=”contentwrapper”>
<div id=”header”><img src=”assets/images/index_02.jpg” /></div>
<div id=”content”>
<h1 class=”centerheading”>Welcome</h1>
<p>
<script type=”text/javascript”>
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0′,’width’,’642′,’height’,’251′,’id’,’FLVPlayer’,’src’,’FLVPlayer_Progressive’,’flashvars’,’&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=assets/Media/orion_movie&autoPlay=false&autoRewind=false’,’quality’,’high’,’scale’,’noscale’,’name’,’FLVPlayer’,’salign’,’lt’,’pluginspage’,’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’movie’,’FLVPlayer_Progressive’ ); //end AC code
</script><noscript><object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”642″ height=”251″ id=”FLVPlayer”>
<param name=”movie” value=”FLVPlayer_Progressive.swf” />
<param name=”salign” value=”lt” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />
<param name=”FlashVars” value=”&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=assets/Media/orion_movie&autoPlay=false&autoRewind=false” />
<embed src=”FLVPlayer_Progressive.swf” flashvars=”&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=assets/Media/orion_movie&autoPlay=false&autoRewind=false” quality=”high” scale=”noscale” width=”642″ height=”251″ name=”FLVPlayer” salign=”LT” type=”application/x-shockwave-flash” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” />
</object></noscript>
</p>
</div>
<div id=”footerimage”><img src=”assets/images/index_07.jpg” width=”675″ height=”316″ /></div>
</div>
</div>
</div>
</body>
</html>
[/CODE]

[CODE]
@charset “UTF-8”;
body {
background-color: #35609e;
margin-top: 0px;
}
#pagewrapper {
font-family: “Comic Sans MS”, Arial, Verdana, sans-serif;
}
#pagecontainer {
height: 904px;
width: 878px;
background-color: #FFFFFF;
border-right-width: 15px;
border-bottom-width: 15px;
border-left-width: 15px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #edc640;
border-bottom-color: #edc640;
border-left-color: #edc640;
margin-right: auto;
margin-left: auto;
}
#navwrapper {
height: 904px;
width: 193px;
float: left;
background-color: #3C632E;
}
#navwrapper img {
float: left;
background-color: #456232;
}
#contentwrapper {
float: left;
height: 850px;
width: 676px;
}
#header {
height: 187px;
width: 685px;
}
#content {
float: left;
width: 656px;
padding-left: 20px;
height: 400px;
}
#footerimage {
height: 316px;
width: 675px;
background-color: #33CC99;
float: left;
}
h1 {
}
.centerheading {
background-position: center;
text-align: center;
}
[/CODE]

Thank you very much in advance.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAJul 01.2009 — What I usually do, in these instances, is change the position of the floated div to "relative" and then use a fix like left: -5px or whatever to make it alleviate the gap, and use a conditional comment to apply it only to IE6.
Copy linkTweet thisAlerts:
@sneeuauthorJul 02.2009 — Thanks KDLA

I did try your method but sadly the conentwrapper div still jumps below? I applied the relative, -5 left to the navwrapper and the content wrapper then i tried to apply it to both at the same time, still to no avail.

Is it perhaps something to do with padding or margins?

Thanks again

Sneeu
Copy linkTweet thisAlerts:
@sneeuauthorJul 02.2009 — YAY!

I got it I made the navwrapper and the content wrappers display inline.
Copy linkTweet thisAlerts:
@unigogoJul 03.2009 — You could start from this to find the problem

[CODE]<!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>
<style>

body {
background-color: #35609e;
margin-top: 0px;
}
#pagewrapper {
font-family: "Comic Sans MS", Arial, Verdana, sans-serif;
}

#pagecontainer {
height: 904px;
width: 878px;


}


#navwrapper {
height: 904px;
width: 193px;
float: left;
background-color: #3C632E;
}

#contentwrapper {
float: left;
height: 850px;
width: 676px;
background-color:#fff
}
#header {
height: 187px;
width: 676px;
background-color:#fff
}
#content {
float: left;
width: 676px;
padding-left: 20px;
height: 400px;
}
#footerimage {
height: 316px;
width: 676px;
background-color: #33CC99;
float: left;
}


</style>
</head>

<body >
<div id="pagewrapper">
<div id="pagecontainer">
<div id="navwrapper">
</div>
<div id="contentwrapper">
<div id="header">header image</div>
<div id="content">
<h1 class="centerheading">Welcome</h1>
content
</div>
<div id="footerimage">footer</div>
</div>
</div>
</div>
</body>
</html>[/CODE]
×

Success!

Help @sneeu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...