How can I make my image be inlined with my section

Question

I am trying to make my section & image be inlined with each other and I've tried setting display: inline; on the image but it doesn't work.

body {
    font-family: Glory;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family:"Glory";
    src: url("../fonts/Glory.ttf") format("truetype");
}    

header {
    background-color: #5CDB95;
    padding-bottom: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    color: #EDF5E1;
    margin: 0% 1.5%;
}

header nav ul {
    padding-left: 0;
    list-style-type: none;
}

header nav ul li {
    margin-right: 5vh;
    margin-left: 15vh;
}

header nav ul li a {
    color: #05386B;
    text-decoration: none;
}

header nav ul li a:hover {
    color: grey;
}

header nav ul li {
    display: inline;
}

/* Section */
section {
    margin-left: 2%;
    width: 30%;
    background-color: #5CDB95;
    text-align: center;
}

section h2 {
    margin-bottom: 0%;
}

section p {
    margin-top: 0%;
    background-color: #47c580; 
}

.selfie {
    float: right;
}

    <header>
        <h1>MIN WEBBSIDA</h1>
        <nav>
            <ul>
                <li><a href="#">Historia</a></li>
                <li><a href="#">Intressen</a></li>
                <li><a href="#">Framtiden</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>Vem är benim</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea cupiditate eveniet libero numquam iste unde quisquam quam, tempore perferendis? Rerum assumenda delectus quisquam molestias. Cupiditate corporis non culpa illo repellat!</p>
    </section>

    <img class="selfie" width="30%" src="img/selfie.jpg">

I know it's a pretty rookie question but I just can't wrap my head around it.

score 0 · Answer 1 · answered Sep 14 '21 at 17:32

0

Use float: left; on the <section> and <img> elements.

answered Sep 14 '21 at 17:32

Zorion85

132
5

score 0 · Answer 2 · answered Sep 14 '21 at 17:32

You can do something like that:

Add another HTML element (I called it container but it can be any div with an assigned class) and put your section and img inside.

Then, style your container with

    display: flex;
    justify-content: space-around;

And you will have them side by side. You can play around with [Flexbox][1] to have a wider range of possibilities once you set

display: flex to an element.

body {
    font-family: Glory;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family:"Glory";
    src: url("../fonts/Glory.ttf") format("truetype");
}    

header {
    background-color: #5CDB95;
    padding-bottom: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    color: #EDF5E1;
    margin: 0% 1.5%;
}

header nav ul {
    padding-left: 0;
    list-style-type: none;
}

header nav ul li {
    margin-right: 5vh;
    margin-left: 15vh;
}

header nav ul li a {
    color: #05386B;
    text-decoration: none;
}

header nav ul li a:hover {
    color: grey;
}

header nav ul li {
    display: inline;
}

/* Section */
section {
    margin-left: 2%;
    width: 30%;
    background-color: #5CDB95;
    text-align: center;
}

section h2 {
    margin-bottom: 0%;
}

section p {
    margin-top: 0%;
    background-color: #47c580; 
}

.selfie {
    float: right;
}

container {
    display: flex;
    justify-content: space-around;
}

 <header>
        <h1>MIN WEBBSIDA</h1>
        <nav>
            <ul>
                <li><a href="#">Historia</a></li>
                <li><a href="#">Intressen</a></li>
                <li><a href="#">Framtiden</a></li>
            </ul>
        </nav>
    </header>
    <container>
    <section>
        <h2>Vem är benim</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea cupiditate eveniet libero numquam iste unde quisquam quam, tempore perferendis? Rerum assumenda delectus quisquam molestias. Cupiditate corporis non culpa illo repellat!</p>
    </section>

    <img class="selfie" width="30%" src="img/selfie.jpg">

</container>

Thank you! this works really well, however I'm having one last difficulty, my section, I want it to be less wide and also the height is way too extended. How could I fix this? This is what I mean by the height being too much https://prnt.sc/1s6urar — , Sep 14 '21 at 17:39
I see your `section` has `width: 30%;` so on a wider screen will take more space. You can set a number of px there to have the size the same everywhere. — Balastrong, Sep 14 '21 at 17:41
What about the height that it adds? like below the paragraph — , Sep 14 '21 at 17:45
The element `p` has some margin given by the browser. You can add `margin-bottom: 0;` to `section p` and should make it — Balastrong, Sep 14 '21 at 17:48

score 0 · Answer 3 · answered Sep 14 '21 at 17:36

0

You can set the section to display: inline-block; and the section and the image will be vertically aligned. I assume this is what you were looking for.

answered Sep 14 '21 at 17:36

noviolence

156
1
1
8

score 0 · Answer 4 · answered Sep 14 '21 at 17:44

The problem is your section is also a block element, so your image will always be on a new line.

Try setting section to display: inline-block (not inline because you also set width for it here), and then you can set your img to inline :

section {
    margin-left: 2%;
    width: 30%;
    background-color: #5CDB95;
    text-align: center;
    display: inline-block;

}
.selfie {
    display: inline;
}

See the differences between inline and inline-block here

How can I make my image be inlined with my section

4 Answers4