aligning divs

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

aligning divs

Post 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:

Code: Select all

content                           content2
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 :-P
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Todd_Z
Forum Regular
Posts: 708
Joined: Thu Nov 25, 2004 9:53 pm
Location: U Michigan

Post 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.
Charles256
DevNet Resident
Posts: 1375
Joined: Fri Sep 16, 2005 9:06 pm

Post 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. :-D
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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>
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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;
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

*bump* I believe I followed the new bumping policy. ;d
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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...
Post Reply