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


Tags: html,css,layout,alignment,text-alignment

Problem :

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?



Solution :

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.


    CSS Howto..

    Resize the content of a div based on how many objects are in the div

    How to concat css files with images and fonts form Bower in Grunt/Gulp/Webpack

    How to convert list of buttons to radio buttons based on row overflow?

    How to keep top of element static while bottom is dynamic. -CSS

    W3.CSS how to get a standard header-[left-right]footer layout?

    How to change CSS of last tab in Bootstrap Tab

    HTML Imported text doesn't show line feeds correctly

    How to set variables in LESS from a dynamic website?

    CSS(3): How to display elements after each other

    How to avoid this overlapping in plain CSS?

    How to use regex to match css elements

    How can you print a page that has been altered by javascript?

    how to CSS select all th cells, except the last one on IE7/8?

    CSS: How to create a button with an arrow placedo on the right

    how to order CSS elements?

    How to place a footer at the bottom of a page in CSS?

    CSS how to position element fixed just for y-axis?

    How to animate CSS with a delay between an unknown number of elements [duplicate]

    How to apply CSS to namespace prefixed elements in IE8?

    how to format a single html a href text to have multiple css properties (two different font families)

    How to prevent default Css scroll onclick and allow javascript event only?

    How to set font family and size in html/css

    In CSS, how to not float a 300px wide Div to the next line?

    How to show a background image over foreground image using CSS

    How to scroll horizontally when there are many columns (or a very long row)?

    How to negate conjunction of two attributes in CSS selector

    How does Twitter put labels inside textboxes?

    How can override a CSS class to that nothing get applied?

    How to implement this menu using css pseudo-class selector?

    How do i move this block?