CODEWITHSUNDEEP
cssasp.net-mvc-3html
Laziale
Laziale

Reputation: 8225

align link button below select box

I am trying to position a link button below select box, but without success so far. All the time the link button is going right from the select box. Below you can see the 

 <div class="field">
 <select id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  
 </div>
 <div class="removed">  
 <a href="#" class="remove">Remove</a>
 </div>

And in the css I have only:

.field {
    margin: 0.5em 0 0 0;
}

How do you think I should approach this so the button will be below the select box. Thanks in advance, LAziale

UPDATE: screenshot attached screenshot

Html:

 <div id="accordion">

            @foreach (var item in Model.Parameters)
            {
                <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3>
                <div>
                    <div class="label">
                        Search @*Html.TextBox("Search")*@ 
                        <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" />
                    </div>

                    <div class="field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  

                    </div>
                    <div class="removed">  
                     <a href="#" class="remove">Remove selection</a>
                    </div>  

                </div>
            }         
        </div>

CSS:

.display-label, 
.label {
    margin: 1em 0 0 0;
}

.display-field, 
.field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

Upvotes: 0

Views: 775

Answers (2)

Abhidev
Abhidev

Reputation: 7273

Have you tried using the clearfix? if no then try this

<div id="accordion">

            @foreach (var item in Model.Parameters)
            {
                <h3><a href="#">@Html.LabelFor(m => item.Name, item.Prompt)</a></h3>
                <div>
                    <div class="label">
                        Search @*Html.TextBox("Search")*@ 
                        <input id="@("Search" + item.Name)" type="text" name="q" data-autocomplete="@Url.Action("QuickSearch/" + item.Name, "Report")" />
                    </div>

                    <div class="field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  

                    </div>
                    <div class="CL"></div>   //Here is the change
                    <div class="removed">  
                     <a href="#" class="remove">Remove selection</a>
                    </div>  

                </div>
            }         
        </div>

CSS:

.CL{ clear:both}

Upvotes: 0

Ninad Ajnikar
Ninad Ajnikar

Reputation: 173

Have you checked your code the link is coming down below the select box.

As you could see it here : http://jsfiddle.net/ninadajnikar/ZtNcx/

Or are you trying to do anything different here?

Upvotes: 1

Related Questions