HTML & CSS Css styling: how to have picture and text next to each other

Maja0802 · Jan 7, 2021

Hey there!

Hope you can help me (I am sure you can as usual! 🙂)

I want to make a design identical to first screenshoot (the picture with the dog in) (Not the same font-family, though).

I made the design with the mountain. I don't know how to move the header and the paragraph up next to the picture. It is like display: inline-block is not working. at least no on the paragraph and for the header I cannot move it up using margin-top:

Thanks

[CODE lang="css" title="HTML and CSS"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hey there</title>

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<style>

h1 {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 40px;
line-height: 1.2;
margin-top: 0px;
margin-left:200px;
display: inline-block;
}

h1 span {
background-color: rgb(38, 102, 145);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
display: inline-block;
}

.header:hover {
color: rgb(50, 142, 168);
}

p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
font-size: 17.5px;
display: inline-block;
}

img {
width: 500px;
height: 500px;
margin-left: 200px;
margin-top: 100px;
}

</style>



<img src="bjerg.jpg" alt="Girl in a jacket">

<h1> <span class ="header">OM OS</span></h1>

<p> <span><strong>Det indre panel af Røvhuller</strong> er en koncept hvor</span></p>

</head>

<body>
</body>

</script>

</html>
[/CODE]

LTomy · Jan 7, 2021

Hello!
You could put the header/text inside a div and give the img and the div a width of 50%, then place the <div> and the <img> side-by-side (By giving the CSS style 'display: flex;' to their common parent or something like that).

LTomy · Jan 7, 2021

Did my reply made sense to you? ahah.

Maja0802 · Jan 7, 2021

Thanks! Like this?

I struggle to get the text up next to the picture even though it is 50% width.

[CODE lang="css" title="css and HTML"]<style>

h1 {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 40px;
line-height: 1.2;
margin-top: 0px;
margin-left:200px;
display: inline-block;
}

h1 span {
background-color: rgb(38, 102, 145);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
display: inline-block;
}

.header:hover {
color: rgb(50, 142, 168);
}

p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
font-size: 17.5px;
display: inline-block;
}

img {
width: 500px;
height: 500px;
margin-left: 200px;
margin-top: 100px;
}

div {
width: 50%;
}

div img {
display: flex;
}

</style>



<img src="bjerg.jpg" alt="Girl in a jacket">

<div><h1> <span class ="header">OM OS</span></h1>
<p> <span><strong>Det indre panel af Røvhuller</strong> er en koncept hvor<span class="cursor">_</span></span></p></div>

</head>[/CODE]

Maja0802 · Jan 7, 2021

Maja0802 said:
Thanks! Like this?

I struggle to get the text up next to the picture even though it is 50% width.

[CODE lang="css" title="css and HTML"]<style>

h1 {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 40px;
line-height: 1.2;
margin-top: 0px;
margin-left:200px;
display: inline-block;
}

h1 span {
background-color: rgb(38, 102, 145);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
display: inline-block;
}

.header:hover {
color: rgb(50, 142, 168);
}

p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
font-size: 17.5px;
display: inline-block;
}

img {
width: 500px;
height: 500px;
margin-left: 200px;
margin-top: 100px;
}

div {
width: 50%;
}

div img {
display: flex;
}

</style>



<img src="bjerg.jpg" alt="Girl in a jacket">

<div><h1> <span class ="header">OM OS</span></h1>
<p> <span><strong>Det indre panel af Røvhuller</strong> er en koncept hvor<span class="cursor">_</span></span></p></div>

</head>[/CODE]

LTomy · Jan 7, 2021

Hum, give the style display: flex; to the element 'head'.

LTomy · Jan 7, 2021

Alternatively, you can give a with of like 45% to the <div> and give it the style margin: auto;.

Maja0802 · Jan 7, 2021

LTomy said:
Hum, give the style display: flex; to the element 'head'.

The elementer head? Dont think I have an element like that?

LTomy · Jan 7, 2021

The parent element of your <img>, <h1> and <p>.

LTomy · Jan 7, 2021

You seem to have an closed but unopen 'head' element in your code? Anyway, put your <img> and <div> in a <div> and give that <div> the style display: flex;.

Maja0802 · Jan 7, 2021

LTomy said:
Hum, give the style display: flex; to the element 'head'.

