Sign in to follow this  

[web] div tags, possible to place them side by side, without absolute positioning?

This topic is 4488 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi, with div tags, is it possible to make them sit side by side without using the absolute positioning? eg say ive got two div, they are of the same size, and I want to sit them side by side like so: _________ _______ |divTag1 |divTag2 | |_______|_______| Thanks

Share this post


Link to post
Share on other sites
Don't set the position to relative OR absolute, just leave it alone unless you need to set it for some reason. Z-index should be completely irrelevant unless you're planning to overlap them.

Isn't this what float is for? (See here).

Share this post


Link to post
Share on other sites
Thanks, it works pretty good with only two div tags, but i can't seem to get anything working with three div tags,

I thought of maybe just setting the positioning of the tags, but the problem with that is, these div tags are already in another tag, that sets the overall position.

eg

_______________________
| ___ ____ ____ |
| |___| |____| |____| |
| |
| |
|_____________________|



I thought maybe putting 3 columns inside the outer div tag, but I can't work out how to do that with only using the relative position.

Any suggestions on how to accomplish this?

Thanks

Share this post


Link to post
Share on other sites
What exactly isn't working about it? I whipped up a quick example. The borders are just to show where there are divs, and the margins on the inner "floaters" (your columns) are just to put some space between them. Note that the bottom margin doesn't play nice in IE (but you wouldn't be able to tell without the borders on [wink]). I believe the outer element does need to be absolutely positioned in this case unless it's just sitting in the corner anyway. Take a look and let me know if that helps you at all.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Example</title>

<style type="text/css">
<!--
#main {
position: absolute;
left: 100px;
top: 200px;
border: 1px solid #00FF00;
}
.floater {
float: left;
border: 1px solid #000000;
width: 100px;
height: 100px;
margin: 5px 5px 5px 5px;
}
-->
</style>

</head>

<body>

<div id="main">
<div class="floater">
Box 1
</div>
<div class="floater">
Box 2
</div>
<div class="floater">
Box 3
</div>
</div>

</body>
</html>


Tested in Opera8, Firefox 1.0.6 and IE6.

Share this post


Link to post
Share on other sites

This topic is 4488 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this