Member Avatar for newbie14

I have googling a lot about this debate to move from table to div. What are your advices here to move or not. I have below my codes building layout using div. The issue I find with div for example below codes which I am referring to a template . MY issue is that on different resolution it looks different there is not like fix size. For eg. in some resolution its just nice and some it shrink. What is the best solution to ensure it stay in every resolution which I know if I would go back to table it will work but that is not advisable I guess.

<body>


    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                 <img alt="Logo" src="img/logo20.png" /> 

                <!-- theme selector starts -->
                <div class="btn-group pull-right theme-container" >

                    <h5>User Name:  my demo</h5>
                    Logout
                </div>



            </div>
        </div>
    </div>  

        <div class="container-fluid">
        <div class="row-fluid">

            <!-- left menu starts -->
            <div class="span2 main-menu-span">
                <div class="well nav-collapse sidebar-nav">
                    <ul class="nav nav-tabs nav-stacked main-menu">
                        <li class="nav-header hidden-tablet">Vtst1</li>
                        <li><a class="ajax-link" href="test1.php"><i class="icon-home"></i>  <span class="hidden-tablet">Test1</span></a></li>
                        <li><a class="ajax-link" href="test2.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">Test2</span></a></li>

                        <li class="nav-header hidden-tablet">Admin</li>
                        <li><a class="ajax-link" href="addM.php"><i class="icon-home"></i>  <span class="hidden-tablet">Master</span></a></li>
                        <li><a class="ajax-link" href="gridU.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">UD</span></a></li>


                        </ul>

                </div><!--/.well -->
            </div>
                        <!--/span-->
            <!-- left menu ends -->



            <div id="content" class="span10">
            <!-- content starts -->


            <div>
                <ul class="breadcrumb">
                    <li>
                        <a href="#">Home</a> <span class="divider">/</span>
                    </li>
                    <li>
                        <a href="#">Forms</a>
                    </li>
                </ul>
            </div>


            <div class="row-fluid ">
                <div class="box span6">
                    <div class="box-header well" data-original-title>
                        <h2>Add Master</h2>

                    </div>
                    <div class="box-content">
                        <form class="form-horizontal">
                            <fieldset>


                              <div class="control-group">
                                <label class="control-label" for="selectError3">Master Type</label>
                                <div class="controls">
                                  <select id="selectError3">
                                    <option>T1</option>
                                    <option>T2</option>
                                    <option>T3</option>

                                  </select>
                                </div>
                              </div>
                              <div class="control-group">
                                <label class="control-label" for="inputSuccess">Master Serial Number</label>
                                <div class="controls">
                                  <input type="text" id="inputSuccess">

                                </div>
                              </div>
                              <div class="form-actions">
                                <button type="submit" class="btn btn-primary">Save</button>
                                <button class="btn">Cancel</button>
                              </div>
                            </fieldset>
                          </form>

                    </div>
                </div><!--/span-->


              <div class="box span6 ">
                    <div class="box-header well" data-original-title>
                        <h2>Active Masters</h2>


                    </div>
                    <div class="box-content">
                        <table class="table table-striped table-bordered  datatable">
                          <thead>
                              <tr>
                                  <th>No</th>
                                  <th>Master Type</th>

                              </tr>
                          </thead>   
                          <tbody>
                            <tr>
                                <td>1</td>
                                <td class="center">T1</td>
                                <td class="center">T111</td>
                                <td class="center">
                                    <span class="label label-success">Active</span>
                                </td>

                            </tr>
                            <tr>
                                <td>1</td>
                                <td class="center">T1</td>
                                <td class="center">T112</td>
                                <td class="center">
                                    <span class="label label-success">Active</span>
                                </td>

                            </tr>
                                                  </tbody>
                         </table>
                    </div>
                </div><!--/span-->


              </div><!--/row-->




                    <!-- content ends -->
            </div><!--/#content.span10-->


            </div><!--/fluid-row-->
  • 5 Contributors
  • 6 Replies
  • 310 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by veera100
VeEz commented: Really ! Helped me out Thanks ! +0

Recommended Answers

All 6 Replies

Member Avatar for hericles

Which CSS template are you using to do this? I note you have a classes such 'div-fluid' and row-fluid'. Those would imply you are using a fluid layout which would adjust depending on the available screen size.
If you are using a template CSS there probably are classes which define set widths to elements (unless it is only a fluid template).

Member Avatar for dany12

You have a bootstrap 3 template the should work after you insert this between the head tags

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

Hope this helps

Member Avatar for newbie14 
Dear Dany and Hericles,
                       Yes the template which I am using after doing further study is using bootstrap based. Actually how does fluid works. It is a standard works by itself or we need define it in the css file? Sorry kind of new to these.
Member Avatar for oanahmed

newbie14 actually the word

fluid

you and we are referring to here means that the webpage will adjust itself to the resolution. The technique used to make webpages adapt themselves according to the screen size or resolution is called Responsive Web Design. In this context there are classes namely container-fluid, div-fluid, row-fluid,etc. These classes are implementing the Responsive Web Design technique. It(Responsive Web Design) is not a standard thing built in to the HTML and CSS. It(Responsive Web Design) can only be implemented explicitily and by using CSS. Where as the Bootstrap is a web framework that is based on Responsive Web Design and is very popular among the Web Designers' community. This is the reason your web page was adjusting itself to the resolution. To overcome this problem with a simple, easy and little solution is to remove these class and ids as well that are implementing Responsiveness Design.

I hope it helped you alot...
If not, Just ask.....

Member Avatar for dany12

Twitter bootstrap is mainly a file with css that applies certain rules to your html.

For those who like to make it more complicated a framework.

That works like this you have a container a fixed one or a fluid one.

The fixed one will scale according to some sets of rules on tablet phones desktops.

The fluid one should scale on any device and look the same on all of them, that's the theory.

So you just use the classes in your html and bootstrap dose the rest.

To understand responsive design you need to understand grids floats css media queries.

One more idea use something to disable jquery animation when you are
on mobile or better yet use css3 and that will give you another
problem no ie 6, 7, 8 support but there is always a way so you use html5shiv.

This is my last post on daniweb

If you need more help ask the others.

Hope this helps you

Edited by dany12 because: final
Member Avatar for veera100

<div> is best compare with <table>.

the <table> may change the pixel resolution in different browser. But <div> is not change. so the div is the best choice.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.