[web] div tags, possible to place them side by side, without absolute positioning?
Author
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
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.
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).
Isn't this what float is for? (See here).
Author
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
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
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.
Tested in Opera8, Firefox 1.0.6 and IE6.
<!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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
