Position text to center of div left and right - html

Question

I'm trying to create something that looks like this:
so far I have: http://jsfiddle.net/ePse6/
Without using something like: margin-top:-25px;, how can I position the Edit/Delete links to be on the right of the title (the part that says "iPhone" or "Android") and have both the title and links halfway between the borders?
Thanks!

Answer 1

just like most of answers, here i come with text-align:right and float:left .
I reduced code to minimal and plain CSS for your actual structure and to make it clear to you : http://jsfiddle.net/ePse6/7/
ul , a { /* basic reset we need */
padding:0;
margin:0;
color:gray;
text-decoration:none;
}
.mini > ul > li {
display:block;/* reset from list-item */
border-bottom:solid;
text-align:right;
overflow:hidden;/* wraps floatting element within */
}
.mini > ul > li> h3 {
float:left;
margin:0;
}
.mini > ul > li ul,
.mini > ul > li li {
display:inline-block;
}

Answer 2

Why not use something simple and really handy?
I have removed all of your messy code, and have created a new fiddle for you.
http://jsfiddle.net/afzaal_ahmad_zeeshan/ePse6/4/
I have used just a few lines of code, I have used a div and inside that, I have used 2 paragraphs to seperate each of them. Then inside that I used span element to seperate the right and left floating elements.
Using CSS I selected the classes and then styled them to get the desired input!
Here is the code:
<div>
<p>
<span class="left">Android</span><span class="right">Delete Edit</span>
</p>
<p>
<span class="left">iPhone</span><span class="right">Delete Edit</span>
</p>
</div>
CSS is as:
p {
border: 1px solid #333; // border that you wanted!
padding: 20px; // padding all around the element
padding-bottom: 40px; // padding at the bottom of the element
}
.left {
float: left; // making the elements float at the left
}
.right {
float: right; // floating elements at the right side
}
You can go to the fiddle page, and check for the design of the layout now. It was a simple thing. Hope its what you wanted.

Answer 3

This is without the lists. Just some CSS to do the trick: http://jsfiddle.net/Lg96p/
CSS:
.wrap{
width:100%;
border-bottom:solid 1px #666666;
margin-bottom:20px;
padding-bottom:10px;
}
.title{
font:bold 16px arial;
}
.fl{
float:left;
}
.fr{
float:right;
}
.lnk{
color:#6c6c6c;
display:inline-block;
text-align:right;
margin:0 10px 0 0;
text-decoration:none;
font:normal 14px arial;
}
HTML:
<div class="wrap fl">
<div class="title fl">iPhone</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
<div class="wrap fl">
<div class="title fl">Android</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>

Answer 4

You should create two columns that fill the parent div. Make them both float:left; and for the right column you can align the text to the right text-align:right; or put two divs in it with float:right; for edit and delete.
Here is my fiddle: http://jsfiddle.net/ePse6/5/
Whatever you put into the columns or how to format it is up to you. But from here you have 2 columns independently next to each other.
If you want multiples of these stacked on top of each other i would change the container to a class and just add multiple of these containers with the columns to keep it tidy and readable. Like in this fiddle: http://jsfiddle.net/ePse6/6/
HTML:
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<a hreft="">Edit</a><a hreft="">Delete</a>
</div>
</div>
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<div class="button">Edit</div><div class="button">Delete</div>
</div>
</div>
CSS:
.container
{
width:600px;
margin:auto;
}
.leftCollumn
{
float:left;
width:400px;
background-color:#999;
}
.rightCollumn
{
float:left;
width:100px;
text-align:right;
background-color:#CCC;
}
.rightCollumn a
{
margin-left:10px;
margin-right:5px;
}
.button
{
margin-left:10px;
margin-right:5px;
background-color:#000;
color:#FFF;
float:right;
}