Results 1 to 6 of 6
  1. #1
    Grandma broke her coccyx! Uncle Rico's Avatar
    Join Date
    May 8th, 2007
    Location
    North Carolina
    Posts
    2,238
    CSS Nested Div Tag Problem
    I have a main canvas div that is 800 pixels wide and the margins are set to auto. It displays in the center of the browser. Now, when I nest some div's inside the main canvas div, I have a problem. In IE, my div boxes show inside the main div canvas, which is good. Both Firefox and Opera render the div boxes just below that main canvas and not inside it. The main canvas div renders a 800pixel wide bar that is about 10pixels tall. I tried setting the height to 100%, but that did nothing. If I add position:absolute; to canvas, I can fix the problem, but then I can't get the main canvas centered based on browser width.

    Code:
    #canvas {
    	background:#xxxxxx;
    	width:800px;
    	margin-left:auto;
    	margin-right:auto;
    	border-left: 1px solid #xxxxxx;
    	border-right: 1px solid #xxxxxx;
    	border-bottom: 1px solid #xxxxxx;
    }

  2. #2
    ABW Ambassador Doug247's Avatar
    Join Date
    January 18th, 2005
    Location
    DE USA
    Posts
    931
    SMB,

    I'm not a CSS expert but I think you need to float nested Div Tags

    .divclass {float: left;} will place that div in the upper left of its' container.

    You'll also need to use clear to tell the browser to stop floating the divs.

    This may also help http://css.maxdesign.com.au/floatutorial/
    Thanks,
    Doug

  3. #3
    ABW Ambassador
    Join Date
    January 18th, 2005
    Location
    Los Angeles
    Posts
    4,053
    I'm no CSS guru, all I can do based on the limited code is take a guess based on what I've read about browser problems.

    How wide are the divs inside the canvas div? And is there a div that's cleared?

    IE renders margins differently AFAIK. I think that's the reason people zero out all margins and padding for the page starting out (over-riding browser defaults), so they can control each element as needed.

  4. #4
    Grandma broke her coccyx! Uncle Rico's Avatar
    Join Date
    May 8th, 2007
    Location
    North Carolina
    Posts
    2,238
    I have something like this.....

    Code:
    <html>
    ........
    <div id="canvas">
       <div id="leftside">data on left side of page</div>
       <div id="rightside">data on right side of page</div>
    </div>
    ........
    </html>
    
    
    #canvas {
    	background:#xxxxxx;
    	width:800px;
    	margin-left:auto;
    	margin-right:auto;
    	border-left: 1px solid #xxxxxx;
    	border-right: 1px solid #xxxxxx;
    	border-bottom: 1px solid #xxxxxx;
    }
    #leftside {
            width:250px;
            clear:left;
            float:left;
    }
    #rightside {
            width:500px;
            clear:right; 
            float:left;
    }

  5. #5
    ABW Ambassador
    Join Date
    January 18th, 2005
    Location
    Los Angeles
    Posts
    4,053
    Again, I'm definitely not an expert on positioning and floats, but I did read someplace that with floated divs it can help to put a footer div underneath and use it for clearing to straighten out what comes before.

  6. #6
    Grandma broke her coccyx! Uncle Rico's Avatar
    Join Date
    May 8th, 2007
    Location
    North Carolina
    Posts
    2,238
    Marcia,

    Good job. Your right. Through trial and error, I finally see that putting a "clear:both;" just before the closing canvas div does the trick.

  7. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Help with div tag, please...
    By navafeldman in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: July 11th, 2009, 09:05 PM
  2. Nested Tag Replacement...????
    By AddHandler in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: August 13th, 2006, 06:36 PM
  3. DIV tag question
    By Doug247 in forum Programming / Datafeeds / Tools
    Replies: 1
    Last Post: March 18th, 2004, 02:15 PM
  4. CSS and Div tag question
    By Doug247 in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: March 12th, 2004, 05:35 PM

Posting Permissions

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