0

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...

0

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.