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

Fixng this CSS - Don't think mine is correct

I have a div "details" with 3 columns. I used divs to organize the 3 columns.  But I don't the way i have it is correct..what if one of the texts is longer...i think the way i have will mess it up if..for example, the first-last name is longer. I have my example here

http://jsfiddle.net/Vjdrz/2/
0
Camillia
Asked:
Camillia
  • 4
  • 2
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
You are doing lots of mistake to manage columns you need it divided in to three different columns and each individual columns will contain it's own text manage your height and width as your required. see the example below:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.details {
	padding-bottom: 15px;
	background-color: #F5F5F5;
	font-size: 11px;
	height:80px;
}
.details .cols{
	width:300px;
	float:left;
	margin-left:20px;
}
.details .cols .title{font-weight:bold;}
.clear{clear:both;}
</style>
</head>

<body>
<div class="details">
			    
				<div class="cols">
                	<div class="title">Billing Address:</div>
                        <p>Johnny wasa<br>
                        782 Westwind Ct<br>
                        Vallery Lane, MO 630991-1556<br>
                        United States</p>
                </div> 
				<div class="cols">
                	<div class="title">Payment Method:</div>
                        <p>Credit Card $96.21<br>
                        *************1111</p>
                </div>
                <div class="cols">
                	<div class="title">eGift/Gift Card(s) </div>
                        <p> </p>
                </div>
			</div>
</body>
</html>

Open in new window

0
 
CamilliaAuthor Commented:
thanks, let me try
0
 
CamilliaAuthor Commented:
It has to be 3 columns but this is one column with 3 rows

http://jsfiddle.net/Vjdrz/3/

so it should be

Billing Address:              Payment Method:                          Gift/Card..:
address here                    payment stuff here                        stuff here
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Jagadishwor DulalBraces MediaCommented:
Nope its three columns increase the size of jsfiddle or test it in a page see my image here:
Preview
0
 
CamilliaAuthor Commented:
you're right. Let me try it in my code now.
0
 
CamilliaAuthor Commented:
you're the best. Thanks for helping.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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