Solved

Creating Columns and rows from div tags

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
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…
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)

705 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