Member Avatar for shyboy78758

I am having trouble with the following thing. I have a code that is supposed to line up 6 images on the right margin. The six images are supposed to line up to make one image. It's not working right. can anyone help me and tell me what i am doing wrong? Here is my html:

<html>

<head>
<!-- 
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 3
   Case Problem 3

   Martin Luther King, Jr. Speech
   Author: xxxxxxxxxxxxxxxxxxx
   Date:   9/11/2009

   Filename:         king.htm
   Supporting files: banner.jpg, center.css, king1.gif - king6.gif
-->

   <title>Martin Luther King, Jr.</title>
    <style type="text/css">


       #imagem {float: right; margin-left: 2em; margin-right: 0em}
       #bannerimage {width 3.5em; float: none; margin: 0em}
    </style>
    <link href="center.css" rel="stylesheet" type="text/css" />
</head>

<body>

   <div id="banner">
      <img src="banner.jpg" id="bannerimage" alt="The Voices of Civil Rights Series." />
   </div>

<div id="pageContent">
   <h1>
      Martin Luther King, Jr.
   </h1>

   <p>
      <span style="float: left; font-weight: bold; font-size: 3em; color: rgb(102, 102, 240); line-height: 0.8em;
     border-right: solid 0.05em rgb(102, 102, 240); border-bottom: solid 0.05em rgb(102, 102, 240); padding-bottom: 0.2em; padding-right: 0.2em; margin-right: 0.2em" />I</span>
      have a dream that one day this nation will rise up and live out the 
      true meaning of its creed: "We hold these truths to be self-evident: 
      that all men are created equal." I have a dream that one day on the red 
      hills of Georgia the sons of former slaves and the sons of 
      former slaveowners will be able to sit down together at a table of 
      brotherhood. I have a dream that one day even the state of Mississippi, 
      a desert state, sweltering with the heat of injustice and oppression, 
      will be transformed into an oasis of freedom and justice. I have a dream 
      that my four children will one day live in a nation where they will not be 
      judged by the color of their skin but by the content of their character. 
      I have a dream today.

   </p>
<div id="imagem">
    <img src="king1.gif" alt=" " style="width: 6.7em" /><br>
    <img src="king2.gif" alt=" " style="width: 7.85em" /><br>
    <img src="king3.gif" alt=" " style="width: 11.45em" /><br>
    <img src="king4.gif" alt=" " style="width: 14.25em" /><br>
    <img src="king5.gif" alt=" " style="width: 15.5em" /><br>
    <img src="king6.gif" alt=" " style="width: 16.6em" /><br>
</div>


   <p>I have a dream that one day the state of Alabama, whose governor's lips are 
      presently dripping with the words of interposition and nullification, will 
      be transformed into a situation where little black boys and black girls will 
      be able to join hands with little white boys and white girls and walk together 
      as sisters and brothers. I have a dream today. I have a dream that one 
      day every valley shall be exalted, every hill and mountain shall be made low, 
      the rough places will be made plain, and the crooked places will be made 
      straight, and the glory of the Lord shall be revealed, and all flesh shall see it 
      together. This is our hope. This is the faith with which I return to the South. 
      With this faith we will be able to hew out of the mountain of despair a stone of 
      hope. With this faith we will be able to transform the jangling discords of 
      our nation into a beautiful symphony of brotherhood. With this faith we will be 
      able to work together, to pray together, to struggle together, to go to jail 
      together, to stand up for freedom together, knowing that we will be free 
      one day.
   </p>

   <p>This will be the day when all of God's children will be able to sing with a new 
      meaning, "My country, 'tis of thee, sweet land of liberty, of thee I sing. Land 
      where my fathers died, land of the pilgrim's pride, from every mountainside, 
      let freedom ring." And if America is to be a great nation, this must become true. 
      So let freedom ring from the prodigious hilltops of New Hampshire. Let freedom 
      ring from the mighty mountains of New York. Let freedom ring from the heightening                 Alleghenies of Pennsylvania! Let freedom ring from the snowcapped Rockies of 
      Colorado! Let freedom ring from the curvaceous peaks of California! But not only 
      that; let freedom ring from Stone Mountain of Georgia! Let freedom ring from 
      Lookout Mountain of Tennessee! Let freedom ring from every hill and every molehill 
      of Mississippi. From every mountainside, let freedom ring.
   </p>

   <p>When we let freedom ring, when we let it ring from every village and every hamlet, 
      from every state and every city, we will be able to speed up that day when all of 
      God's children, black men and white men, Jews and Gentiles, Protestants and 
      Catholics, will be able to join hands and sing in the words of the old Negro 
      spiritual, 
      <em>Free at last! Free at last! Thank God Almighty, we are free at last!</em>
   </p>

   <address>
      Created by the Midwest University Center for Diversity
   </address>
</div>

</body>
</html>
Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 543 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by Ib89

Dani AI

Generated

There are three separate issues causing the layout to misbehave: a few HTML/CSS typos, using <br> for layout, and the images being treated as inline elements so their right edges don’t line up. has the right idea (float the whole stack), and was right to point out the need to stop using <br> for stacking — but the markup needs a clean, consistent approach and a correct HTML structure first.

A simple, modern fix is to keep the floated container but let CSS stack and right-align the images for you (no <br>s, no inline widths). Example CSS using flexbox (keeps the container floated so text wraps around it):

#imagem {
  float: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* aligns each image by its right edge */
  gap: 0;
  /* optional: set a fixed width equal to your widest slice */
  /* width: 16.6em; */
}
#imagem img {
  display: block;
  max-width: 100%;
  height: auto;
}

Use simple HTML for the stack (one img element per slice) and remove the <br>s. Also move the drop-cap inline style into a class and fix the malformed span — the OP’s span was self-closed, which breaks layout. Fix any CSS typos (for example, width: 3.5em; needs the colon).

Debug checklist:

  • Validate the HTML (W3C validator) to catch stray slashes or bad attributes.
  • Inspect computed styles in DevTools to confirm #imagem is floated and not overridden.
  • If slices still shift, set the floated container’s width to the widest slice so it won’t reflow.
  • Avoid inline width declarations on each image unless you need them; prefer responsive rules in CSS.

This approach should make the six slices stack cleanly and line up by their right edges while letting the paragraph text wrap as intended.

Recommended Answers

All 2 Replies

Member Avatar for Member #360561

I am having trouble with the following thing. I have a code that is supposed to line up 6 images on the right margin.

This was rather lengthy, so I haven't studied it very closely.
A link to a web page might have helped.

But as a start, you have placed the images inside a div, which is good.
Then you have inserted a "br" ( I won't use the tag characters here) which is not so good. Instead, define "imagem" and image like this:

#image { float:right; }
#imagem img { display:block; }

and your problem should probably be solved.
If your images have the right size there's not need to specify the width, but if you define the width of the container, all images will get the same width by specifying it as a fixed percentage (ie. 100%).

Member Avatar for Ib89

Hey, did you ever manage to finish this assignment?
I have it right now and am completely stuck with no help.

I realize this is an old thread, but the material is exactly the same and I can't get Martin Luther to float to the right with the text wrapping him.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.