Google Answers: How to make <div> tags line up in a row?

View Question

Q: How to make <div> tags line up in a row? ( Answered 5 out of 5 stars

Question

Subject: How to make <div> tags line up in a row?
Category: Computers > Programming
Asked by: lostandfound-ga
List Price: $2.00

Posted: 31 May 2004 13:22 PDT
Expires: 30 Jun 2004 13:22 PDT
Question ID: 354365

What style tags are necessary to make <div> containers line up in a
single row rather than a column?

For example, the html:

<div>blah</div>
<div></div>

will create containers in a column like such:
[]
[]

What is the simplest way to have them line up in a row like:
[][]

Basically, I want to use divs work exactly like the following table would:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

Help?

Answer

Subject: Re: How to make <div> tags line up in a row?
Answered By: robertskelton-ga on 31 May 2004 14:29 PDT
Rated: 5 out of 5 stars

Hi there,

It is possible, if you use <div> containers in conjunction with CSS.
Here is one example:

<html>
<head>
<style type="text/css">

#left {
  position: absolute;
  left: 5px;
  padding: 0px;
  width: 150px;
}

#right{

  margin-left: 200px;
  padding: 0px;
  margin-right: 15px;
}

</style>
</head>
<body>

<div id="left">
</div>


<div id="right">
</div>


</body>
</html>


More information:

NWE Help: CSS DIV Instead of Tables
http://web.nwe.ufl.edu/writing/help/web/authoring/html/css/div.html

Lissa Explains it All -- CSS Two Column and Three Column Layout
http://www.lissaexplains.com/css3.shtml


Search keywords: div instead of tables


Best wishes,
robertskelton-ga

Request for Answer Clarification by lostandfound-ga on 31 May 2004 15:56 PDT

Yeah... that works, but since it depends on absolute positioning it
isn't as simple or clean as using tables.  With tables, adding a
second cell is as easy as popping another <td></td> into the row,
where this solution requires that the second cell have its position
from the left of the page explicitly defined.  It might sound like I'm
nitpicking, but this makes it a pain to add a new row cell inside of a
while() loop.  Also, if I want to have a row with 10 columns I'd need
to have 10 different css #ids defining the left position of each
column, which seems like *much* more work than I should have to do for
this very simple layout.

What would be preferable is to have new cells in the row positioned
relative to the cell to the left of it, rather than to the left margin
of the page.

Clarification of Answer by robertskelton-ga on 31 May 2004 16:43 PDT

Hi again,

Apologies for not noticing the word "simplest"...

In case you wish to also look into the CSS way, here are some more
examples and info:

http://www.glish.com/css/
http://www.projectseven.com/whims/cssp_3box/3boxnoscript.htm

robertskelton-ga

lostandfound-ga rated this answer: 5 out of 5 stars

Thanks for the help!

Comments

Subject: Re: How to make <div> tags line up in a row?
From: karisma-ga on 31 May 2004 16:22 PDT

Try playing around with a CSS rule that goes like this:
<style>
DIV{
   DISPLAY: inline; 
}
</style>
<div>1</div>
<div>2</div>

You'll have to do a bit more footwork to get it to look nice, but
hopefully this is a start.

Subject: Re: How to make <div> tags line up in a row?
From: lostandfound-ga on 31 May 2004 16:34 PDT

Ah, yes!  This is precisely what I was looking for.  Thanks so much. 
I knew there had to be a simple solution.

Subject: Re: How to make <div> tags line up in a row?
From: darlingm-ga on 31 May 2004 18:12 PDT

Also take a look at span.  Span's won't take the entire horizantal area by default.

<span>1</span>
<span>2</span>

Sounds like you're having a program generate the HTML.  Definately
play around with div and span for layout, but many layouts will force
you to give them up and go back to tables - if you have more dynamic
content like it sounds like you have.  Don't be too frustrated by
this.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.

Search Google Answers for

Google Home - Answers FAQ - Terms of Service - Privacy Policy