-1

I want to move the view more button below the place holders

html:

<section name="middle" id="middle">

        <p>Upcoming Events</p>

        <div class="grid">
            <img src="http://placehold.it/350x300" alt="" />
            <img src="http://placehold.it/350x300" alt="" />
            <img src="http://placehold.it/350x300" alt="" />
        </div>

        <a href="#">
            <div class="button-2">View More</div>
        </a>
    </section>

css:

.button-2 {
text-align: center;
top: 0;
margin: 0 auto;
width: 200px;
height: 30px;
border-style: solid;
border-width: 2px;
border-color: #1999f9;
color: #1999f9;
padding-top: 10px;
    transition: background-color 0.5s ease;
}


    .grid {
    position: absolute;
    top: 150px;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    /* Align center inline elements */
}

.grid img {
    vertical-align: middle;
    display: inline-block;
    padding-left: 10px;
}

How do i move the view more button to below the placeholders? This is my placeholders css also. is there a way of fixing this problem?

SpikeCakes
  • 7
  • 1
  • Can't you change the markup and move the button after the images? Could you provide the context and some code? – Fabrizio Calderan Mar 21 '16 at 14:44
  • Let me guess, you are using floats for those images, if yes, than you need to clear them :) for more info you can read my answer [here](http://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el/16568504#16568504) – Mr. Alien Mar 21 '16 at 14:48
  • Mr. Alien, i am not using floats thank you – SpikeCakes Mar 21 '16 at 14:50
  • @SpikeCakes positioning like `absolute`? – Mr. Alien Mar 21 '16 at 14:51
  • i see it right: https://jsfiddle.net/f662e7xm/. Can the problem be somewhere else? – Aureliano Far Suau Mar 21 '16 at 14:55
  • Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Mar 21 '16 at 14:55
  • Oh dear, maybe there is a problem somewhere else. Any idea what might cause this? – SpikeCakes Mar 21 '16 at 14:57
  • the `.grid` has `position: absolute` :/. why you did this? – Aureliano Far Suau Mar 21 '16 at 14:58
  • i have removed this. the button has now moved behind the grid – SpikeCakes Mar 21 '16 at 15:01
  • The `.grid` has a height of 50px and is holding images that are 300px tall. Do you want the images to scale to their parent (ie, become 50px tall) or do you want the grid to be the size of the enclosed images? Also, you have an `a` tag wrapped around a your `.button-2` div. The `a` tag is an inline element and the `div` is a block element. You should but the inline element within the `.button-2` div, FWIW. – Angelique Mar 21 '16 at 19:20

1 Answers1

0

to use top: 0; left:0 you will need to add position :absolute in that CSS class. This should work now..

Secondly, button2 should have bottom:0 and grid should have top:0 if you want grid to appear above button..

anshabhi
  • 423
  • 6
  • 29