I'm trying to build a site that works best at fairly high resolutions, but also slides as far left as possible when the resolution gets lower.
I'm not even sure what code to copy in here, so the link is:
projects.thomasrandolph.info
What I need is for the left side of #page
to stop sliding left at the right side of #logo
plus a few pixels. It's 13.25em
from the left of the page.
I've set the left margin of #page
to 13.25em
, which looks correct, but at higher resolutions, the page looks strange because it's not centered. I want to retain the centering but also stop it sliding at a certain point.
So I want the left side to go no farther left than this:
I would VASTLY prefer If I could do this with pure CSS on the two elements I've noted here, but I can add HTML as necessary.
I've been struggling for a long time with how to even ASK this question, so please ask me questions, or edit this question to improve the clarity of the question.
Here are images of how it currently looks at two resolutions:
Here's an image of how it should look at resolutions below approximately 1540
:
Any resolution higher than ~1540
would slide smoothly to the right, as it currently does.
What I wound up doing was adding a wrapper around #page
. It's not what I would want in a perfect world, but I would want min-margin
in a perfect world (or at least margin: min()
)!
On the wrapper, I applied margin: 0 13.25em;
where the 13.25em
was where I wanted #page
to stop sliding left. The equal margins on both sides leave #page
centered without a 13.25em
shift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.
It seems to be a good fix. I had originally been looking for something more "clever" without adding HTML, but this was simple enough and seems effective enough that it appears to be well worth the extra markup.
If you don't use a border for the element you can use it to define a "min-margin".
.center
{
margin: 0px auto;
border: transparent solid 30px;
}
P.S. I know this is an old question, but the OP also commented this month.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With