Home/ Questions/Q 9257939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T12:16:09+00:00

I’m trying to accomplish something as simple as putting to div’s side by side.

  • 0

I’m trying to accomplish something as simple as putting to div’s side by side. The thing is I’m very capable in CSS, however the solutions I’m trying to use do not work as intended, here is the problem.

I’ved used: (so both divs is laying side by side)

display: block;
float: left;
margin-right: 15px;

And it work flawlessly LOCALLY, the thing is I’m creating this as a template solution which the html & css are being build into a system and after that will be generated to a javascript tag. The javascript tag will then be thrown into different websites and therefore, it’s very important it acts alike in all browsers.

Then i tryed position the div (the one laying on the side) to: absolute and using left to position it on the side… That don’t work either because its absolute to where the tag is implemented, meaning it would show up different places depending which site the tag is implemented.

So my question is, is there a way i can use either css or javascript so my divs are side by side no matter where i implement the tag?

Below is my code:

HTML:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Sidekick</title>     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/sidekick.js"></script>      
    <link href="css/style.css" rel="stylesheet" type="text/css">    
    </head>
        <body>  
        <div class="eas_sidekick_divs">     
            <div id="eas_sidekick">
                <div class="eas_sidekick_open">x</div>
            </div>
            <div id="eas_sidekick_container"></div>             
        </div>  
    </body>
</html>

CSS:

.eas_sidekick_divs div
{
    display: block;
    float: left;
    margin-right:15px;  
}

#eas_sidekick
{
    width:300px;
    height:600px;
    background: #ccc;
}

#eas_sidekick_container
{   
    width: 850px;
    height:600px;
    background: #ccc;           
}

This solution works locally as said, but not after i generate this to a tag. You can see the example here:
http://yoursource.eu/stuff/Templates/sidekick/300×250/javascript.html

Look in the different browsers like: IE & Chrome and see the difference and how weird it acts.

Click on the button of the little banner to the right stating: “exiting me” and you’ll see the div expand, the expanded div is the one i want to position to right at all times.

Hope u can help me out! 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve figured out myself a javascript solution for fixing my issue.

    I’ve used position absolute to fix it in all browsers and then created a javascript that depending on the width of the site, it position itself always 10 pixels to the right of my container.

    Below is my code:

    $(document).ready(function() {

    var cssWidth = 1024;
    var cssPos = 10;

    $("#eas_sidekick_container").hide();
    $("#eas_sidekick_container").css(
    {
        width: '0px',
        position: 'absolute',
        top: '0px',
        left: cssWidth + cssPos
    });

 $(".eas_sidekick_open").click(
            function() {
                $("#eas_sidekick_container").show();
            $("#eas_sidekick_container").animate({
                width: '850px'              
            });
            $('html, body').animate({
                scrollLeft: '850'
            });
    });

 $(".eas_sidekick_close").click(
            function() {
                $("#eas_sidekick_container").animate({
            width: '0px'
            });
            setTimeout( function(){
                $("#eas_sidekick_container").css(
                    'display' , 'none' 
                );
            }, 350);
    });
});
    • 0