1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

A little HTML help anyone?

Discussion in 'Tech Talk - Gadgets, Gizmos and Technology' started by Indiana627, Oct 26, 2012.

  1. Indiana627

    Indiana627 Hall Of Fame

    3,256
    4
    Nov 18, 2005
    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.
     
  2. SayWhat?

    SayWhat? Know Nothing

    6,259
    133
    Jun 6, 2009
    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 <br> or two between the image tags.

    Otherwise, you might end up going with a table or DIV.
     
  3. Indiana627

    Indiana627 Hall Of Fame

    3,256
    4
    Nov 18, 2005
    Yes there is text to the left of both pictures.
     
  4. Indiana627

    Indiana627 Hall Of Fame

    3,256
    4
    Nov 18, 2005
    And I want the text to flow under the 2 pictures too as there is more text than pictures on the page.
     
  5. flexoffset

    flexoffset Godfather

    338
    0
    Jul 16, 2007
    You mean like this?
    I put the file up on my drop box.

    http://dl.dropbox.com/u/3273828/dbspics/index.html

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

    the relevant html is such
    Code:
    <body>
    <header>
    	<h1>Two Pics On The Right</h1>
    </header>
    
    <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>
    	</aside>
    	
    	<p>Lorem ipsum dolor...</p>
    	
    	<p>Nullam ac massa orci...</p>
    	
    	<p>Maecenas dolor odio, tempor at varius vitae...</p>
    
    </article>
    </body>
    
    the relevant css is such:
    Code:
    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 */
    }
    
     

Share This Page