Arrangement of a pair of elements within a single sequence

Can someone help me align the text and icons (login, shop) to be at the same level as the 'Logo,' but on the right side? I attempted to adjust the '.shop-icon' with {margin: -30px auto;}, but it ended up messing up the entire page layout, with the 'nav bar' and 'article' covering the header.

I'm still in the learning stages, but it seems like I've broken something from the start.

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #2B2B2B;
  font-size: 1.6rem;
}

.header-front {
  max-width: 992px;
  margin: 0 auto;
}

h1.logo {
  color: #F6F6F6;
  font-size: 4.8rem;
  font-weight: 700;
  text-align: left;
}

.shop-icon {
  text-align: right;
}

.bag,
.account {
  color: #F6F6F6;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px;
}

.main-menu {
  background-color: #F7FCFA;
  width: 100%;
}

p {
  color: #FFFFFF;
}
htmlcssweb

Answer №1

To vertically align elements in a container using flex, you can use display:flex and align-items: center. By setting flex:1 on the shop-icon element, it will take up the remaining space and align its elements to the right.

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #2B2B2B;
  font-size: 1.6rem;
}

.header-front {
  max-width: 992px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

h1.logo {
  color: #F6F6F6;
  font-size: 4.8rem;
  font-weight: 700;
  text-align: left;
}

.shop-icon {
  text-align: right;
  flex: 1;
}

.bag,
.account {
  color: #F6F6F6;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px;
}

.main-menu {
  background-color: #F7FCFA;
  width: 100%;
}

p {
  color: #FFFFFF;
}
<body>
  <header class="header-front">
    <h1 class="logo">Logo </h1>
    <div class="shop-icon">
      <a href="_blank" class="account">
            Login <i class="fa fa-user-o" aria-hidden="true"></i>
            </a>

      <a href="_blank" class="bag">
            shop <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            </a>
    </div>

  </header>

  <nav class="main-menu">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean
      dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis
      elit, tincidunt nec ullamcorper vitae, interdum non leo. </p>
  </article>
</body>

</html>

Answer №2

To position the shop-icon element, you can apply the CSS property position: absolute;.

.shop-icon {
  position: absolute;
  left: 120px;
  top: 26px;
}

If you want the element to appear on the right side of the page instead, you can use right: 10px in place of left.

Check out this code snippet for reference:

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #2B2B2B;
  font-size: 1.6rem;
}

.header-front {
  max-width: 992px;
  margin: 0 auto;
}

h1.logo {
  color: #F6F6F6;
  font-size: 4.8rem;
  font-weight: 700;
  text-align: left;
}

.shop-icon {
  position: absolute;
  left: 120px;
  top: 26px;
}

.bag,
.account {
  color: #F6F6F6;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px;
}

.main-menu {
  background-color: #F7FCFA;
  width: 100%;
}

p {
  color: #FFFFFF;
}
<body>
  <header class="header-front">
    <h1 class="logo">Logo </h1>
    <div class="shop-icon">
      <a href="_blank" class="account">
            Login <i class="fa fa-user-o" aria-hidden="true"></i>
            </a>

      <a href="_blank" class="bag">
            shop <i class="fa fa-shopping-bag" aria-hidden="true"></i>
            </a>
    </div>

  </header>

  <nav class="main-menu">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean
      dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis
      elit, tincidunt nec ullamcorper vitae, interdum non leo. </p>
  </article>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

javascriptcsstypescriptless

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

On my webpage, I have various div elements displayed. Each div has the options to move it up or down using the buttons labeled "UP" and "Down". When a user selects a div, they can then use these buttons to adjust its position. I am looking for a way to au ...

javascriptjquerycss

Creating a variety of Flexslider slideshows on the fly

