Images next to text

Get Started
1

How can I place images next to text? I have this thing in mind but it’s not working. I know I’m a pain in the ass on these forums lately :rofl: but I’m just trying to learn here.

<div id="left"> 
        <div class="eventpictures">
        <ul>
        <li><img src="picture"/></li>
         <li><img src="picture"/></li>
         </ul>
         
        
        <h2>Lorem Ispum</h2>
        <p>Lorem ipsum dolorem etc etc</p>
        </div>
        
        
        
        </div>
            <div id="right">
        
     
        </div>

.eventpictures{
    padding-left: 25px;
}
.eventpictures img{
    
    
    border: 1px solid #c98e2a;
    
}

.eventpictures li{
    display: inline;
    margin: 5px;
    
}

.eventpictures ul{
    margin: 0 0 10px 0;
    
    padding-top: 10px;
    float: left;
    text-align="center";
    line-height: 3em;
    list-style:none;
}


.eventpictures h2{
    color: #a57626;
    font-size: 1.6em;
    
}
2

Yeah, let us know how it works out.

3

So it’s working! Show us the website when finished. Would be nise :slight_smile:

4

Yeah exaclty what was mentioned. The key to making everything go smooth is to float everything to the left. That way nothing decides to act funny and it allows you to place content, images where you want to.

5

You need to float the content.

Sorry for the short reply before, bust someone walked it!

6

We"ll see! Many things to do. :slight_smile:

7

Sorry coundn’t edit my text in time. This is how you could do it:


.eventpictures{
    position: relative; overflow: hidden;
}

.eventpictures img{
    margin-left: 25px; float: left; display: inline;  border: 1px solid #c98e2a;
   
}

.eventpictures h2{
    color: #a57626; font-size: 1.6em;
}

.marginR {
	margin-right: 25px;	
}



<div class="eventpictures">
<img src="images/test1.jpg" width="250" height="250">
<img src="images/test2.jpg" width="250" height="250" class="marginR">
<h2>Hallo Allemaal</h2><br>
<p>test text</p>
</div>