?
Solved

Creating Columns and rows from div tags

Posted on 2010-11-17
5
Medium Priority
?
274 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
3 Comments
 
LVL 7

Accepted Solution

by:
JosephEricDavis earned 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

850 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