• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 367
  • Last Modified:

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
0
Bob Bender
Asked:
Bob Bender
  • 2
  • 2
2 Solutions
 
rbudjCommented:
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
 
GaryCommented:
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
 
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

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now