Ahh the head tag! It is just further up on the page. I did apply the display: flex; and it worked. Great!
But when I make the img { width: 50%;, how do I adjust the size of the picture. I want it to be bigger...and is it necessary for the imp to be wrapped in id at all?

[CODE lang="css" title="css"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hey there</title>

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<style>

h1 {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 40px;
line-height: 1.2;
margin-top: 0px;
margin-left:200px;
display: inline-block;
}

h1 span {
background-color: rgb(38, 102, 145);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
display: inline-block;
}

.header:hover {
color: rgb(50, 142, 168);
}

p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
font-size: 17.5px;
display: inline-block;
}

img {
width: 50%;
margin-top: 200px;
}

div {
width: 45%;
margin: auto;
display: flex;
}

</style>

<div><img src="bjerg.jpg" alt="Girl in a jacket">

<div>
<h1> <span class ="header">OM OS</span></h1>
<p> <span><strong>Det indre panel af Røvhuller</strong> er en koncept hvor<span class="cursor">_</span></span></p></div>
</div>

</head>

<body>

</body>

</html>
[/CODE]

Maja0802 · Jan 7, 2021

And also the header is one the same line as the paragraph text...

[CODE lang="css" title="header on same line as text"]<head>
<style>

h1 {
color: rgb(239, 61, 74);
line-height: 55px;
font-size: 40px;
line-height: 1.2;
margin-top: 200px;

}

h1 span {
background-color: rgb(38, 102, 145);
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
}

.header:hover {
color: rgb(50, 142, 168);
}

p {
font-family: "JetBrains Mono";
margin-right: 0px;
margin-left: 0px;
margin-top: 200px;
line-height: 1.5;
font-size: 17.5px;
}

img {
width: 50%;
margin-top: 200px;
}

div {
width: 45%;
margin: auto;
display: flex;
}

</style>

<div><img src="bjerg.jpg" alt="Girl in a jacket">

<div>
<h1> <span class ="header">OM OS</span></h1>
<p> <span><strong>Det indre panel af Røvhuller</strong> er en koncept hvor<span class="cursor">_</span></span></p></div>
</div>

</head>[/CODE]

Maja0802 · Jan 7, 2021

Maja0802 said:
And also the header is one the same line as the paragraph text...

[CODE lang="css" title="header on same line as text"]<head>
<style>

h1 {
color: rgb(239, 61, 74);
line-height: 55px;
font-size: 40px;
line-height: 1.2;
margin-top: 200px;

}

h1 span {
background-color: rgb(38, 102, 145);
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
}

.header:hover {
color: rgb(50, 142, 168);
}

p {
font-family: "JetBrains Mono";
margin-right: 0px;
margin-left: 0px;
margin-top: 200px;
line-height: 1.5;
font-size: 17.5px;
}

img {
width: 50%;
margin-top: 200px;
}

div {
width: 45%;
margin: auto;
display: flex;
}

</style>

<div><img src="bjerg.jpg" alt="Girl in a jacket">

<div>
<h1> <span class ="header">OM OS</span></h1>
<p> <span><strong>Det indre panel af Røvhuller</strong> er en koncept hvor<span class="cursor">_</span></span></p></div>
</div>

</head>[/CODE]

LTomy · Jan 7, 2021

Maja0802 said:
Ahh the head tag! It is just further up on the page. I did apply the display: flex; and it worked. Great!
But when I make the img { width: 50%;, how do I adjust the size of the picture. I want it to be bigger...and is it necessary for the imp to be wrapped in id at all?

[CODE lang="css" title="css"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hey there</title>

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<style>

h1 {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 40px;
line-height: 1.2;
margin-top: 0px;
margin-left:200px;
display: inline-block;
}

h1 span {
background-color: rgb(38, 102, 145);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
display: inline-block;
}

.header:hover {
color: rgb(50, 142, 168);
}

p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
font-size: 17.5px;
display: inline-block;
}

img {
width: 50%;
margin-top: 200px;
}

div {
width: 45%;
margin: auto;
display: flex;
}

</style>

<div><img src="bjerg.jpg" alt="Girl in a jacket">

<div>
<h1> <span class ="header">OM OS</span></h1>
<p> <span><strong>Det indre panel af Røvhuller</strong> er en koncept hvor<span class="cursor">_</span></span></p></div>
</div>

</head>

<body>

</body>

</html>
[/CODE]

Your <h1> and <p> and displayed side by side because you gave 'display: flex;' to all <div> elements.

LTomy · Jan 7, 2021

I recommend you to have a look at the property 'display: flex;'. By default, an element with that property will place its children next to another, in a row.

Maja0802 · Jan 7, 2021

LTomy said:
I recommend you to have a look at the property 'display: flex;'. By default, an element with that property will place its children next to another, in a row.

Yeah, I think I should do that as well tomorrow 🙂 Thanks for your help!

LTomy · Jan 7, 2021

Maja0802 said:
Yeah, I think I should do that as well tomorrow 🙂 Thanks for your help!

😉

Malcolm · Jan 7, 2021

What you could try; put the image and text within the same container and then in CSS set the image to float left or right depending on which side you want it to float to.

Note: all content that you want to be displayed e.g. <p>, <img> should be placed within your <body> tag.

LTomy · Jan 7, 2021

Note: all content that you want to be displayed e.g. <p>, <img> should be placed within your <body> tag.

Yeah, I did not pay attention to it because I was only focused on the problem described, but... yeah ahah.

LTomy · Jan 7, 2021

What you could try; put the image and text within the same container and then in CSS set the image to float left or right depending on which side you want it to float to.

This may be a better solution if you do not know flex boxes.

Welcome!

HTML & CSS Css styling: how to have picture and text next to each other

Well-Known Coder

Attachments

Gold Coder

Gold Coder

Well-Known Coder

Well-Known Coder

Attachments

Gold Coder

Gold Coder

Well-Known Coder

Gold Coder

Gold Coder

Well-Known Coder

Attachments

Well-Known Coder

Well-Known Coder

Attachments

Gold Coder

Gold Coder

Well-Known Coder

Gold Coder

Administrator

Gold Coder

Gold Coder

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy