Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Odd div issue

  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    2
    Thanked 1 Time in 1 Post

    Odd div issue

    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:
    Code:
    <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

    Code:
    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
    Code:
    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)
    Last edited by sillyfishyboy; 10-21-2009 at 01:28 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Can we have a link to your test page? Second best option is getting the full source code but links are always preferred...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •