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

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

## 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 on other sites
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 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 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 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 on other sites
oh i didn't have all the floaters set to left, thx

1. 1
Rutin
43
2. 2
3. 3
4. 4
5. 5

• 9
• 27
• 20
• 9
• 20
• ### Forum Statistics

• Total Topics
633398
• Total Posts
3011659
• ### Who's Online (See full list)

There are no registered users currently online

×