SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Getting proper display on 3 DIVs

    DIV A is a container of DIV B and DIV C. DIV A has a background pattern that repeats along the y-axis, so as content in either DIV B or DIV C extends, the BG is automatically repeated.

    DIV B is 260px wide and contains content that expands it vertically. It needs to set at the 0,0 coordinate inside A, which it does automatically due to document flow.

    My problem is getting C to sit "to the right of B". You see, DIV A is 960px wide. Since B is taking up 260 of that, it leaves 760pixels left inside. I need DIV C to sit as a column to the right of B. It is 669px wide and has a margin-left value of 31px. (This gives space between DIV B and DIV C, and the space between DIVs B and C allows the repeating BG of DIV A to show through (a dividing line)

    My problem is that floating either element will allow it to extend past DIV A rather than expand it. Something like:

    -A---------
    |-B-|-C---|
    ||*|||***||
    |---||***||
    |...||***||
    |...|-----|
    -----------


    (sorry for the ASCII art)

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I presume that you just want div A to expand to the same height as the children?

    Code:
    #div-a {
      overflow: auto;
    }
    * html #div-a {
      height: 1px;
    }
    If that's not what you're after, could you provide some sample code please?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Read the FAQ on floats (especially clearing) for why Dave's example above is needed

  4. #4
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I read the Floatutorial (It has Selectutorial and info on Clears) but reading doesn't mean comprehension.

    I can see how floating removes the parent DIV from expanding, but after placing the above CSS on my parent DIV, it merely created a vertical and horizontal scrollbar on the parent DIV.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then you must have a height set on div A - remove that and it should work.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    it merely created a vertical and horizontal scrollbar on the parent DIV.
    As centauri said above it sounds as though you have set a fixed height on the element and that you have content that is greater than your width.

    The vertical scrollbar sounds like you are using height:100% (or something similar) for IE then you need to hide the overflow property from IE or use one of the other clearing methods mentioned in the faq on floats.

    The horizontal scrollbar is probably because you have overstated the horizontal dimensions somewhere because a scrollbar would not appear otherwise. (Or it may be the 3px jog adding an extra 3px to the mix.)

    It might be easier of you post the code you are using and we can see better what's going on

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, sounds like a height or width is applied to the containing div but it has content that exceeds this width or height?

    If you can't figure it out, please post the code and I or someone else will be able to point you in the right direction

  8. #8
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No height specification on DIV A

    Just:

    #divA{
    width: 960px;
    margin: 0 auto;
    background: url('../images/hodercontent_bg.gif') top left repeat-y;
    overflow: auto;
    }

    #divB {
    width: 260px;
    }

    #divC {
    width: 669px;
    }

  9. #9
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Also let me take this one step further. The site is comprised of a series of divs, each clearing one another. These divs stretch the entire width of the viewport, as they should, but inside each is a div with a class.

    Said class makes the enclosed div have a margin: 0 auto; and a width of 960px;

    This in essence allows the containing div to have a repeating BG that fills the screen, but it's container div inside is only 960px wide, and it's the one where the content is placed.

    The div in question here is the only one that breaks this process, because it has inside of it, 2 divs (B and C) and it's container div (A) has a VERTICALLY-repeating pattern, rather than a horizontal one.

    It's getting B and C to sit pretty and stretch A that I'm trying to setup here.

    Underneath all this is 1 more instance of a div that stretches the viewport and has a container div (960px, margin set to 0 auto) called the footer, but it's working just fine.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You're not making this easy for us are you ?

    From the information you have given us above then I can guess that this is your whole code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #divA{
    width: 960px;
    margin: 0 auto;
    background:red url('../images/hodercontent_bg.gif') top left repeat-y;
    overflow: auto;
    }
    
    #divB {
    width: 260px;
    float:left;
    background:blue
    }
    
    #divC {
    width: 669px;
    margin-left:31px;
    float:left;
    background:green
    }
    
    
    </style>
    </head>
    <body>
    <div id="divA">
        <div id="divB">Div B</div>
        <div id="divC">Div C</div>
    </div>
    </body>
    </html>
    Which seems to be working properly without scrollbars so there must be something else that you are not telling us

  11. #11
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head><script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
    <script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
     
            <title>ircso intranet&trade; | home</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="language" content="en" />
        <meta name="revisit-after" content="7 days" />
            <base href="http://localhost/newintranet/" />
     
        <link rel="alternate" type="application/rss+xml" title="blogs" href="http://localhost/newintranet//includes/rss/" />
     
        <link rel="shortcut icon" href="favicon.ico" />
     
        <link href="includes/css/intranet.css" rel="stylesheet" type="text/css" media="screen" />
            <link href="includes/css/intranet_print.css" rel="stylesheet" type="text/css" media="print" />
     
        <script type="text/javascript" src="includes/js/intranet.js"></script>
     
     
        <!-- Copyright (C) 2007 Aaron R. Martone. -->     <!-- All Rights Reserved.  Access to and/or use of any resource on the aaronmartone.com domain -->
        <!-- constitutes your acceptance of the user agreement found at [url]http://www.aaronmartone.com/legals/agreement[/url] -->
     
        <script type="text/javascript">
    <!--
        _CF_checkCFForm_1 = function(_CF_this)
        {
            //reset on submit
            _CF_error_exists = false;
            _CF_error_messages = new Array();
            _CF_error_fields = new Object();
            _CF_FirstErrorField = null;
     
     
            //display error messages and return success
            if( _CF_error_exists )
            {
                if( _CF_error_messages.length > 0 )
                {
                    // show alert() message
                    _CF_onErrorAlert(_CF_error_messages);
                    // set focus to first form error, if the field supports js focus().
                    if( _CF_this[_CF_FirstErrorField].type == "text" )
                    { _CF_this[_CF_FirstErrorField].focus(); }
     
                }
                return false;
            }else {
                return true;
            }
        }
    //-->
    </script>
    </head>
     
     
    <body>
        <form id="frmIntranet" action="/newintranet/index.cfm" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return _CF_checkCFForm_1(this)">
     
    <!-- // :: Wrapper DIV :: // -->
        <div id="wrapper">
            <!-- // :: InfoBar DIV :: // -->
            <div id="infoBar">
                <div class="holder">
                    <p class="fltLeft">date &amp; time Oct 23, 2007 @ 1424 hrs</p>
                    <p class="fltRight">Aaron Martone | Dreamgriever</p>
                </div>
            </div>
            <!-- // :: Header DIV :: // -->
            <div id="header">
                <div class="holder">
                    <p><img src="includes/images/logo.gif" width="277" height="119" alt="" /></p>
                </div>
            </div>
            <!-- // :: Menu DIV :: // -->
            <div id="menu">
                <div class="holder">
                    <p class="fltLeft">
                        <a href="" title="" class="menuHome">&nbsp;</a>
                        <a href="" title="" class="menuProgramsOn">&nbsp;</a>
                        <a href="" title="" class="menuResources">&nbsp;</a>
                        <a href="" title="" class="menuSupport">&nbsp;</a>
                    </p>
                    <p class="fltRight"><input type="text" class="searchBox" id="txtSearch" name="txtSearch" /><a class="searchButton" href="#" title="">&nbsp;</a></p>
                </div>
            </div>
            <!-- // :: SubMenu DIV :: // -->
            <div id="subMenu">
                <div class="holder">
                    <p>Submenu here</p>
                </div>
            </div>
            <!-- // :: Content DIV :: // -->
            <div id="content">
                <div id="holderContent">
                    <!-- // :: Sidebar DIV :: // -->
                    <div id="sideBar">
                        <p>Sidebar</p>
                        <p>Sidebar2</p>
                    </div>
     
                <!-- // :: InnerContent DIV :: // -->             <div id="innerContent">
                    <p>Inner Content</p>
                    <p>Inner Content</p>
                    <p>Inner Content</p>
                </div>
     
                </div>
            </div>
            <!-- // :: Footer DIV :: // -->
            <div id="footer">
                <div class="holder">
                    <p>Footer here</p>
                </div>
            </div>
        </div>
     
        </form>
    </body>
     
     
     
    </html>

    Code CSS:
    @media screen {
     
        * {
            border: 0;
            padding: 0;
            margin: 0;
            vertical-align: middle;
        }
     
        body {
            background: url('../images/bg.gif') top left repeat #cdccb2;
            font-size: 62.5%;
        }
     
        td {
            vertical-align: top;
        }
     
        p,li,td {
            font-size: 1.3em;
            font-family: Georgia, "Times New Roman", Times, serif;
            color: #765f40;
        }
     
        #wrapper {
            height: 100%;
            width: 100%;
            padding-bottom: 67px;
        }
     
        #infoBar {
            background: url('../images/infobar_bg.gif') top left repeat-x;
            height: 36px;
            clear: both;
            overflow: hidden;
        }
     
            #infoBar p {
                line-height: 36px;
                font-family: Geneva, Arial, Helvetica, sans-serif;
                text-transform: uppercase;
                font-size: 1.1em;
                font-weight: bold;
                color: #fff;
            }
     
        #header {
            background: url('../images/header_bg.gif') top left repeat-x;
            height: 161px;
            clear: both;
            overflow: hidden;
        }
     
            #header p {
                line-height: 161px;
            }
     
            #header div {
                background: url('../images/header_bg.jpg') top right no-repeat;
            }
     
        #menu {
            background: url('../images/menu_bg.gif') top left repeat-x;
            height: 41px;
            clear: both;
            overflow: hidden;
        }
     
            #menu p {
                line-height: 41px;
            }
     
            #menu a.menuHomeOn, #menu a.menuProgramsOn, #menu a.menuResourcesOn, #menu a.menuSupportOn {
                float: left;
                display: block;
                height: 41px;
                text-decoration: none;
                cursor: default;
                margin-right: 10px;
            }
     
            #menu a.menuHomeOn {
                background: url('../images/menu_home.gif') -69px 0 no-repeat;
                width: 69px;
            }
     
            #menu a.menuProgramsOn {
                background: url('../images/menu_programs.gif') -96px 0 no-repeat;
                width: 96px;
            }
     
            #menu a.menuResourcesOn {
                background: url('../images/menu_resourcess.gif') -96px 0 no-repeat;
                width: 96px;
            }
     
            #menu a.menuSupportOn {
                background: url('../images/menu_support.gif') -84px 0 no-repeat;
                width: 84px;
            }
     
            #menu a.menuHome, #menu a.menuPrograms, #menu a.menuResources, #menu a.menuSupport {
                float: left;
                display: block;
                height: 41px;
                text-decoration: none;
                margin-right: 10px;
            }
     
            #menu a.menuHome {
                width: 69px;
                background: url('../images/menu_home.gif') 0 0 no-repeat;
            }
     
            #menu a.menuPrograms {
                width: 96px;
                background: url('../images/menu_programs.gif') 0 0 no-repeat;
            }
     
            #menu a.menuResources {
                width: 96px;
                background: url('../images/menu_resources.gif') 0 0 no-repeat;
            }
     
            #menu a.menuSupport {
                width: 84px;
                background: url('../images/menu_support.gif') 0 0 no-repeat;
            }
     
                #menu a.menuHome:hover {
                    background-position: -69px 0;
                }
     
                #menu a.menuPrograms:hover {
                    background-position: -96px 0;
                }
     
                #menu a.menuResources:hover {
                    background-position: -96px 0;
                }
     
                #menu a.menuSupport:hover {
                    background-position: -84px 0;
                }
     
            #menu a.searchButton {
                float: left;
                display: block;
                width: 33px;
                height: 41px;
                background: url('../images/btn_search.gif') 0 0 no-repeat;
                text-decoration: none;
            }
     
                #menu a.searchButton:hover {
                    background-position: -33px 0;
                }
     
            #menu input.searchBox {
                float: left;
                margin-top: 10px;
                width: 180px;
                border: 1px solid #c2996a;
                padding: 2px;
                margin-right: 5px;    
                display: inline;
            }
     
        #subMenu {
            background: url('../images/submenu_bg.gif') top left repeat-x;
            clear: both;
            height: 95px;
            overflow: hidden;
            padding: 15px;
        }
     
            #subMenu a {
                color: #483c2e;
                text-decoration: none;
                padding: 10px 5px;
            }
     
                #subMenu a:hover {
                    color: #a38868;
                }
     
        #footer {
            background: url('../images/footer_bg.gif') top left repeat-x;
            height: 52px;
            clear: both;
            width: 100%;
            overflow: hidden;
            padding-top: 15px;
        }
     
        #content {
            background: url('../images/content_bg.gif') top left repeat-x #f1f0d1;
            padding: 20px 15px 15px 15px;
            clear: both;
        }
     
            #content #sideBar {
                width: 260px;
            }
     
            #content #innerContent {
                width: 669px;
            }
     
        div.holder {
            width: 960px;
            margin: 0 auto;
        }
     
        span.sideBarTitle {
            display: block;
            font-size: 1.6em;
        }
     
        #holderContent {
            width: 960px;
            margin: 0 auto;
            background: url('../images/holdercontent_bg.gif') top left repeat-y ;
            overflow: auto;
        }
     
            * html #holderContent {
                height: 1px;
            }
     
        .fltLeft {
            float: left;
        }
     
        .fltRight {
            float: right;
        }
     
        .taCenter {
            text-align: center;
        }
     
    }

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have set holder-content to overflow:auto but you have also set it to be 1px high.
    Code:
     #holderContent {
            width: 960px;
            margin: 0 auto;
            background: url('../images/holdercontent_bg.gif') top left repeat-y ;
            overflow: auto;
        }
       
            * html #holderContent {
                height: 1px;
            }
    


    That means that for any content greater than 1px then scrollbars will appear. You told us you hadn't set any height but its right there in black and white

    There is no need for the height:1px hack anyway because the element has a width of 960px which will automatically enforce "layout" on the element if that's what you were trying to do.

    Also your sidebar and inner-content would need to be floated if you want them side by side:

    Code:
     #content {
            background: url('../images/content_bg.gif') top left repeat-x #f1f0d1;
            padding: 20px 15px 15px 15px;
            clear: both;
                    overflow:auto;
        }
       
            #content #sideBar {
                width: 260px;
                            float:left;
                         
            }
           
            #content #innerContent {
                width: 669px;
                            float:right;
                         
            }
    Hope that was what you were talking about

  13. #13
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you look at post #2, csswiz told me to put 1px height using the * notation. So I had put that in there. Didn't know it conflicted with what you guys were saying.

    I will try what you posted when I get back to work tomorrow and let you know. Thank you for looking it over.

  14. #14
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by aaron.martone View Post
    If you look at post #2, csswiz told me to put 1px height using the * notation. So I had put that in there. Didn't know it conflicted with what you guys were saying.

    I will try what you posted when I get back to work tomorrow and let you know. Thank you for looking it over.
    You're right. It was an error in the original code.

    When overflow is set to 'auto' or 'hidden' it will contain it's floats - But IE doesn't do this, so that's why it was suggested to force 'Layout' on that element using the height which conflicts with the overflow - which will make the element exactly the size of the given dimensions and if 'hidden' chop off what hangs outside those dimensions, or if 'auto' give scroll bars.

    If the element doesn't have a dimension set I typically use width:100&#37;; instead, which makes both parties happy.
    Code:
    #div-a {
      overflow: hidden;
      width: 100%;
    }
    Occasionally using 'overflow: auto' will make unwanted scroll bars appear so I stick with hidden.

    Hope it helps

  15. #15
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I was providing code based on what had originally been provided. Using height: 1&#37;; would have probably worked though and would probably have been the approach I'd have taken if it wasn't possible to provide a width for the parent (which sometimes it's not depending on padding/margin/border).

    Mark, using overflow: hidden; does sometimes work better than overflow: auto; but I'd tend to find that this glosses over other problems with the code as this probably means that there's something else in the code that's forcing this scrollbar. Therefore I've started using overflow: auto; so that it's easier to spot other problems and fix them.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by aaron
    If you look at post #2, csswiz told me to put 1px height using the * notation.
    lol - so its Dave's fault

    The overflow should have been hidden from ie6 because IE will auto-clear when the element has "layout".
    Code:
    #div-a {
      overflow: auto;
    }
    * html #div-a {
      height: 1px;
    overflow:visible;
    }

  17. #17
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Darn.

    You guys have such a great understanding of CSS and the bugs to be on the lookout for. I took your code and applied it and it's working flawlessly now in Firefox and MSIE.

    I wish I had that level of comprehension. I know the basics, and even intermediate CSS, but, as what was shown here, that often isn't enough. Much appreciated for the help to everyone who responded. Thank you!

  18. #18
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by csswiz View Post
    Mark, using overflow: hidden; does sometimes work better than overflow: auto; but I'd tend to find that this glosses over other problems with the code as this probably means that there's something else in the code that's forcing this scrollbar. Therefore I've started using overflow: auto; so that it's easier to spot other problems and fix them.
    I've found it triggers scroll bars when you click links next the edge of an overflow: auto; parent, though it's probably not a bad idea to use auto to pick up on other errors.
    Code:
    <div style="overflow: auto">
      <a href="#" style="float: left; width: 100%; background: #F60">Click me :)</a>
    </div>
    With a little testing it seems to only bring scroll bars if the float is against the bottom or the right edges of the parent.
    Code:
    <div style="overflow: auto">
      <a href="#" style="float: right; width: 200px; background: #F60; clear: both">Click me :)</a>
      <a href="#" style="float: left; width: 200px; background: #F60; clear: both">Click me :)</a>
      <a href="#" style="float: right; width: 100%; background: #F60; clear: both">Click me :)</a>
    </div>

  19. #19
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never seen that one before Mark, so it's nice to know.

    It looks like it's being caused by the outline as using outline: none; fixes it but obviously shouldn't be done for accessibility.

    If this was happening then I'd probably switch to overflow: hidden; but would tend to use overflow: auto; initially to check that there weren't any other issues first.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Mark,

    The problem with the link is a bug in Firefox in that in that on focus the outline is drawn around the link. The specs clearly state that outlines should not cause reflow or overflow but Firefox gets this wrong and causes the box to overflow thus creating the scrollbsr.

    It could be fixed with a:focus{outline:none;} but of course keyboard users wouldn't be able to tab to the link so its not a great idea. You either have to make sure there is some room around the anchor or use the overflow:hidden version instead.


Bookmarks

Posting Permissions

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