CODEWITHSUNDEEP
jqueryhtmlcssasp.nettwitter-bootstrap
Andrus
Andrus

Reputation: 27955

How to place button row and content left to image in bootstrap or css

Product detail page should contain row with labels and buttons and table in right side of image.

Bootstap 3 is used and this page appears in bootstrap columns. I tried 

<div class="maincontent">

<!-- Image in left -->

    <div class="details-gallery hidden-xs">
        <a class="bigimg fbox">
            <img alt="" id="detail-mainimage" />
        </a>
    </div>

    <div class='inline-block'>

<!-- row with labels and buttons -->
<form>
<label for="spinner">
                quantity
            </label>
            <input id="spinner" class='amount '/>
             <label for='total_eur'>Sum</label>
            <span class='maincontent-paymentsum' id="total_eur"></span>
            <input type="submit" value="Add to cart" class="btn btn-success" />
    <input type="button" class="btn btn-primary " onclick="javascript: history.back(1)"
           value='Back' />
</form>
    </div>
   ...
   <!-- table which should be right to image -->
    <table class="table table-hover table-condensed table-responsive inline-block">

but button row appears in bottom and table starts after it.

How to fix this so that content appears at right of image ?

How to put button row and table right to image like in first image in this question ? This is Mono ASP.NET MVC3 application.

Upvotes: 0

Views: 228

Answers (2)

robjez
robjez

Reputation: 3788

I would remove .inline-block class from your code, and set float:left to details-gallery hidden-xs class. Then you'll need extra wrapper to contain whole right hand side of layout (div.inline-block table.table-responsive and div.details-productdescription) in one container ie. div.product-info-wrapper, and float it to left too. You might also need to use width: calc(100% - 270px); on this element.

Let me know if it's unclear.

Upvotes: 1

Kypaz
Kypaz

Reputation: 411

Apply "float:left" on image's div

   <div style="float:left" class="details-gallery hidden-xs">
    <a class="bigimg fbox">
        <img alt="" id="detail-mainimage" />
    </a>
   </div>

And reduce table's width :

<table style="width:350px" class="table table-hover table-condensed table-responsive inline-block">

that should do it

Upvotes: 0

Related Questions