Position div bottom left

HTML & CSS
1

I have a div that currently is sitting correctly 5% from the left, but i want it to be at the bottom also, and everytime I add position:absolute to it, it creates scrollbars bottom and right.

I have tried everything and cant position it correctly without the scrollbars appearing.

This is the div and its contents.

<div class="homeImageTextWrapper">
<span class="homeImageText entry-title1">Monnow Interiors</span>
<span class="homeImageText entry-title2">Residential &amp; Corporate Interior Design</span>
</div>

And this is the css, although very basic, I cant work it out what ever I try.

.homeImageTextWrapper {
	position:absolute;
	margin-left: 5%;
}
2

Apologies but I need to ask a number of questions first :slight_smile:

It may seem like a strange question but what does bottom refer to exactly?

The bottom of the viewport, or the bottom of a parent div, or the bottom of the document?

If its supposed to be fixed at the bottom of the viewport then you would need position:fixed instead.

e.g.

position:fixed;
bottom:0;
left:5%;
width:auto;/* or 95% if you want it to the right edge*/

If it’s not a fixed element you are looking for then the absolute element’s parent would need position:relative applied.

If you are absolutely placing it then why are you using margin-left:5% instead of left:5%. An absolute element without co-ordinates is offset from its current position in the flow which may not be at the left.

If your element is 100% wide then moving it 5% left will cause a viewport scrollbar as it will now take up 105% of the space. The element would need to be less that 100% wide or position with co-ordinates only.

Of course the scrollbar may be coming from a parent and you are absolutely placing the element outside of its bounds causing a scrollbar.

Depending on situation it may also be a candidate for position:sticky instead of position:fixed but I really need a little more information to answer the question fully :slight_smile:

3

OMG I forgot to put the link in to offer reference sorry.

As you will see that div with the text is top left and i want it same distance from the left just at the bottom about i suppose 10% up if that makes sense.

And fixed I dont think will work, as it need to move with the image, you will see.

I have added your code so you can see.
Sorry…

Link

4

As I guessed the element is 100% wide due to a more specific rule. If you add !important to the width in your rule it will work.

e.g.

.homeImageTextWrapper {
	position:fixed;
	bottom:0;
	left:5%;
	width:auto!important;
	bottom: 5%;
}

I usually eschew !important but you have a chain of styles over-riding it.

.home.monnow-custom-template .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){}

You would have needed to supply your new rule with the same specificity.

5

Ye this is where it got me PaulOB. I have added your code and its positioned correctly from left and off the bottom, but now it doesnt move to the right whe the user toggles the side menu. With relative and margin left set it moved with the image, but with absolute and fixed it stays static.

This is the the situation I was trying to get out of by trying various ways.

6

You can revert back to margin and it will move with the toggle.

.homeImageTextWrapper {
	position:fixed;
	bottom:0;
	left:auto;
	width:auto!important;
	bottom: 5%;
       margin-left:5%;
}

I suppose it depends whether you want it 5% from the viewport edge or from the side column. ?

1 Like
7

e.g.


.homeImageTextWrapper {
	position:fixed;
	bottom:0;
	left:auto;
	width:auto!important;
	bottom: 5%;
       margin-left:-15rem;
}
8

You got it Paul, thank you…

Can eat my tea now lol :grinning:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.