I'm currently attempting to align an image to the left of a table, a task that would typically be accomplished with class="pull-left" or float: left;. However, I'm encountering an issue where adjusting the spacing between the two elements seems impossible. It appears that the enclosing div is too small, preventing me from modifying margins and padding as desired. Additionally, I am aiming to shift the image slightly downwards, but this proves challenging due to the constraints imposed by pull-left and float: left.
Below is the HTML code snippet:
<div style="marging: 5%; display:inline-block;">
<img class="pull-left" src="some picture" alt="Öffnungszeiten">
<table class="wpTbOeffnungszeiten">
<tr><th colspan="2">Headline</th></tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<!-- more table rows here -->
</table>
</div>
</div>
Here is the corresponding CSS code:
background-image: url("some image");
.wpTbOeffnungszeiten {
margin: 5%;
}
th {
color: $red;
font-weight: bold;
}