help with css positioning

Can someone please help me with some simple css? I'm new to it.

Attached is an image that I'm trying to layout with css. Basically its a "View Map" link which is anchored to the "top" of the segment, then directly to the right an image of the map, then directly to the right of that, anchored to the top as well, is some info, all left justified. I'm trying to learn some css basics here, whats the best way to do this? This "piece" will actually be repeated vertically, but if I get the css for the individual segments, I can repeat them. Thanks css layout to acheive
nuviumAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Here's one way to do it.  You could also do it with tables and it might be simpler.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Div Table</title>
<style type="text/css">
<!-- 
.section {
	position:relative;
	float:left;
	border: thin solid black;
	margin-bottom: 7px;
	}
.sleft {
	float:left;
	width:120px;
	}
.scent {
	float:left;
	width:220px;
	height:160px;
	background-color: #eeeeee;
	}
.sright {
	float:left;
	width:120px;
	}
.stext {
	padding-left:3px;
	}	
-->
</style>
</head>
<body>
<h1>Div Table</h1>

<div class="section">
<div class="sleft">View Map</div>
<div class="scent">The map</div>
<div class="sright">
<div class="stext">Title</div>
<div class="stext">Info 1</div>
<div class="stext">Info 2</div>
<div class="stext">Info 3</div>
</div>
<br clear="all" />
</div>
<br clear="all" />

<div class="section">
<div class="sleft">View Map</div>
<div class="scent">The map</div>
<div class="sright">
<div class="stext">Title</div>
<div class="stext">Info 1</div>
<div class="stext">Info 2</div>
<div class="stext">Info 3</div>
</div>
<br clear="all" />
</div>
<br clear="all" />

</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.