Article stays below its parent container

Question

Article stays below its parent container

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am practicing with a web, and I have created a container and inside it I have created one that contains an image, an h4 and a paragraph. The problem is that the section is 380px high, and the article is almost 700px low, as if there was a spacing or margin. I leave the codes:

HTML

 <section>
            <article id="primero" class="articulos">
                <img src="img/icono1.png">
                <h4>LOREM IPSUM</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua..</p>
            </article>
</section>

CSS

section{
    position:relative;
    top:560px;
    width: 100%;
    height: 380px;
    display:block;
}


.articulos{
    clear:both;
    display: inline-block;
    width:25%;
    top:0;

}

html5 html css3 css

asked by Jogofus 28.12.2016 в 03:25

source

2 answers

Problem to access elements of a document: mongoose Open maps generating route

score 1 · Answer 1

To start:

position:relative

This property means that the position will be given by the contents / containers either direct or indirect, that is, if you have 3 divs, the heights "not forced" (forced height: height: 500px; for example) will be accommodating in an automatic .

If you are using this property, then we understand that the top property should not exist, since this property will be for fixed positions and absolute .

Taking this base into account, you must remove these properties from your code, so that they automatically settle in order and do not make you strange positions (unless you want to).

The second strange property you have is based on clear:both which means that it will clean the sides, doing so, that if you are going to position 3 items, this will not work correctly since you will win them below.

If you want to do it that way you should use float: left as property and the inline-block could give you some support (although it would not be entirely necessary).

Then your first class thinking that it is called .container would be:

.contenedor{
    position:relative;
    width: 100%;
    height: 380px;
    display:block;
}

And from there, simply the section and article:

section{
    position: relative;
    width: 100%;
    height: 380px;
    display:block;
    background:red;
}


article{
    float: left;
    display: inline-block;
    width:25%;
    background:blue;

}

Remaining the HTML then:

<div class="contenedor">
  <section>
    <article>
      <!--- --->
    </article>
    <article>
      <!--- --->
    </article>
    <article>
      <!--- --->
    </article>
    <article>
      <!--- --->
    </article>
  </section>
</div>

score 0 · Answer 2

you have a top of 560 px, change it to 0px

article is not downloaded, try my example and you will see that it is not downloaded

section{
    position:absolute;
    top:0px;
    width: 100%;
    height: 380px;
    display:block;
    background:red;
}


article{
    clear:both;
    display: inline-block;
    width:25%;
    top:0;
    background:blue;

}

<section>
            <article id="primero" class="articulos">
                <img src="img/icono1.png">
                <h4>LOREM IPSUM</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua..</p>
            </article>
</section>