www.webdeveloper.com
Results 1 to 6 of 6

Thread: The best practices to arrange div

Hybrid View

  1. #1
    Join Date
    May 2010
    Posts
    3

    The best practices to arrange div

    Hi all,

    I used firebug to examine some website. It seems like they are using css float to arrange the div.

    I wonder is there a better practice? besides using css?

    Basically, I want the div to be aligned horizontally. Right now, I am using float left and right.

    Thanks!

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Without seeing your code or desired layout that, imo, is like asking "how long is a piece of string".

    Post your code so we can see what is going on.

  3. #3
    Join Date
    May 2010
    Posts
    3
    HTML Code:
    <div class="tab">
    <div class="tab3">
    </div>
    <div class="tab4">
    </div>
    </div>
    <div class="tab2">
    <div class="tab3">
    </div>
    <div class="tab4">
    </div>
    </div>


    Code:
    The css
    
    div.tab {
    float:left;
    }
    div.tab3 {
    float:left;
    width:300px;
    }
    div.tab4 {
    float:right;
    width:300px;
    }
    
    div.tab2 {
    float:right;
    }

    I omitted the code within the div. But imagine that they are just empty panels.

    The issue i am facing is that when i align the element using css "float", the alignment will change if the width of the monitor change.

    So what is the best practice to align/arrange element ?

    Thank you!

  4. #4
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    You could specify widths in percentages instead of pixels if your concerned with screen sizes.

    It is also a good idea to add the display:inline; designation to floats that are intended to be displayed next to one another horizontally. This helps fix a bug in IE6.

  5. #5
    Join Date
    May 2010
    Posts
    3
    I see. Thanks.

    however, the concern is not only about width.

    it's more to the position of each element. ie when i view my webpage on my macbook, it can only fit four div. When I view it on my wider monitor, the same four div is spaced out and now there's only more white space in the middle.

  6. #6
    Join Date
    Sep 2008
    Location
    Connecticut
    Posts
    123
    You can wrap everything in a container div that center the page on screen, but with this, you will have space on the left and right hand side of table on larger resolutions. But if you want the table to fill up 100&#37; of screen on all resolutions, it is impossible to keep the column widths the same size (since larger resolutions will create wider columns). Does that make sense?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    * {
       padding: 0;
       margin: 0;}
    #container {
    	width: 800px;
    	margin: 0 auto;}
    .tab {
    	float:left;
    	width:50%;}
    .tab2 {
    	float:right;
    	width:50%;}
    .tab3 {
    	float:left;
    	width:50%;
    	}
    .tab4 {
    	float:right;
    	width:50%;
    	}
    </style>
    </head>
    
    <body>
    
    <div id="container">
      <div class="tab">
        <div class="tab3">Tab 3
        </div>
        <div class="tab4">Tab 4
        </div>
      </div>
      <div class="tab2">
        <div class="tab3">Tab 3
        </div>
        <div class="tab4">Tab 4
        </div>
      </div>
    </div>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles