Aligning picture under a centered one?

**Shnitzel** · 09-21-2008, 02:01 PM

Hey,
I started learning some HTMl lately and came across a problem.
I have two pictures. One is centered at the top of the page, while the second should be directly below it and to the left.
I have attached an illustration.

I got the text aligned to the right of the side picture, but the side picture is tight with the left side of the window, while it needs to be tight to the left position of the top picture.

Is it even possible?
If it is, any help is very much appreciated.

Thank you in advance.

**sticks464** · 09-22-2008, 09:25 AM

You'll have to post your code so we don't have to guess what you want.

**Shnitzel** · 09-22-2008, 02:00 PM

I was pretty sure the illustration covers what I'm looking for.
Anyhow:

Code:

<html>
<head>
<title>Testsite</title>
</head>
<body>
<body bgcolor="#E6E6E6">
<center><img src="/Head.png"></center>
<img src="/Side.png" align="left">
<b>Text</b>
</body>
</html>

**sticks464** · 09-22-2008, 03:59 PM

This should be exactly what you want

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	background: #87ceeb;
	font-size: 1.2em;
}
#container {
	width:760px; /* any width including 100% will work */
	color: inherit;
	margin:0 auto; /* remove if 100% width */
	background:#FFF;
}
#header {
	width: 100%;
	height: 160px;
	background: #1e90ff;
}
#content {/* use for left sidebar */
    background: #99C;
    color: #000;
    float: right;
    margin: 0 0 0 -200px; /* adjust margin if borders added */
    width: 100%;
 }
#content .wrapper {
    background: #FFF;
    margin: 0 0 0 200px;
    overflow: hidden;
    padding: 10px; /* optional, feel free to remove */
}
#sidebar {
	background: #99C;
	color: inherit;
	float: left;
	width: 180px;
	padding: 10px;
}
.clearer {
	height: 1px;
	font-size: -1px;
	clear: both;
}
#footer {
	clear: both;
	border-top: 1px solid #1e90ff; 
	border-bottom: 10px solid #1e90ff;
	text-align: center;
	font-size: 50%;
	font-weight: bold;
}

/* content styles */
#footer p {
	padding: 10px 0;
} 
</style>
</head>
<body>
<div id="container">
<!--header goes here -->
<div id="header">
Put header image here or as a background in the header css
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<h2>Main Text</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
</div>
<div id="sidebar">
<!--sidebar content goes here -->
<img src="myImage.png" width="180" height="300" alt="" />
<!--<div class="clearer"></div>-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>

Thread: Aligning picture under a centered one?

Thread Tools

Display

Aligning picture under a centered one?

Posting Permissions