Solved

Creating Columns and rows from div tags

Posted on 2010-11-17
5
251 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
[X]
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
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ability to create nested list on the UI using PHP, HTML, Javascript 7 61
Debugging Html 8 32
Use "if not" in a condition 2 19
Popup write two lines 3 22
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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).

726 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