Page Layout, Divs Instead Of Tables

December 27, 2023 Post a Comment

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

Solution 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:

<divid="wrapper"><h1style="float:left;"> Example Text </h1><formaction=""method="post"><ulid="regis_ul"><liid="regis_li"><label><span> Username: </span><span><inputtype = 'text'name ='username'id ='username'value = ></span></label></li><liid="regis_li"><label><span> Password: </span><span><inputtype = 'password'name ='password'id ='password'value ='' ></span></label></li><inputtype='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 :)

Solution 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

<divstyle="width: 100%;"><divstyle="vertical-align: top"><divstyle="text-align: left;display:inline-block;"><h1>Basic Finance</h1></div><divstyle="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

Solution 3:

Try this layout

<divclass="navbar"><divclass="navbar-inner"><aclass="brand"href="#">Basic Finance</a><divclass="pull-right">
@Html.Partial("_Login", new LoginModel())
</div></div></div>

Solution 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;
}

Solution 5:

With just plain divs you can use the float property to get them next to each other

<div><divclass="table"><divclass="left"><h1>Basic Finance</h1></div><divclass="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

Html5 News