Printable View
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!
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.
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!
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.
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.
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% 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>
