Jump to content
  • Advertisement
Sign in to follow this  
johnnyBravo

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

This topic is 4707 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
Advertisement
yeah i'm pretty sure if you set the style to relative rather then absolute. Though I'm not sure if the z-index may also play a part.

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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!