DBSTalk Forum banner

A little HTML help anyone?

771 Views 4 Replies 3 Participants Last post by  flexoffset
I'm trying to get 2 pictures to both be right justified and have them lined up one under the other regardless of the viewer's screen size/resolution. I can get the top picture exactly where I want it, but I can't get the bottom picture to line up underneath the top picture and be right justified. I'm by no means an HTML expert, but can anyone help me out with this? Tried various web searches to no avail. Thanks.
1 - 5 of 5 Posts
Need more input.

Is there anything else on the same lines as each picture? Text or anything to the left?

If not, you might try using a
or two between the image tags.

Otherwise, you might end up going with a table or DIV.
Yes there is text to the left of both pictures.
And I want the text to flow under the 2 pictures too as there is more text than pictures on the page.
You mean like this?
I put the file up on my drop box.


It is basically installing a container inside the paragraph and floating it right.

the relevant html is such
	<h1>Two Pics On The Right</h1>

<article id="main">

	<aside> <!-- you want to put this inside the area containing the paragraph text and it probably needs to come first -->
		<figure><img src="pic1.jpg"></figure>
		<figure><img src="pic2.jpg"></figure>
	<p>Lorem ipsum dolor...</p>
	<p>Nullam ac massa orci...</p>
	<p>Maecenas dolor odio, tempor at varius vitae...</p>

the relevant css is such:
html, body {
	width: 100%;
	margin: 0 auto;
	font-size: 62.5%;
	color: #000000;
	font-family: Helvetica, sans-serif;
	background-color: #dddddd;

h1 {
	font-size: 10em;
	text-align: center;
p {
	font-size: 2.2em;
	text-align: left;
	line-height: 2.2em;
	margin: 0 0 2% 0;

header {
	position: relative;
	float: left;
	width: 100%;
	background: #ffffff;
	padding: 2%;

article#main {
	width: 100%; /* this makes the text take up the entire browser width, effectively forcing wrap-around of the images to come later */
	position: relative;
	float: left; 
	padding: 2%; /* just to give a little breathing room from the edges of the browser window */

aside {
	width: 46%; /* this will set the image container to occupy 46% of the available browswer width */
	min-width: 15%; /* this sets a lower bounds on the width of the 'aside' portion of the page */
	margin: 0 2%; /* again, this is just to neaten things up. top-bottom is zero and left-right is 2% */
	position: relative;
	float: right; /* floating this so it sticks page right */

figure img {
	width: 100%; /* sets the image to use 100% of its size. original image is 400x600px */
	min-width: 10%; /* sets lower bounds to the image to keep it somewhat viewable */
	padding: 2%; /* pad all four edges of the images */
See less See more
1 - 5 of 5 Posts
This is an older thread, you may not receive a response, and could be reviving an old thread. Please consider creating a new thread.