Solved

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

Posted on 2014-04-28
5
324 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
[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
  • 2
5 Comments
 
LVL 16

Assisted Solution

by:rbudj
rbudj earned 250 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 250 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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.
Learn how to automatically add page numbers in your next InDesign project. This can be very helpful in multi-page books and magazines that you are designing. Make sure your Pages window visible.:  In the document you wish to add page numbers to. Act…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

739 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