I've been experimenting with creating a visually appealing div that serves as the centerpiece of a website.
Imagine it resembling a standard "news" link. The width set at 80%, an image aligned to the left with a border, a headline detailing the latest news, a paragraph ending with a link for more information, and finishing off with an hr tag before moving on to the next piece of news.
The initial issue arises when attempting to add margin or padding to create space between the text and the image border. No matter what I try, the header and paragraph stubbornly start right where the image border ends. Furthermore, utilizing the hr tag causes it to begin immediately after the paragraph content.
A third obstacle emerges when implementing the display inline-block property; the margin auto functionality ceases to work, resulting in everything being floated to the left.
Below is my code snippet:
div.content1 {
width: 80%;
color: white;
background: #2B2B2B;
margin-top: 25px;
box-shadow: 0px 0px 10px 5px #3A3A3A;
height: auto;
display: inline-block;
padding: 15px;
margin-bottom: 25px;
}
div.content1>img {
float: left;
max-height: 100%;
border: 1px solid black;
width: 400px;
height: 200px;
}
.content1>p {
padding: 15px;
}<div class="content1">
<img src="Twitter.png">
<h1> Welcome! </h1>
<p>Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... </p>
<hr>
<h1> Welcome! </h1>
<p>Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... </p>
</div>