CODEWITHSUNDEEP
htmlcss
DylanT 25
DylanT 25

Reputation: 233

Pushing a box out of view

So I am trying to experiment with my CSS code and want to know how to push a box out of view. Let me go into more detail...

I have lined up two boxes side by side using the grid element and would like box one to push box two out of the left margin so it is not visible. (I will be bringing it back into view later with animation). So at the starting point only box one is visible.

Does anyone know how to make this possible without adjusting the widths?

(I could do it by simply adjusting the width of box one but I am looking for different methods.)

Upvotes: 2

Views: 257

Answers (3)

Lazar Nikolic
Lazar Nikolic

Reputation: 4394

Without code of the question, it is hard to answer, but let me try.

To hide element you could use display: none; or visibility: hidden; or opacity: 0;

You could also say to the parent element that it has position: relative; and to the element that you want to hide, position: absolute; left: 150%; or right: -50%;, depending on which element you would like to hide, left or right respectively. and with javascript or css animation change later its left or right property in order to show it.

There are a lot of ways for you to achieve what you want.

Upvotes: 2

schennifor
schennifor

Reputation: 21

I am also not sure if I understand your question correctly, but you could try it with:

    margin-left: -23px

and on the outer element 

    overflow:hidden

Upvotes: 2

Joyal Mathew
Joyal Mathew

Reputation: 624

I am not completely sure if I am understanding your question but in css you can use display: none; to hide a block. You can then use display: block; to bring it back into view.

Upvotes: 2

Related Questions