0

I am trying to align a p-element and figure-element side by side, inside an article-element.

I have tried selecting the figure directly by giving it a class attribute and then applying float, but it ends up floating below the p-element, instead of next to it, and then another figure-element is moved up to the place of the first figure-element. The first figure-element also seem to exceed outside the article.

I have also tried to target the article-element with a selector but it's not being targeted and I don't know what I am doing wrong.

<div id="page">
    <header>
        <nav></nav>
    </header>
    <div id="content">
        <article>Lorem ipsum...</article>
        <article>
            <p>Lorem ipsum...</p>
            <figure>
                <img src="#" alt="#" />
                    <figcaption>This is the figure to be aligned next to the <p>-element</figcaption>
            </figure>
            <figure></figure>
        </article>
    </div>
</div>


figure {
    display: table;
    margin: auto;
}

I want the p-element and first figure-element to be next to each other.

binaryglot
  • 23
  • 1
  • 5

1 Answers1

0

Unfortunately, elements don't float up. A floated element needs to come before an non-floated element it's intended to set to the left or right of.

Also regular block containers don't automatically expand in height to contain floated descendants. There are few ways to do that with CSS:

Kravimir
  • 691
  • 1
  • 6
  • 7