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 10 of 10
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts

    CSS <div> positioning...

    I'm trying to migrate from using tables to CSS for positioning page elements...

    I think my question is probably simply answered...I want to take three different <div>'s and position them side-by-side on a page...I've tried different things, but haven't had any luck....How is this done, in general?

    Thanks.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Two ways: absolute positioning, or floats. Alternatively, you can use a combination of floats and static(default) or relative positioning. If you tell us a little more about the specs for this, we can probably tell you what would be best for you.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    "float" seems like it might do the trick, but I'm still having difficulties...could you maybe steer me down the right path with this code:

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE></TITLE>
    </
    HEAD>

    <
    BODY>


    <
    div style="position:relative;left:10%">

    <
    p>BLAH</p>

    </
    div>


    <
    div style="float:right;margin:4px">

    <
    p>BLAH</p>

    </
    div>


    <
    div style="float:right;margin:4px">

    <
    p>BLAH</p>

    </
    div>



    </
    BODY>
    </
    HTML
    I don;t think I want to use absolute positioning casue that will screw up my page layout when I resize the browser....I think..

    Thanks.
    Last edited by chump2877; 02-23-2005 at 12:32 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    you may find something of use here http://css-discuss.incutio.com/?page=ThreeColumnLayouts or you can mess around with something i wrote up really quickly
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Simple 3 Column Layout</title>
    <style type="text/css">
    html, body {
    height:97%;
    margin:5px;
    }
    #container {
    width:100%;
    height:100%;
    }
    #left {
    float:left;
    width:15%;
    height:100%;
    margin:2px;
    border:1px solid #000000;
    }
    #right {
    float:right;
    width:15%;
    height:100%;
    margin:2px;
    border:1px solid #000000;
    }
    #mid {
    width:67%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #000000;
    margin-top:2px;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <div id="mid"></div>
    </div>
    </body>
    </html>

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Awesome, that helps...I can tinker with your code to make it work for me...

    Thank...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Hey, I applied your code to my 3 <div>'s, but I'm still having a problem with the <div> on the right....it's not vertically aligning with the other two <div>'s....you can see it here: http://www.mediamogulsweb.com/ad_banner.php.

    Help, please?

    thanks.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just a quick suggestion:
    Try making your #container wider I think it's not wide enough to allow your divs to be side by side. Maybe you forgot to count in the borders in your calculations?
    Shawn

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    that makes sense...so I tried it, and it doesn't seem to help.....

    Just curious, could all the <br> tags in my middle <div> section be doing this?...dunno, I'm at a loss....

    Helllppp....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Did you change your page recently?

    I tried to take a look for you, and although you have ids defined in your CSS, I didn't see any in your HTML (no #right div, #left div, etc)...

  • #10
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Yes, I did change the page, and the styles should be deleted as I'm no longer using them....and this thread should probably be closed...

    sorry.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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