Page 1 of 1
aligning divs
Posted: Mon Sep 19, 2005 8:45 pm
by s.dot
Take the following scenario into mind
Code: Select all
<table>
<tr>
<td>content</td>
<td>content 2</td>
</tr>
</table>
This would produce something like:
Now my question is, how can I do this using <div>s?
These divs will be nested inside a larger one. But I can't use float, because the table I'm putting them in is using percentages, and often times will be out of proportion.
I'm looking to do something like this:
Code: Select all
<div>
<div>Left div</div>
<div>Right div</div>
</div>
But of course this will place them on top of each other

Posted: Mon Sep 19, 2005 9:01 pm
by Todd_Z
To a certain extent,
Code: Select all
<div style="float: left;">Left div</div>
<div style="float: right;">Right div</div>
will work. but not truely in relation to the next highest level div tag.
Posted: Mon Sep 19, 2005 10:15 pm
by Charles256
eh you can put a div anywhere by creating a rule for the div...ie..
Code: Select all
div.left
{
position:absolute;
left:0px;
top:50%;
}
div.right
{
position:absolute;
right:0px;
top:50%;
}
Code: Select all
<div id="left">This will be all the way to the left and half way down the page.</div>
<div id="right">This will be all the way to the right and half way down the page.</div>
that what you looking for? if you define the position as absolute that'll still put it all ht eway to the left and right if you put it in another div.

Posted: Mon Sep 19, 2005 10:24 pm
by s.dot
Hmm this works... but surely this can't be correct. Or, is it?
Code: Select all
<div style="width: 100%;">
<div style="float: left; width: 25%;">
content
</div>
<div style="float: right; width: 75%;">
content2
</div>
</div>
<div style="width: 100%;">
<hr style="color: #000000; height: 1px;">
</div>
Posted: Mon Sep 19, 2005 10:40 pm
by John Cartwright
no need for the firsts container div, also divs automatically span 100%, so no need to set a container to 100% because it already is.
When dealing with floats and you want your next div to clear the floats, use clear: both;
Code: Select all
<div style="float: left; width: 25%;">
content
</div>
<div style="float: right; width: 75%;">
content2
</div>
<div style="clear: both">
<hr style="color: #000000; height: 1px;">
</div>
Posted: Mon Sep 19, 2005 10:57 pm
by s.dot
hmm I tried that... but it didn't work. I suppose because this is inside of a table cell that it set to widt="540" ? However when I use a container of width: 100%, it works.
Now one last div question. What if I wanted to make 4 divs on a row? Just like the first example, except 2 extra ones.. all set to 25 percent. I couldn't just do float: left; float: right;
Posted: Wed Sep 21, 2005 3:16 am
by s.dot
*bump* I believe I followed the new bumping policy. ;d
Posted: Wed Sep 21, 2005 3:39 am
by n00b Saibot
maybe use
Code: Select all
1st. position:relative; left:0px;
2nd. position:relative; left:100px;
3rd. position:relative; right:100px;
4th. position:relative; right:0px;
whatever width you chose to set it...