Solved

Creating Columns and rows from div tags

Posted on 2010-11-17
5
221 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

747 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now