CODEWITHSUNDEEP
jqueryhtmlcss
BRBT
BRBT

Reputation: 1487

2 Columns within a JQuery Accordion Panel

I have a form within a JQuery Accordion. I am trying to split that form into 2 columns. 

<div class="content">
<div id="accordion">  
<h3><a href="#">Section 1</a></h3>
    <div>
        <form enctype="multipart/form-data" method="post" action="somepage.php">
            <div id="form_wrapper"> <!--Keep this to the left-->
                <label for="number">Number: </label>
                <input type="text" id="number" name="number" value="" />
                <br />
                <label for="name">Name: </label>
                <input type="text" id="name" name="name" value="" />
                <br />
                <label for="address">Address: </label>
                <input type="text" id="address" name="address" value="" />
                <br />
                <label for="city">City: </label>
                <input type="text" id="city" name="city" value="" />
                <br />
                <div id="image_wrapper"> <!--Keep this to the right-->
                    <img  src="" alt="photo" />
                    <br />
                    <label for="photo_desc">Photo Description: </label>
                    <input type="text" id="photo_desc" name="photo_desc" value="" />
                    <br />
                    <label for="new_picture">New Facility Photo:</label>
                    <input type="file" id="new_picture" name="new_picture" />
                    <br />
                </div>
                <br />
            </div>
            <input type="submit" value="Update" name="update">
        </form>
    </div>
        <h3><a href="#">Section 2</a></h3>
    <div>
    </div>
        <h3><a href="#">Section 3</a></h3>
    <div>
    </div>
        <h3><a href="#">Section 4</a></h3>
    <div>
    </div>
</div>
</div>

I am trying to get the <div id="image_wrapper"> to be off the right hand side of the accordion panel, and the rest of my text inputs and labels to be on the left.

Here is a JSFiddle demonstrating what I am trying to do, and the things I have done

I can't seem to get the css just right any help would be great.

Upvotes: 1

Views: 234

Answers (1)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

if I have undertstood well your questions you basically want your image_wrapper and your form wraperside by side taking 50% of the avaliable width each.

To achieve that the easiest way is to put the image_wrapper outside the form wraper in the html so they can float nicely, then add both 50% width and float left and I just have added:

* {
    box-sizing: border-box;
}

to your css to make everything fits: FIDDLE

Upvotes: 2

Related Questions