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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Posts
    684
    Thanks
    24
    Thanked 1 Time in 1 Post

    Having problem with inline div's

    Hey guys.... I know CSS pretty well but have never really coded a full layout before.. so I am starting to learn how to do that...... however I am having some problems..... the divs don't seem to want to display inline; I have even tried changing them to spans & messing around with floats & still no joy.

    Here is my code..

    Code:
    <!-- Start Container -->
    <div id="container">
        <div id="lside"><img src="images/spacer.gif" width="56" /></div>
        <!-- Start Main -->
        <div id="main">
            <div id="header">
                <img name="header" src="images/header.jpg" width="783" height="110" border="0" usemap="#header_map">
                <map name="header_map">
                    <area shape="rect" coords="635,4,690,21" href="index.php" alt="Home">
                    <area shape="rect" coords="694,4,773,21" href="pages/contact.php" alt="Contact Us">
                </map>         
            </div>
        </div>
        <!-- End Main -->
        <div id="rside"><img src="images/spacer.gif" width="55" /></div>    
    </div>
    <!-- End Container -->
    Here is the CSS..

    Code:
    body {
        margin: 0px 0px 0px 0px;
        background-color: #E4E1D8;
    }
    
    #container {
        margin: 0px auto;
        width: 900px;
    }
    
    #container #lside {
        width: 56px;
        height: 110px;
        display: inline;
        background-color: white;
        background-image: url(images/bg-ls.jpg);
    }
    
    #container #rside {
        width: 55px;
        margin-left: 845px;
        height: 110px;
        display: inline;
        background-image: url(images/bg-rs.jpg);
    }
    
    #container #main {
        width: 789px;
        margin-left: 57px;
        display: inline;
        vertical-align: top;
        background-color: #fff;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
    }
    
    #container #main #header {
        margin: 0px auto;
        width: 783px;  
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
    }
    Thanks a lot guys!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The above code itself is not enough to reproduce the issue, since we don't have the images involved in it. Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Apr 2004
    Posts
    684
    Thanks
    24
    Thanked 1 Time in 1 Post
    Ok.... here we are: http://www.1v1.com/stuff/ppcbuzz/

  • #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
    What you are trying to do with inline display should actually be done with floats.

    Try this instead (save a backup copy first):
    Code:
    #container #lside {
        width: 56px;
        height: 110px;
        float:left;
        background-color: blue;
        background-image: url(images/bg-ls.png);
    }
    
    #container #rside {
        width: 56px;
        height: 110px;
        background-image: url(images/bg-rs.png);
        float:right;
        background-color:red;
    }
    
    #container #main {
        width: 785px;
        float:left;
        vertical-align: top;
        background-color: #fff;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
    }
    And then change your HTML so that your code for the #rside div appears BEFORE the code for #main div. So, it should look like this:

    Code:
    <!-- Start Container -->
    <div id="container">
        <div id="lside"><img src="images/spacer.gif" width="56" /></div>
        <div id="rside"><img src="images/spacer.gif" width="56" /></div>
        <!-- Start Main -->
        <div id="main">
            <div id="header">
                <img name="header" src="images/header.jpg" width="783" height="110" border="0" usemap="#header_map">
                <map name="header_map">
                    <area shape="rect" coords="635,4,690,21" href="index.php" alt="Home">
    
                    <area shape="rect" coords="694,4,773,21" href="pages/contact.php" alt="Contact Us">
                </map>         
            </div>
        </div>
        <!-- End Main -->
    </div>
    <!-- End Container -->
    Is that what you were trying to make the page look like?
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning cyphix,
    Instead of floats or display inline, try nesting your divs.
    Like this -
    ppcbuzz.css
    Code:
     body {
        margin: 0px 0px 0px 0px;
        background-color: #E4E1D8;
    }
    #lside {
        width: 900px;
        margin: 0px auto;
        background: #fff url(images/bg-ls.png) repeat-y;
    }
    #rside {
        width: 900px;
        background: url(images/bg-rs.png) repeat-y right;
    }
    #container {
        width: 783px;
        margin: 0px auto;
    }
    #container #main {
    height: 400px;
    width: 783px;
        background-color: #fff;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
    }
    #container #main #header {
        margin: 0px auto;
    width: 783px;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
    }
    .test ul {
        list-style-type: square;
        list-style-image: url(bullet.gif);
        padding: 1em;
        margin: 0;
        list-style:none;
        /*list-style-image:none; IE would also need this*/
    }
    And re-order your markup like this
    Code:
        <div id="lside">
        <div id="rside">
    <div id="container">
        <!-- Start Main -->
        <div id="main">
            <div id="header">
                <img name="header" src="images/header.jpg" usemap="#header_map" width="783" border="0" height="110">
                <map name="header_map">
                    <area shape="rect" coords="635,4,690,21" href="index.php" alt="Home">
                    <area shape="rect" coords="694,4,773,21" href="pages/contact.php" alt="Contact Us">
                </map>         
            </div>
        </div>
        <!-- End Main -->    
    </div>
    <!-- End Container -->
    
    <!--end lside--></div>
    <!--end rside--></div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Apr 2004
    Posts
    684
    Thanks
    24
    Thanked 1 Time in 1 Post
    Thanks a lot guys! Any reason why I can't get my background images to show up in my lside & rside divs?


  •  

    Posting Permissions

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