CODEWITHSUNDEEP
htmlcss
Sirius B
Sirius B

Reputation: 19

Issue putting Image next to text (not float issue)

I tried everything with CSS and HTML about this. Here's an Image explaining visually what I want to do and what is happening Tried Margin, Pudding, Clear, Vertical Align and even more. I'm just too tired now of fixing this bug. I tried to fix it for about a day now.

enter image description here

By the way sorry for my probably bad post, pretty new to this website.

.Intro_IMG {
    max-width: 192px;
    float: left;
    display: block;
    margin: 0 auto;
    box-align: middle;
}
.Intro{
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    display: block;
    margin: 0 auto;
    overflow: auto;
}
<div class="Intro">
    <img class="Intro_IMG" src="https://placehold.it/192x192">
    <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
    <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
    <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
    <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
    <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
</div>

Someone told me to show the whole code so there it is:

<!DOCTYPE html>
<html>
    <head>
        <title>Accueil</title>
        <link rel="stylesheet" type="text/css" href="css/ArchUI_Light.css">
        <link rel="icon" href="ressources/siriusblogo.png">
    </head>
    <body>
        <!--Navigation Bar-->
        <nav class="NavBar">
            <ul>
                <li><a href="accueil_dark.html">Accueil (Dark)</a> <a href="redirect/discord_light.html">Serveur Discord</a> <a href="redirect/youtube_light.html">Chaîne Youtube</a></li>
            </ul>
        </nav>
        <!--Main Title-->
        <img class="ML" src="ressources/siriusblogo.png">
        <h1>Le Site de Sirius B !</h1>
        <!--WIP Website Message-->
        <div class="WIP_MSG">
            <h2 class="Warning">Veuillez Notez !</h2>
            <p>Ce site est actuellement en développement.</p>
            <p>Il se peut que le site est moche remplis de bugs.</p>
            <p>Merci de votre compréhension.</p>
            <p>- Sirius B</p>
        </div>
        <!--Introduction-->
        <div class="Intro">
                <img class="Intro_IMG" src="https://placehold.it/192x192">
                <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
                <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
                <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
                <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
                <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
                <div class="clearfix"></div>
            </div>
        <!--Other Info-->
    </body>
</html>

body {
    color: black;
    background-color: #f0f0f0;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.NavBar {
    background-color: #f9f9f9;
    border: solid #f9f9f9;
    border-width: 10px;
    color: black;
    text-align: left;
}
.ML {
    max-width: 96px;
    margin-top: 48px;
    border: 1px solid black;
}
.ML_Borderless {
    max-width: 96px;
    margin-top: 48px;
}
.ML_Borderless-small {
    max-width: 48px;
    margin-top: 48px;
}
.Warning {
    color: red;
}
.Intro_IMG {
    max-width: 192px;
    float: left;
    display: block;
    margin: 0 auto;
    box-align: middle;
    margin-right: 12px;
}
.Intro{
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    display: inline-block;
    margin: 0 auto;
}
.clearfix {
  clear: both;
}

Upvotes: 1

Views: 1223

Answers (4)

Sirius B
Sirius B

Reputation: 19

I used Taou Ben's code for a while but then I found a way simplier solution. Just use the following CSS and HTML:

.IntroDIV {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    margin: 0 auto;
    text-align: left;
}

.Intro_IMG {
    max-width: 192px;
    float: left;
}
        <div class="IntroDIV">
                <div class="Intro_IMGDIV">
                 <img class="Intro_IMG" src="https://via.placeholder.com/512/">
                </div>        
                <div>
                  <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
                  <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
                  <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
                  <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
                  <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
                </div>     
              </div>

Upvotes: 0

kanuos
kanuos

Reputation: 1195

Put the image in a div and the texts in another div. The main container will have two divs, first one containing image and the second one containing texts. Set the display of the main container to flex. Set align-items to center.

Upvotes: 0

TaouBen
TaouBen

Reputation: 1315

This is an edited answer, so here is the code I think it will work for you!

Make a change in your HTML structure : 

<body style="text-align:center;">
  <div class="Intro clear-fix">
    <div class="img-container">
     <img class="Intro_IMG" src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]">

    </div>        
    <div class="content-container">
      <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
      <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
      <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
      <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
      <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
    </div>     
  </div>
</body>

And this is your new CSS : 

.Intro_IMG {
    max-width: 192px;
    float: left;
    display: block;
    margin: 0 auto;
    box-align: middle;
}

.Intro{
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    display: block;
    margin: 0 auto;
    overflow: auto;
  max-width: 1000px;
}

.img-container, .content-container {
  float: left;
}

.content-container {
  text-align: left;
}

.clear-fix {
  content: "";
  display: table;
  clear: both;
}

Upvotes: 2

David Martins
David Martins

Reputation: 121

You'll need to change your HTML structure and CSS a little bit.

Change .Intro display to inline-block with width: auto. Then append a div inside .Intro with clear: both just in case if your text height is smaller than the image. After then, put your text content inside another div to control its width and height.

.Intro_IMG {
    max-width: 192px;
    float: left;
    display: block;
    margin: 0 auto;
    box-align: middle;
    margin-right: 12px;
}
.Intro{
    border: 1px solid black;
    background-color: #f9f9f9;
    margin-top: 48px;
    display: inline-block;
    margin: 0 auto;
    width: auto;
}
.Intro_Content {
  max-height: 192px;
  overflow: hidden;
}
.clearfix {
  clear: both;
}
<div class="Intro">
    <img class="Intro_IMG" src="https://placehold.it/192x192">
    <div class="Intro_Content">
      <h3>Hey bien salut tout le monde c'est Sirius B !</h3>
      <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>
      <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>
      <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>
      <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>
    </div>
    <div class="clearfix"></div>
</div>

Upvotes: 2

Related Questions