How to have different alignments in one div(nav)?

Question

In this fiddle: https://jsfiddle.net/vtrec4oL/

I want #leftSide to align on the left end of my <nav> and the rest in the center.

But I want my page to be as compatible as possible to window resizing so I prefer not to use margin/padding.

Also I would love to achieve this with no additional element if possible.

Does anyone know how to do this only with css?

Answer 1

I want a#gnbii to align on the left end of my nav bar and the rest of the links in the center.

But I want my page to be as compatible as possible to window resizing so I prefer not to use margin/padding.

Also I would love to achieve this with no additional element if possible.

With a combination of CSS flexbox and positioning properties all requirements can be met.

First, add an ID to your a#gnbii parent container:

<li class="gnb" id="align-left"> /* NEW - ID added */
<a class="gnb" id="gnbii" href="home.html">
<img id="gnbii" src="../images/instagram icon/1.png" alt="aranpuzzle.ir" height="40px">
<img id="gnbii" src="../images/instagram icon/2.png" alt="aranpuzzle.ir" height="40px">
</a>
</li>

Here's the CSS:

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#align-left {
    position: absolute;
    left: 2%;
}

DEMO: https://jsfiddle.net/6pmfc87h/3/

Here's what's happening...

• The ul becomes a flexbox with display: flex applied. Each li is now lined up in a row, which is the default behavior for flexbox children (known as "flex items").

• justify-content: center centers child elements along the main axis. In this case, horizontally.

• align-items: center centers child elements along the cross axis. In this case, vertically.

• position: relative establishes the nearest positioned ancestor for absolute positioning.

• position: absolute moves the last li to the left edge of its nearest positioned ancestor.

To learn more about flexbox here's a good reference: A Complete Guide to Flexbox

To learn more about absolute position check this out: MDN position

---

UPDATE (based on comments; for smaller screens)

i want it to slide to right as much as possible instead of overlapping...

Okay, so we can add white-space: nowrap to the ul so the nav items always stay in a row.

Then declare a media query to shift everything to the right on smaller screens:

@media only screen and (max-width: 768px) { 
    ul { justify-content: flex-start; }  /* note: site is RTL */
    #align-left { position: static; }
}

UPDATED DEMO: https://jsfiddle.net/6pmfc87h/4/

...and when there is no more space to slide right, i prefer that then the explorer doesn't let the user resize the width of the window any thiner!

Are you sure this is what you want to do? There are some JavaScript methods that set browser window size, but I'm not sure they're completely reliable across all browsers. More importantly, I don't think this adheres to best practices. In my view, a user should be allowed to re-size their browser window however much the browser natively allows. [ Learn more .]

You're better off focusing on the areas where you have more control as a web developer. You can set a min-width declaration telling the browser that your element can't get any narrower. Or you can use media queries to change things around to fit on smaller screens.

Answer 2

If you want to align an specific element, just create a class and add it to that element. If you want to align last child or first child, use :first-child or :last-child selector in your css. Remember that #leftSide is an ID, do will affect one element, instead use a class.

Answer 3

add the following to your css:

#leftSide{
    float:left;
}

But, if i were you; I would add a few pixels of margin-left for the left picture so its not on the edge.

Unfortunately, my solution ruins your vertical-align a bit!