CODEWITHSUNDEEP
htmlcss
Frank Visaggio
Frank Visaggio

Reputation: 3712

css calc with center offset

Here is what I am trying

I have an element in the center that i want to stay in the center. Now i want an element to hug the left side of this element.

so in reality where i want the left most position of the left div would be right:calc(50%-200px-(lefts width));

my problem is doing right:50%; does something but right:calc(50% +100px) does not.

How can i make it so the div with the left class is always hugging the guy in the center?

<div class="left"> hug this center element </div>
<div class="middle"> this stays in the middle</div>

Upvotes: 6

Views: 34065

Answers (3)

Abdo-Host
Abdo-Host

Reputation: 4103

left: 50%; /* align center */
margin-left: -30px;  /* your element width / 2 when element = 60px */

Upvotes: 6

hograham
hograham

Reputation: 51

It is really very simple, but is dedicated to a single graphic or event. More importantly it also resolves the "resize" anomaly. So the code overhead is minimal. Using a graphic with a width of 300px, we need to state 50% within the method. Therefore:

     #imgone {
     left : calc (100% - 150px / 2);
     /* other code here*/;
     }

This most important rule is to ensure "white space" between + or - to avoid signed numbers. It is useful to adopt this convention for both multiply and divide. All recognised value attributes (eg: px, pt, em, etc...) can be used. However 'auto' is treated differently by browsers and is excluded. Shame, with a bit of forward thinking "center-row:image' (sic) would have been an obvious method along with "center-col:image"(sic). Too easy, perhaps?

Upvotes: 5

Dan
Dan

Reputation: 9468

The below works - adjust your HTML to this:

<div class="middle"> this stays in the middle
    <div class="left"> text here </div>
</div>

Change your CSS for .left

.left {
    position: relative;
    right: 60px; //adjust this to change left-right position of the .left div
}

JS Fiddle Demo

Upvotes: 3

Related Questions