Solved

help with css positioning

Posted on 2011-03-12
1
183 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:nuvium
1 Comment
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 35117114
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Gulp not seeing Changes 4 39
Safari On Gmail only html 12 40
Overlap photo won't go all the way to the right 1 9
Target h5 of a div 3 10
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo‚Ķ
This article discusses four methods for overlaying images in a container on a web page
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

22 Experts available now in Live!

Get 1:1 Help Now