Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-04-28
5
Medium Priority
?
360 Views
Last Modified: 2014-05-07
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
Comment
Question by:Bob Bender
  • 2
  • 2
5 Comments
 
LVL 16

Assisted Solution

by:rbudj
rbudj earned 1000 total points
ID: 40028301
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
 
LVL 5

Author Comment

by:Bob Bender
ID: 40028566
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
 
LVL 58

Accepted Solution

by:
Gary earned 1000 total points
ID: 40028578
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
 
LVL 16

Expert Comment

by:rbudj
ID: 40029474
Correct. Without float, the div's would sit on top of one another.
0
 
LVL 5

Author Comment

by:Bob Bender
ID: 40047956
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

879 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