Solved

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

Posted on 2014-04-28
5
303 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 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

919 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now