Error using CSS Nth-Child()

Asked

Viewed 79 times

1

.citacao-bio {
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
    margin: 20px 40px;
    float: left;
    position: relative;
}
.citacao-bio:nth-child(2){
    float: right;
}

<div class="citacao-bio">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar dictum est, eget suscipit eros luctus blandit. Aliquam sodales nibh purus, vel aliquam nulla pretium et. Nunc pharetra tortor quis dolor viverra malesuada.
</div>

<div class="citacao-bio">
 Integer bibendum est felis, sit amet tempor elit posuere tincidunt. Cras tempus pharetra velit sed aliquet. Vivamus blandit magna commodo facilisis accumsan. Sed vitae pretium augue.
</div>

I’m trying to put the second item to the right of the content, but without success, and I can’t find the error.

html css front-end

  • Post HTML to view...

  • are only two Ivs with lorem

  • Here worked your code. There is nothing in the middle of these DIVS ?

  • @Withilogambôa only with this code worked perfectly. If it is breaking down it may be due to mathematical error, e.g.: you have a father div with 250px and this putting two daughters of 140px that would add 280px. Generating break error.

  • but I’m just giving the float, the size is right, but it’s not going the right way

  • 2

    Reading suggestion What does N mean in "Nth-Child" or "Nth-last-Child selectors"

Show 1 more comment

2 answers

0


I managed, after a while, had forgotten here in the stack, the correct syntax for use is

EX:

:nth-child(1n){}

0

Use the Nth Tester CSS Tricks. Will help you.

A good one for you to create Layouts would also be to Flexbox. It already has a good compatibility with the most modern browsers.

  • about the flexbox I know, only I’m doing this test, because I’ll put these Divs as blockquotes on the site, and they need to use the class, because there will be other Divs. I’m going to check out Tester :3

  • yeah, Tester won’t work because I’m using classes, and in it you can only read’s and Divs

  • 1

    Murilo, it’s the same logic with li or class. Put your HTML there to make it easier to understand.

Browser other questions tagged html css front-end

You are not signed in. Login or sign up in order to post.