CODEWITHSUNDEEP
htmlcssalignmentmargin
Sam
Sam

Reputation: 2331

Aligning two images in css on the right with separate lines

I want to align these two images on the right but I want them to be on separate lines. Right now the only method I can think to do that is a very large margin for one of the images but i'm wondering if there's a better way.

I want the paragraphs to appear beside the first image, on the right. Also the background of the paragraphs changes when scrolled over, but I would like to restrict the colour change to being just around the text.

Use any images you want in this code

This is my code:

<!DOCTYPE HTML>
<html>
<head>
    <title> Stack Overflow Question </title>
    <link rel="stylesheet" type="text/css" href="./css/q7.css"></link>
</head>
<body>
    <h1> Holla lolla lolla la </h1>
    <figure id=real>
        <img src="images/RealDog.jpg" </img>
        <figcaption>Figure 1. Real Dog</figcaption>
    </figure>
    <p id="Gar"> Gar Gar Gar </p>
    <p id="lol"> lol lol lol </p>
    <figure id=fake>
        <img src="images/FakeDog.jpg"></img>
        <figcaption>Figure 2. Fake Dog</figcaption>
    </figure>
</body>
</html>

Css file:

body {
    font-family: sans-serif;
    font-weight: normal;
    background-color: #EDEDED;
}
h1 {
    color: blue;
    font-weight: normal;
}
img {
    height: 100px;
    /*display: block;*/
}
p:hover {
    background-color:white;
}
#Gar {
    float: right;
    color: blue;
    margin-right: 100px;
}
#lol {
    float: right;
    color: blue;
    margin-right: 100px;
}
figure {
    float: right;
    margin-left: 1000px;
}

Upvotes: 0

Views: 140

Answers (1)

Kostas Bakatselos
Kostas Bakatselos

Reputation: 61

First of all it's very important to understand the way that html and css works.You should be more specific with your classes and improve your structure in html code.For css it's wrong to use margin:1000px.It's wrong!I set max-width but you can change it.I tried to correct your code as much as I can...but there are a lot better ways to fix your problem

html code:

<div class = "container">
  <h1> Holla lolla lolla la </h1>
  <div class="right-part">
   <figure id=real>
    <img src="images/RealDog.jpg" </img>
    <figcaption>Figure 1. Real Dog</figcaption>
   </figure>
 <div class="two-p">
   <p id="Gar"> Gar Gar Gar </p>
   <p id="lol"> lol lol lol </p>
 </div>
  <figure id=fake>
    <img src="images/FakeDog.jpg"></img>
    <figcaption>Figure 2. Fake Dog</figcaption>
  </figure>
</div>

css code

body {
  font-family: sans-serif;
  font-weight: normal;
  background-color: #EDEDED;
}
.container{
   position:relative;
   max-width:900px;
   margin:0 auto;
}
h1 {
  color: blue;
  font-weight: normal;
  display: inline-block;
  vertical-align: top;
}
.right-part {
   display: inline-block;
}
p:hover {
  background-color:white;
}
#Gar {
  color: blue;
}
#lol {
 color: blue;
}
.two-p {
  display: inline-block;
  vertical-align: top;
}
figure#real {
  display: inline-block;
}

Upvotes: 1

Related Questions