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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cannot Get DIV's To Go Side by Side

    I'm coding a website for my music, and started using DIV tables.

    I was wondering if anyone could help me with the problem I'm having..

    Even when "algining" the DIV's they still show up default; as one below the next.. I can't seem to align the DIV tables side by side. :/

    Can anyone take a look at my code and possibly help me learn what I'm trying to figure out/missing here?


    [CODE]

    <html>
    <head>
    <title>Clade | Official Site</title>
    <style align="center">
    div.background
    {
    background:url(http://imageshack.us/scaled/landing/854/darktile.jpg) repeat;
    border:0px;
    }
    div.transbox
    {
    width:487px;
    height:75px;
    margin:0px 0px;
    background-color:#000000;
    border-color:#FF0000;
    border:1px;
    opacity:0.8;
    }
    div.transbox p
    {
    margin:30px 40px;
    font-weight:bold;
    color:#FFFFFF;
    }
    </div>
    </style>
    <style align="right">
    div.bg
    {
    background:url(http://imageshack.us/scaled/landing/854/darktile.jpg) repeat;
    border:0px;
    }
    div.tbox
    {
    width:250px;
    height:100%;
    margin:0px 25px;
    background-color:#000000;
    border-color:#FF0000;
    border:1px;
    opacity:0.8;
    }
    div.tbox p
    {
    margin:30px 40px;
    font-weight:bold;
    color:#FFFFFF;
    }
    </div>
    </style>
    <style align="left">
    div.bg
    {
    background:url(http://imageshack.us/scaled/landing/854/darktile.jpg) repeat;
    border:0px;
    }
    div.tbox
    {
    width:250px;
    height:100%;
    margin:0px 25px;
    background-color:#000000;
    border-color:#FF0000;
    border:1px;
    opacity:0.8;
    }
    div.tbox p
    {
    margin:30px 40px;
    font-weight:bold;
    color:#FFFFFF;
    }
    </div>
    </style>




    </head>

    <body background="http://imageshack.us/scaled/landing/854/darktile.jpg">

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>


    <center><img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash4/374188_516856551712120_1190662781_n.jpg" align="top" transparency="69%"></center>

    <div class="background" align="center">
    <div class="transbox" align="center">
    <font color="FF0000">
    <center><b>Links</b></center>
    <p>

    </p>
    </font>
    </div>

    </div>
    <div class="bg" align="right">
    <div class="tbox" align="right">
    <font color="FF0000">
    <center><b>Social</font></b></center>
    <p>
    <a class="twitter-timeline" href="https://twitter.com/PClade" data-widget-id="344191310154055680">Tweets by @PClade</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+" ://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    <p>
    <div class="fb-like-box" data-href="https://www.facebook.com/clademusic" data-width="250" data-height="500" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div>
    </p>

    </div>
    </div>
    <div class="bg" align="left">
    <div class="tbox" align="left">
    <font color="FF0000">
    <center><b>Releases</font></b></center>
    </div>
    </div>

    </body>
    </html>

    [CODE]

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    It's really simple. You make a wrapper div of a width large enough to contain all the divs involved, don't forget to include borders, padding and margins in their measurements, then you float them all right or left. You just need to specify so that different browser will render the same result.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Hi clade,

    Another solution is again create the wrapper div large enough to contain the inner divs, then set all the children divs of the wrapper div to display: inline-block.

    For example:
    Code:
    <div id="wrapper">
        <div style="background: blue;"></div><div style="background: green;"></div><div style="background: yellow;"></div>
    </div>
    CSS:
    Code:
    #wrapper
    {
        width: 600px;
        background: red;
        height: 200px;
    }
    
    #wrapper > div
    {
        width: 200px;
        height: 200px;
        display: inline-block;
    }
    If you do it this way you will need to create the divs all on one line as I believe IIRC I was told when displaying inline-block, if you create a line break/new line? it causes a slight gap between the elements when rendered in the browser. I know this is the same with list-items when displaying inline-block.

    Regards,

    LC.


  •  

    Posting Permissions

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