Question 330326 in Html Question posted in
Some basic documentation can be found here.

Html – Can't get an image to move to the left in a division?

Context and example

For context, I just recently started coding to make a website as a project I’ve wanted to do. Right now I have a placeholder image that when clicked is supposed to send you back to the main part of the site but I cant get the image to move away from the text its in a <div> with

Currently what the site looks like:

Currently what the site looks like

I tried so far to use css to make the margin or padding on the text block to push the image away But the image itself wont budge but I can put padding on the image and it pushes the text away.
Sending below the code I currently have with html and css

This is what I want the top to look like:

This is what I want the top to look like

.intpage {
  display: flex;
  justify-content: center
}

.Image {
  float: left;
}

.text {
  text-align: center;
  font-size: 60px;
  margin-left: 70px;
  float: left;
  color: #ffffff;
}

body {
  background-color: #c78df7;
}

p {
  text-align: center;
  font-family: 'Lucida Console', "Lucida Console", monospace;
}
<div class="intpage">
  <div class="Image">
    <a href="https://aechcreations.github.io"><img src="Imagess/pholdr.png" alt="placeholder" width="132" height="132" onmouseover="this.src='Imagess/pholdr2.png'" onmouseout="this.src='Imagess/pholdr.png'" />
    </a>
  </div>
  <div class="Text">
    <h1> testing </h1>
  </div>
</div>

<p> this is a test that I think is working </p>
Tags:

2

Answers


  1. 0

    If you want your content to be inline you need to wrap it in a div and use display: flex and flex-direction:row (if you use column (.intpage) it will stack child elements verticaly). Check this code hope it helps

    .container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 5px;
}
.intpage {
    display: flex;
    flex-direction: column;
    align-items: center;
}


body{
    background-color: #c78df7;
    }
    

p{
    text-align: center;
    font-family: 'Lucida Console', "Lucida Console", monospace;
    }
        <div class="container">
        <div class = "intpage">
            <div class = "Image">
                <a href="https://aechcreations.github.io"><img src="https://picsum.photos/seed/picsum/200/300" alt="placeholder" width="132" height="132"
                    onmouseover="this.src='https://picsum.photos/200/300?grayscale'"
                    onmouseout="this.src='https://picsum.photos/200/300/?blur=2'" />
                </a>
            </div>
            <div class = "Text">
                <h1> image description </h1> 
            </div>
        </div>
        <h1>Example Header</h1>
        <div class = "Image">
            <a href="https://aechcreations.github.io"><img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" alt="placeholder" width="132" height="132">
            </a>
        </div>
    </div>
    <p> This is a test that I think is working </p>
    Login or Signup to reply.
  2. 0

    1. As the class .intpage ‘s display property is flex, you don’t need to make the image float:left. remove float:left

    2. The classes .Image and .Text should be made into percentage as you want h1 to be centered (Note: The class name given in css is .test and the class name given in html is Test. Class names are case sensitive)

    3. For the image provide only width and mention height as auto

    4. Add align = "center" in the img tag as the img tag is a child of the class .Image

    5. For the sake of understanding, Font-size of .Test, I’ve reduced to 30px.

    6. Remove float:left in the class .Test. The text-align:center will conflict to float:left. If you want this to be in left change text-align:center to text-align:left

    7. h1 will be in the center of the right side portion (85%), and <p> will be in the center of the whole screen width. This may make you to think that it is not properly aligned. So, for you to understand, I’have added a line separating two divisions. To remove this remove <hr size="3" color="white"> from html.

    Checked with a dummy image. Screenshot

    Placed the css between tag. You can remove and paste into separate css file.

    <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aech Vee Creations</title>
    <link rel="icon" href="Imagess/favicontest.png">
    <style>
    


.intpage {
    display: flex;
    }

.Image{
    
    width : 12%;
    margin: 0 10px;

}

.Text{
    text-align: center;
    font-size: 30px;
    margin-left: 70px;
    width:85%;
    color: #ffffff;
    }

body{
    background-color: #c78df7;
    }
    

p{
    text-align: center;
    font-family: 'Lucida Console', "Lucida Console", monospace;
    }
    
    
  
    </style>
    
    
    </head>
<body>
<div class = "intpage">
<div class = "Image">
<a href="https://aechcreations.github.io"><img src="https://imgur.com/a/L0DsxYJ" alt="placeholder" width="132" height="auto" align="center"
    onmouseover="this.src='Imagess/pholdr2.png'"
    onmouseout="this.src='Imagess/pholdr.png'" />
</a>
</div>
<div class = "Text">
    <h1> testing </h1> 
</div>

</div>
<hr size="3" color="white">

    <p> this is a test that I think is working </p>


</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search