/    Sign up×
Community /Pin to ProfileBookmark

The best practices to arrange div

Copy linkTweet thisAlerts:
May 30.2010

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!

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaMay 30.2010 — 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.
Copy linkTweet thisAlerts:
@ytbryanauthorMay 31.2010 — [code=html]
<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]



[CODE]
The css

div.tab {
float:left;
}
div.tab3 {
float:left;
width:300px;
}
div.tab4 {
float:right;
width:300px;
}

div.tab2 {
float:right;
}
[/CODE]


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!
Copy linkTweet thisAlerts:
@optimus203May 31.2010 — 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.
Copy linkTweet thisAlerts:
@ytbryanauthorMay 31.2010 — 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.
Copy linkTweet thisAlerts:
@optimus203Jun 03.2010 — 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>
[/CODE]
×

Success!

Help @ytbryan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...