Div Tag in HTML

I would like to have 2 div tags as like table columns in my page.

Can someone share your knowledge to do this?

Thanks in advance
czutshiAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
BardobraveConnect With a Mentor Commented:
Try this:

<div width="49%" style="float:left;"></div><div width="49%" style="float:left"></div>

width at 49% for every div make them to fit both together on your page, float left style make them behave as inline elements, don't making second one to jump into new file.
0
 
s8webCommented:
Hi Czutshi - I know you said two divs, but you will need a little more than that. Here is an example as to how to replicate a table with divs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs like a table</title>
<style type="text/css">
#holder{
	width:700px; /*If this were a table, this would be the table tag - so define the width here in px or %*/
	}
.column{
	float:left;
	width:50%
	}
.cell{
	border:solid #ebebeb;
	border-width:0 1px 1px 1px;
	}
.cell:first-child{
	border:solid #ebebeb;
	border-width:1px 1px 1px 1px;
	}
.clear{clear:both;}
</style>
</head>

<body>
<div id="holder">
	<div class="column">
		<div class="cell">Column 1</div>
		<div class="cell">&nbsp;</div>
		<div class="cell">&nbsp;</div>
		<div class="cell">&nbsp;</div>
	</div>
	<div class="column">
		<div class="cell">Column 2</div>
		<div class="cell">&nbsp;</div>
		<div class="cell">&nbsp;</div>
		<div class="cell">&nbsp;</div>
	</div>
	<div class="clear"></div><!-- This needs to be last to clear your floats. Otherwise some ugly things can happen. -->
</div>
</body>
</html>

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
ZadoConnect With a Mentor Commented:
Depends what you want to have in those columns, if it's text columns, you can use very simple css code (css3):

in <head> section:
<style type="text/css">  
.columns {  
  -moz-column-count: 2;  
  -webkit-column-count: 2;  
}  
</style> 

Open in new window



in <body> section:
<div class="columns">  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
  <p>Lorem ipsum dolor sit amet.</p>  
</div>

Open in new window


Css3 is a very powerful tool in web design, the only defect is, it doesn't work properly in old browsers.
Read about css3 tricks here: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/A_4168-New-CSS-techniques-with-CSS3.html?sfQueryTermInfo=1+30+css
(the article will be improved very soon)
0
 
s8webCommented:
CSS3 columns don't work in IE7 or 8 which unfortunately is most browsers.
0
 
ZadoCommented:
True, and unfortunately IE is used by most people, worst browser ever and nightmare for web designers :-/
There's a lot of things work fine in every browser except IE.
0
 
ManidfConnect With a Mentor Commented:
Try this out. i use this technique often.

1. have containing div #row (give this div a width say 600px)
2. inside of #row insert as many divs as you need. apply the "float: left; rule to them,
    ensure that the divs placed inside all cumulatively equal the width of the containing div being #row
    in this case i have 3 divs so they each are 200px wide.
3. you can place as many row divs below as you like. make sure to add "clear: both" to the .row div when stacking them so that they stack one on top of each other.

4. to note one can add a multitude of class names for styling to one div element. so i recommend using CLASS and not ID.  <div class="column green big"></div>
divs.html
0
 
wasim117Commented:
You can use display:cell css property for
0
 
ZadoCommented:
Please grant the points and close the question, thanks :-)
0
 
ZadoCommented:
Please let us know if any solution provided works for you, otherwise we will continue work on your problem and try to find best possible solution, thanks.
0
 
ManidfCommented:
Hi hows it going on this have you come to a resolution? take car. Manidf :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.