I’m just trying to get the image to be to the very right/end and stay there. I tried flex-end too but nothing is working. need assistance.
codepen
Hi @niamorayo, not quite sure what the problem is… for me the image always is on the very right. You might consider wrapping those columns for mobile MQs though.
FWIW, another approach would be to set
.column2 {
margin-left: auto;
}
… which will produce a margin to the left taking all space available.
2 Likes
i was trying to get it to stay under lets work and above service and work. just like the text is on the edge to the left!
The image isn’t visible in the Pen, so it would help if you could fix that link first. Also I would suggest testing this layout on small screens, as your footer can end up sitting obove other elements if you’re not careful.
You have absolutely placed ‘services and work’ so no element on the page can avoid it as absolute elements are removed from the flow. You should create elements that flow naturally and not use position absolute for structural items. Remember that not everyone’s screen is the same height as yours so your layout needs to adapt to all.
You have also set the body and the wrapper to height:100% and overflow:hidden. That means all content below the fold is cut off and inaccessible to anyone. You also used position absolute on the body which is not a good thing to do and unnecessary.
These are all beginner mistakes and the same mistakes that we all made when starting out so we may need to take a step backward and try and work out what type of layout you require and how it should look. There would be little point in continuing with the structure you have at present as you need to get it back under control and in a more logical sequence.
Regarding the question you originally asked then as others have said your image is far to the right and seems to be doing what you told it. 
I did a quick re-write of the structure just to get back into some order.
This is not meant to be the finished article but something to help you work out where things go etc. There are still things to work out such as small screen sizes and some logical heading structure and a better approach to font-sizing.
1 Like
I was trying to get it like this, but I’m thinking maybe I should make it a background image.
I was inspired by this site and started copying and pasting but it wasn’t working out. thanks for letting me know about the mistakes, I haven’t done this in a while! tysm
That looks more or less what I’ve given you in my codepen rewrite. Here it is with a different aspect image and some space between the text.
Background or foreground image doesn’t really make any difference here unless you want text to go over the background.
Generally an image should be in an img tag if it is meant as content. If it’s just decoration then it should be a background image.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.