Advertisement

09.29.2008 at 10:03PM PDT, ID: 23773745 | Points: 20
[x]
Attachment Details

Reduce tutter between left and right divs

Asked by TKD in Cascading Style Sheets (CSS)

Hi,
I create divs to layout the information of people. I will put the image to the left div '#people_img' , and put the 'name&experience" to the right div '#people_intro'. I expect the left and right div will no gutter between them. But I don't know why they have big gutter between them. What should I do? Any help would be appreciated.Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Teacher</title>
<style type=text/css>
#people_info { width:80%; margin:0 auto 0 auto; }
#people_img { float:left; text-align:left; width:320px; }
#people_intro { float:right; text-align:left; }
	#people_name { border-bottom:1px solid #ddd; }
</style>
</head>
<body>
 
<div id="people_info">
	<div id="people_img">
		<img src="Yogalates.JPG">
	</div>
	<div id="people_intro">
		<div id="people_name">
		Willison
		</div>
		<div id="people_experience">
		<ul style="list-style-type:square;">
			<li>Time</li>
				<ul style="list-style-type:decimal;">
					<li>11:00~12:00AM</li>
					<li>04:30~05:30PM</li>
					<li>10:30~11:30PM</li>
				</ul>
			<li>Location</li>
				<ul style="list-style-type:decimal;">
					<li>Classroom A</li>
					<li>Classroom B</li>
					<li>Classroom C</li>
				</ul>
			<li>Fee</li>
				<ul style="list-style-type:decimal;">
					<li>$100</li>
					<li>$200</li>
					<li>$300</li>
				</ul>
		</ul>
		</div>
	</div>
</div>
 
</body>
 
</html>
Attachments:
 
1.jpg (37 KB) (File Type Details) 
big gutter between img and text
big gutter between img and text
 
[+][-]09.30.2008 at 12:11AM PDT, ID: 22603281

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]09.30.2008 at 12:39AM PDT, ID: 22603346

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]09.30.2008 at 12:53AM PDT, ID: 22603386

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]09.30.2008 at 01:12AM PDT, ID: 22603449

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628