Check out this snippet of code: <?php foreach ($objVideos as $objVideo) : ?> jQuery('#carousel-<?php echo $objVideo->id; ?>').flexslider({ animation: "slide", controlNav: false, animationLoop: false, ...

javascriptjqueryhtml

Utilize an icon within an input box using content and the :before pseudo-element instead of relying on

My problem is that I have a great font set up and I use it to add custom icons next to my buttons. (for example: check here) Now, I want to create an input box and place an icon before it like in this guide HERE Instead of using a background image, I wou ...

csspseudo-elementinputbox

Adjusting the Image Size in Web Browser Control to Match Device Width on WP8

I am currently working on a WP8 application that utilizes the WebBrowser control to display images. My goal is to have the image width match the width of the phone exactly, but I am encountering some difficulties in achieving this. My approach involves ob ...

c#htmlcsswindows-phone-8

Initiate the SVG animation upon entering the viewport

I'm struggling to initiate the animation when it enters the viewport. I've looked through previous questions on stack overflow, but I can't seem to customize the JS for my specific requirements. My latest attempt was to start the pink line&a ...

javascriptjquerycssanimationsvg

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

csstypescriptmaterial-uistylesdivider

Font awesome npm issue causing fonts to return a 404 error

I have a Laravel project. I added font awesome fonts to my SCSS file in the following way. Here are the font dependencies: "dependencies": { "@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-pro": "^5.15.3", // Font Awesome ...

cssnpmwebpackfont-awesome

Strategies for creating CSS queries that specifically target tablet devices

Struggling to customize CSS for tablets, specifically aiming for iPads and Android devices. Looking for a more accurate way to differentiate between tablets and smartphones like Samsung Nexus, which are currently being misidentified as tablets in my curr ...

htmlcss

Transferring information between two pages when a button is clicked in Angular

How can I display hero details on the hero-details page when clicking a button? I'm currently struggling to make it work. When I click the button, the details show up on the hero-list page, but using the routerLink doesn't display the data. I am ...

htmlangular

Can someone guide me on how to make an array filled with dates using Javascript?

I am working on developing a Javascript code that can identify all the days leading up to the current date. Here is what I have managed so far: var titleArray = [ "title1", "title2", ]; var pictureArray = today.toString(); var thumbArray = today.toString ...

javascriptjqueryhtml

The custom error message for invalid input remains unchanged even after the box is selected

Currently working on implementing an input (checkbox) that displays a custom message when it is considered invalid (unchecked). However, even after the user checks the box, the message remains displayed and the box is still considered invalid. I suspect th ...

htmlangularjstwitter-bootstrap-3

augmentable form that can be expanded flexibly

Perhaps I'm missing something really simple here, but I just can't seem to figure this out. I'm attempting to create a form that can dynamically extend. The issue I'm facing is that I can't get this particular code to function: & ...

javascriptphphtml

The HTML code for the digital watch is malfunctioning once it's been uploaded to Google Drive

Here's the code I'm using: <center> <div style="text-align:center;width:350px;padding:0.5em 0;"> <h2><a style="text-decoration:none;" href="http://www.zeitverschiebung.net/en/country/bd"><span style="color:gray;">& ...

html

Dynamically apply colors to the pagination arrows to enhance visual appeal

Looking to incorporate the 4 standard arrows for pagination with dynamic coloring. Any advice on how to achieve this? Thanks, Javier ...

htmlcsspng

Obtaining numerous distinct array elements

I have created a form with checkboxes for users to select options. <input type="checkbox" name="rights[]" value="1" class="a"> A <input type="checkbox" name="rights[]" value="2" class="b"> B <input type="checkbox" name="rights[]" value="3" ...

phphtmlcodeigniter

Can PHP Webpage Make an AJAX POST Request to Express Server on the Same or Different Ports?

Trying to enable a POST request through AJAX from a site to an express server triggered some unexpected challenges. When running the server on the same localhost port as the website (localhost:8080), the webpage fails to render and an error message pops up ...

javascriptexpressweb

Is it possible to eliminate a style that was applied using the .css() method?

Currently, I am using jQuery to modify the CSS and would like to know how to remove the styling that is being applied based on the input value provided: If the color is not '000000', then change the background-color of the body element to the sp ...

javascriptjquerycss

React Navigation Item Toolbar Misplacement

I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...

javascriptcssreactjsstyled-components

How to assign a value to a textarea element in an HTML form?

I am struggling to populate a text area with the value using this code snippet... <?php $message = $_REQUEST['message']; ?> <br/><b>Description</b><br/> <TEXTAREA NAME="message" COLS=40 ROWS=6 value="<?=$messa ...

phphtml