Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Creating Columns and rows from div tags

Posted on 2010-11-17
5
245 Views
Last Modified: 2013-09-29
I am needing to create columns and rows using div tags. Like in the image below How do I get started? File of what I need to do
0
Comment
Question by:gelifaith
  • 2
5 Comments
 
LVL 7

Accepted Solution

by:
JosephEricDavis earned 500 total points
ID: 34160105
There is a css style called float that you can utilize to stack divs next to each other.

One thing that is important to remember is that when a div is set to float left it will mess with the positioning of the div that follows it.  The way to take care of that is to add a div with a style of clear:both after a row of divs.  That will start a new row for you. Try starting with the code below and see what it does.

<div style="float:left; width: 200px; height:50px;">
     Content
</div>
<div style="float:left; width: 200px; height:50px;">
     Content
</div>
<div style="float:left; width: 200px; height:50px;">
     Content
</div>
<div style="clear:both;"></div>
<div style="float:left; width: 200px; height:50px;">
     Content
</div>
<div style="float:left; width: 200px; height:50px;">
     Content
</div>
<div style="float:left; width: 200px; height:50px;">
     Content
</div>
<div style="clear:both;"></div>

It's also important to remember that when a div has a style of float:left it will no longer expand horizontally to fill it's container.  It will now only have a width as wide as the content it contains or as wide as it is set to be.  These are just some of the tricks you need to become familiar with when you start using divs to position data on your page instead of tables.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34160248
WE just went through this on another question yesterday, where the person was trying to duplicate a TABLE column and row functionality with DIVs and could not get it to work right.  He said he didn't want to use tables, so I suggested how to do it with DIVs.  But in the end, he awarder the "correct answer" to someone else that said, use tables.  

So I am doing that here -- DIVs can't correctly duplicate the simplicity and functionality of a table, including automatic expandability and contractablity.  SO if you want table-like columns and rows, USE A TABLE -- it is so simple, and you are done in 1 minute.  Style it with CSS in another minute -- extremely efficient.
0
 
LVL 7

Expert Comment

by:JosephEricDavis
ID: 34175201
I was the one who was awarded the points in the last question similar to this one that scrathcyboy is referring to...

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_26619620.html

And in the question I said that there are good times to use <div> tags with a style of 'float:left' or 'float:right' to manage page layout and there are other times when it is good to just break down and use a table.  The way I tend to go myself is try and use <div> tags to develop the layout until I come to a place exemplified in this question above where tables are simply the better way to go.

Anyway... it is pretty opinionated advice.  Take it or leave it.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question