...

View Full Version : Odd div issue



sillyfishyboy
10-21-2009, 02:18 PM
Hiya people. I have encountered an odd glitch while doing a website this morning and was hoping that someone could give an explanation of why its going wrong.

Basically my parent div is becoming narrower than my child div. but the child div has a fixed width and still displays this problem with non-floated content. the code for my html is as follows:


<div id="tpl_headOuter">
<div id="tpl_headInner">
<div id="tpl_logo" class="floatleft"><img src="dgimgs/logo.jpg" alt=" " /></div>
<div id="tpl_headright" class="floatright">
<div id="tpl_search" class="floatright">

</div>
<div id="tpl_headmenu" class="floatright">

</div>
</div>
<div class="clear"></div>
</div>
</div>


and Css is



body{
background: #EFEFEF url("dgimgs/dg_bodyback.gif") repeat-x left top;
color:#000000;
font-family:Arial,Helvetica,"Trebuchet MS",Trebuchet,sans-serif;
font-size:0.75em;
margin:0px;
padding:0px;}

#tpl_headOuter{
background:none;
background-color:#000000;
color:#ffffff;
margin:0px;
padding:0px;
border:1px solid #ff0000;}

#tpl_headInner {
width:930px;
margin-left:auto;
margin-right:auto;
padding:20px 20px 10px 20px;
border:1px solid #00ff00;}


If I set my viewport as narrower than the 970px of the inner div and scroll accross, the background defined by the outer div disappears.

I can fix this by putting

min-width:970px;
in the outer div. But everything I thought I knew led me to believe that the outer div could not become smaller that the inner div (unless of course it was floating/absolutely positioned).
This also happens with a static paragraph in the inner div.
Anyone have an explaination for this? I can get it to work ok, but it annoys me that I dont understand why it is happening.

btw. This happens in Firefox, Chrome, Opera, Ie7, Ie8 but not in Ie6 (only ones tested)

Rowsdower!
10-21-2009, 02:48 PM
Can we have a link to your test page? Second best option is getting the full source code but links are always preferred...

sillyfishyboy
10-21-2009, 02:55 PM
I have put an early version online at http://preview.inco-soft.net/test/

This will probably be removed by the end of the day though.

Rowsdower!
10-21-2009, 03:38 PM
Hmm, that is strange. You can fix it more flexibly using float:left; with min-width:100%; and width:auto; on the outer div (incase a flexible solution is any more useful).

I'm not sure why it's doing that in the first place though... It's counterintuitive.

sillyfishyboy
10-21-2009, 03:48 PM
Yea, Its probably going to keep me up at night - (very sad I know).
thanks, Normally I would use a flexible width solution, but this site is going to have to have a fixed width (I know!) so to avoid issues later with some of the more dynamic elements I thought it best to keep the whole thing hard coded.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum