How would I position an image all the way to the left? Also why isn't this creating a white div?

I tried Googleing this but nothing seems to be working. I want to make a small 100x70 logo on the top left hand corner of my header. I managed to re-size the image but now I am having trouble placing it on the left.

The div code is :

<div id="popupbox">

</div>

CSS:

#popupbox {
	width: 30%;
	height: 30%;
	background-color: white;
	
}

I’m trying to write a Javascript function that when I click on the sign in button a window pops up and this was suppose to be the window that pops up. I think I’m suppose to hide it with display: hidden and opacity: 0; then I think I have to create an ::active for the popupbox div and call it using javascript.

Have you tried float: left;? That should push it to the left of the containing element, I think. I used fo rthe first time today. I’m only on Day 7 of learning to code. Let me know if it works. :slight_smile:

So, #popupbox { width: 30%; height: 30%; background-color: white; float: left; }

1 Like

For the div white space, I think it’s there… Try to type in something inside it… It’ll be revealed.

If your goal is to have it display in top left corner.

I’m not a big fan on percentages,. but this works.

#popupbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 30%;
    background-color: white;
    display: none;
}

#popupbox.active {
    display: block;
}

Then create an addEventListener on a button which adds/removes the class active to the popupbox element.