Page layout, Divs instead of Tables - css

Question

I know I am doing it all wrong. At the moment, I used Tables to format my screen. Bad, I know. I am looking at learning Twitter Bootstrap, but for a test site, I am just trying to move away from Tables and try use DIVs for layout.
At the moment, I am trying to make a page header that shows a title on the left, and a login box on the right.
<div>
<table style="width: 100%;">
<tr style="vertical-align: top">
<td style="text-align: left">
<h1>Basic Finance</h1>
</td>
<td style="text-align: right">#Html.Partial("_Login", new LoginModel())</td>
</tr>
</table>
<hr />
#RenderBody()
</div>
How can I use DIVs to do this? Are DIVs the right idea? I see Twitter Bootstrap uses <SPAN> - but I am days away from getting to grips with it.

Answer 1

So, I went a completely separate route form everybody else. First, here is my example of what I think you want but let me know if this is not correct.
DEMO
Now, let me break it down a bit for you. I first started by taking what you said with a login and having some type of header along with a login table by or on the same line. This was done via the HTML code below:
<div id="wrapper">
<h1 style="float:left;"> Example Text </h1>
<form action="" method="post">
<ul id="regis_ul">
<li id="regis_li">
<label><span> Username: </span>
<span><input type = 'text' name ='username' id ='username' value = ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Password: </span>
<span><input type = 'password' name ='password' id ='password' value ='' ></span>
</label>
</li>
<input type='submit' name='submit' value='Register'>
</form>
</div>
Which is then accompanied by some CSS code:
#regis_ul {
display:table;
}
#regis_li {
display:table-row-group;
}
span {
display: table-cell;
}
label {
display: table-row;
}
form{
float: right;
}
The above code is what produced the JsFiddle output. Something to read into is the display method "table" that will tell you more about why this CSS trick actually works. This can be found in the Almanac.
Another thing that is good to read up on is why exactly a list may be better than a table which.. a great argument with pros and cons is found in this stack question here.
Finally, I encourage you to play with any of the JsFiddle's on this page, you may end up finding a perfect combination that really suites what you are looking for, giving you that unique feel :) If you have any questions about my Demo, just comment below and I will try my best to answer it for you :)

Answer 2

You can use divs and it's a good idea if you want to switch, you can use display properties according to your needs
<div style="width: 100%;">
<div style="vertical-align: top">
<div style="text-align: left;display:inline-block;">
<h1>Basic Finance</h1>
</div>
<div style="text-align: right;display:inline-block;">#Html.Partial("_Login", new LoginModel())</div>
</div>
</div>
And twitter-bootstrap have some classes like pull-left and pull-right have a look at it, i recommend you to use divs instead of tables!
Fiddle Demo

Answer 3

Try this layout
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Basic Finance</a>
<div class="pull-right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
</div>

Answer 4

You can use
display:table; for <table>
display:table-row; for <tr>
display:table-cell; for <td>
in div format
here is a demo (it has css table vs html table-compare and check for your understanding)
CSS to play with
body{
height:100%;
}
#main{
height:100%;
width:100%;
}
.table{
display:table;
width: 100%;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}

Answer 5

With just plain divs you can use the float property to get them next to each other
<div>
<div class="table">
<div class="left">
<h1>Basic Finance</h1>
</div>
<div class="right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
#RenderBody()
</div>
Then you can style it the way you like with CSS, for instance:
.left{float: left;width: 50%;;height:100%;text-align:left;}
.right{height:100%; text-align:right;padding-top: 30px;}
.table{height: 75px;}
Output of this code:
http://jsfiddle.net/7Qv8r/1/
Cheers

Answer 6

You can try this
Check Fiddle here
<div>
<div style="width: 100%;">
<div style="float: left">
<h1>
Basic Finance</h1>
</div>
<div style="float: right; padding-top: 30px;">
#Html.Partial("_Login", new LoginModel())</div>
</div>
<div style="clear: both">
</div>
<hr />
#RenderBody()
</div>
Good Luck n Happy New Year...:)