Trying to create a CSS/Jquery Tile menu with two links in each box - Is it possible?

Question

I am trying to make a menu using CSS and Jquery. I'm not sure if I am on the right path but here is a picture of what I want to achieve: https://i.stack.imgur.com/3WLdG.png

Here is an overview of the CSS:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #0000;

}

a {
color: #fff;
text-decoration: none;
}

.menu {
width: 100%;
margin: 10px auto;
margin-left: 0px;
margin-top: 0px;
}
.account { background: #fdd22a; 
width: 200px;
line-height: 80px;
display: block;
margin: 5px;
text-align: center;
float: left;
opacity: 10;
color: #fff;
font-family: 'Open sans', sans-serif;
font-weight: 300;
font-size: 12pt;
list-style-type: circle;
background-image: url(/images/iconc.png);
background-repeat: no-repeat;
background-position: left bottom;
}
//=======

Fullscript here: http://jsfiddle.net/ADGMY/. But being new to this I am not sure how I would proceed to divide the box I have, I then want to place them in a linear fashion as shown at the bottom of the picture. Can this be achieved?

Essentially I am trying to get two links inside the box as shown in the picture. I have tried messing with the DIV and the height/width from what I read but I'm not getting anywhere. Any assistance is appreciated.

Answer 1

there's a number of ways to display divs side by side if that is what you are looking for. You can give each div the css property float:left, you can use a table (but that's pretty horrible in my opinion), or the best way is simply to give each div the css property display:inline-block. Not sure what you're looking for by the question but hope this helps.

Answer 2

You just need to know how to use float and display properties. This is one way of doing what you need.