Tables? Divs? Formatting an ASP.NET page....

Divs are for content, tables are data!  I get that.  

BUT, can DIVs become so convulaed with hundreds of them, that markup seems harder.

I'd like a 3 column approach for a form.  975px wide, soooo 325 each?  Makes things easier to line up, I hope.  You know labels/text boxes.  My problem on a line without DIVs is spacing.  How do I build in a blank area to separate columns?

I have:
First Name: (box) Last Name:  (box)
City: (box) State: (box)  Zip Code: (box)        

Like to see:  

First Name:    (box)       Last Name:  (box)            
City:                (box)       State:           (box)             Zip Code:   (box)

Wanna nice and purdy layout, but I only know how with Tables


Bob
LVL 5
Bob BenderAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Specify your box sizing so you can control how margins/padding react in different browsers
Here's an example of three divs side by side with a right margin. (width reduced for readability)

http://jsfiddle.net/ZF53g/3/
0
 
rbudjConnect With a Mentor Commented:
You are correct at 325px each. Just like with table layouts, you keep your math straight with div's as well. You can apply more style to get the look and feel you want but this is the basic concept of doing with div's what you are used to doing with tables. The width adjustment you are used to since you know tables. The key with div's is the float. The float is what places one div next to another.

<head>
<style type="text/css">
#column-wrapper {
width:975px;
margin:auto;
}
#column-left {
float:left;
width:325px;
}
.column-right {
float:right;
width:325px;
}
</style>
</head>
<body>
<div id="column-wrapper">
	<div class="column-right">right</div>
	<div class="column-right">middle</div>
	<div id="column=left">left</div>


</div>
</body>

Open in new window

0
 
Bob BenderAuthor Commented:
sooo, float does side by side, left to right?  That is compared to the fact that if float was not specified, they would go line by line?

Bob
0
 
rbudjCommented:
Correct. Without float, the div's would sit on top of one another.
0
 
Bob BenderAuthor Commented:
Followup....

Why in the HTML markup it is right, right left in the definitions of the DIVs for each column?

Seems backwards to me.
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.