...

View Full Version : getting two columns inside fieldset



o0O0o.o0O0o
05-19-2008, 07:56 AM
i have following code


<fieldset>
<legend>Daily Printing</legend>

<p><label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show"> </p>



<p><label>Show My Orders - <b>SUB DEPT VERSION</b></label>
<input type="submit" name="submit" value="Show ">
</p>

<p><label>Show All Packing Slips - <b>Sorted by Delivery Run</b></label>
<input type="submit" name="submit" value="Show"> </p>
.
.
.
.</fieldset>









and few more <p> s . Now i want e,g 5 labels with button on left and 5 labels with buttn on right in line like in tables with 4 columns. I am new to CSS . can anyone help


css is below

fieldset {

border: 1px dotted black;
padding-left: 30px;
border-top: 1px solid #C9DCA6;
background: url(9.png) left bottom repeat-x;

}


label
{


width: 200px;
display: inline-block;
line-height: 1.8;
vertical-align: top;
cursor: hand;
text-align: left;

}

p {

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

}

abduraooft
05-19-2008, 08:18 AM
Try something like

<style>
fieldset ul{
list-style:none;
width:650px;
}
fieldset ul li{
clear:both;
}
fieldset label{
float:left;
width:250px;
}
fieldset input{
float:left;
margin-right:10px;
}
</style>

<ul >
<li><label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
</li>
<li><label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
</li>
<li><label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
</li>
<li><label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>
<input type="submit" name="submit" value="Show">
</li>
</ul>

o0O0o.o0O0o
05-20-2008, 06:40 AM
I got the list in tables with this method , but how can make the left list items on left and right list items on extreme right
not just next to each other like


LIST 1 ------------------------LIST2

not just

LIST1 LIST2

abduraooft
05-20-2008, 09:08 AM
Um.. try


<style>
fieldset ul{
list-style:none;

}
fieldset ul li{
clear:both;
}
label.left, input.left{
float:left;
}
label.right, input.right{
float:right;
}
fieldset label{
width:220px;
}

</style>


<fieldset>
<legend>Daily Printing</legend>
<ul >
<li>
<input class="right" type="submit" name="submit" value="Show">
<label class="right">Delivery Run suggestion 3</label>

<label class="left">Delivery Run suggestion 3</label>
<input class="left" type="submit" name="submit" value="Show">

</li>
<li>
<input class="right" type="submit" name="submit" value="Show">
<label class="right">Delivery Run suggestion 3</label>

<label class="left">Delivery Run suggestion 3</label>
<input class="left" type="submit" name="submit" value="Show">
</li>
</ul>
</fieldset>

o0O0o.o0O0o
05-21-2008, 04:25 AM
IT is working but i want to understand one thing why the class right the submit button comes before the label . It is confusing


Is it possible to put 5 list items inside e,g DIV tag and 5 items in another tag and then align the div tag inline

abduraooft
05-21-2008, 08:11 AM
IT is working but i want to understand one thing why the class right the submit button comes before the label . It is confusing

Yes, that's the property of floats. Check and confirm yourself by changing the order!


Is it possible to put 5 list items inside e,g DIV tag and 5 items in another tag and then align the div tag inline
Give some samples, so that we can work on.

o0O0o.o0O0o
05-21-2008, 08:24 AM
something like below

div with id = left should come on left and with id = right on right side just like as they were appearing in float


<filedset>

<div id = left>
<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>

<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>

<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>

</div>


<div id = right>
<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>

<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>

<input type="submit" name="submit" value="Show">
<label>Delivery Run suggestion 3</label>

</div>

</fieldset>

abduraooft
05-21-2008, 08:32 AM
You need to place the right floated sibling first in the markup order, to get the desired result!

So, just put the html of id="right" (assume it has float:right in CSS) before id="left"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum