How do I put a div next to a toggle slide menu?

Question

I have been learning some HTML, CSS, Java and jQuery slowly for a few months and I have just come across this problem, I have solved it in the past but right now I am most truly stuck! I have a some divs in a container and this includes a slide down menu. I want the main text box to be to the right hand side of the menu. I have tried to float:right but it goes over there but doesn't go side by side. This is probably a really really silly question but I thought I'd ask rather than having no help. Sorry for being a 'n00b' ... Also sorry if my code is written badly or anything like that :/

Here's my code:

<html>
<head>
<link type='text/css' rel='stylesheet' href='stylesheet.css'/>
<script src="jquery.min.js">
</script>
<script> 
$(document).ready(function(){
        $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        $("#panel2").slideToggle("slow");
        $("#panel3").slideToggle("slow");
    });
});

<div id="container">
<div id="header"><img src="logo.jpg" style="float:left" width="100">Bourne Computing Solutions<img src="logo.jpg" style="float:right" width="100"></div>
<div id="flip">Menu (click to open)</div>
<div id="panel">Home</div>
<div id="panel2">Contents Page</div>
<div id="panel3">Find us</div>
<div id="textbox">TEXT HERE</div>

</div>

</body>
</html>

My style sheet:

    #container
{
    position:absolute;
    left:50%;
    width:1024px;
    height:100%;
    margin-left:-512px;
}



#header
{
    font-family:arial;
    font-size:32px;
    padding:10px;
    width:1002px;
    height:50px;
    text-align:center;
    background-color:#ffffff;
    border:solid 1px #000000;
}

#panel,#flip, #panel2, #panel3
{
    font-family:arial;
    padding:15px;
    width:200px;
    text-align:center;
    background-color:#ffffff;
    border:solid 1px #000000;
}

#panel
{
    padding:10px;
    width:210px;
    display:none;
}

#panel2
{
    padding:10px;
    width:210px;
    display:none;
}

#panel3
{
    padding:10px;
    width:210px;
    display:none;
}

#textbox
{
    font-family:arial;
    font-size:14px;
    padding:10px;
    width:770px;
    height:500px;
    text-align:left;
    background-color:#ffffff;
    border:solid 1px #000000;
    float:right;
}

Sorry for being silly, but I guess we all start somewhere...

Answer 1

You can do it this way :

#textbox
{
    font-family:arial;
    font-size:14px;
    padding:10px;
    width:770px;
    height:500px;
    text-align:left;
    background-color:red;
    border:solid 1px #000000;
    position:absolute;
    left:210px;
    top:72px;
}

Using the absolute positioning of CSS you already uses in your code.

Check the fiddle here

How do I put a div next to a toggle slide menu?

Question

1 answers

solution1
0 2013-02-28 21:36:42

How do I put a div next to a toggle slide menu?

Question

1 answers

solution1 0 2013-02-28 21:36:42

solution1
0 2013-02-28 21:36:42