Is there a way to adjust the placement of the .container element?

I am currently working on building a website for educational purposes. My goal is to have a "Follow us" h2 heading with YouTube and Twitter icons positioned on the right side of the page.

If the webpage size reduces or if accessed on a mobile device, I want these elements to move under the menu.

<!DOCTYPE html>

<html>
    <!--
      Meta data and stylesheet link
    -->
    <head>
      <meta charset="UTD-8" >
      <meta   name="description" content="Tech Lovers Youtube Channel" >
      <meta name="keywords" content="HTML,CSS,XML,Javascript">
      <meta name="author" content="Owais Qureshi">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title> Tech Lovers | Welcome</title>
     <link rel="stylesheet" href="../CSS/Style.css">
    </head>
    <body>
      <header>
        <!--
          top logo with heading
        -->
      <div id="logo" class="container">
         <img src="../Media/IMG/logo.jpg"  alt="tech_logo">
        <h1>Tech Lovers</h1> 
      </div>
       <!--
          menu
       -->
      <nav  id="menu" class="container">
        <ul>
          <li><a href="../HTML/index.html">Home</a></li>
          <li><a href="../HTML/Blog.html">Blogs</a></li>
          <li><a href="../HTML/About us.html">About Us</a></li>
        </ul>
      </nav>
      <!--
        i want this on  right side.      -->
      <div id="follow_us" class="container">
      <h2>Follow us</h2>
      <a href="https://www.youtube.com/channel/UCsxqKI-iEjmtfK5mcjqTTuA">youtube_img_icon</a>
      <a href="https://twitter.com/techlover771">twitter_img_icon</a>
    </div>   
      </header>
    </body>
</html>

Here's how my website looks like

htmlcss

Answer №1

Here is the solution you've been looking for! :)

.headerContainer{
  display : inline-block;
  float : left;
  width : 200px;
}


/* small screens and mobile */
@media screen and (max-width:767px) {
 .headerContainer{
 display : block;
 float : left;
 clear : both;
 
 }
}
<!DOCTYPE html>

<html>
    <!--
      Meta data and stylesheet link
    -->
    <head>
      <meta charset="UTD-8" >
      <meta   name="description" content="Tech Lovers Youtube Channel" >
      <meta name="keywords" content="HTML,CSS,XML,Javascript">
      <meta name="author" content="Owais Qureshi">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title> Tech Lovers | Welcome</title>
     <link rel="stylesheet" href="../CSS/Style.css">
    </head>
    <body>
      <header>
        <!--
          top logo with heading
        -->
      <div id="logo" class="container">
         <img src="../Media/IMG/logo.jpg"  alt="tech_logo">
        <h1>Tech Lovers</h1> 
      </div>
       <!--
          menu
       -->
      <nav  id="menu" class="headerContainer">
        <ul>
          <li><a href="../HTML/index.html">Home</a></li>
          <li><a href="../HTML/Blog.html">Blogs</a></li>
          <li><a href="../HTML/About us.html">About Us</a></li>
        </ul>
      </nav>
      <!--
        i want this on  right side.      -->
      <div id="follow_us" class="headerContainer">
      <h2>Follow us</h2>
      <a href="https://www.youtube.com/channel/UCsxqKI-iEjmtfK5mcjqTTuA">youtube_img_icon</a>
      <a href="https://twitter.com/techlover771">twitter_img_icon</a>
    </div>   
      </header>
    </body>
</html>

Answer №2

header {
  display: flex;
  flex-direction: column;
}

@media (min-width: 480px) {
  header {
    flex-direction: row;
  }
}

Give this CSS a shot and see if it resolves your issue.

Answer №3

Experiment with:

set position to absolute and make the bottom 0px

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

How can JQuery determine the current CSS background image of a three-state icon or button?

I am facing a challenge with using three images to represent different states of an application icon, and I am trying to achieve this using CSS. There are no issues with the original or hover states: #myDIV { background-image: url(icons/homeBlack.png); } ...

jquerycssbackground-image

What is the best way to insert an image between two sections using CSS?

As I work on a new webpage, I find myself stuck (yes, I'm a beginner :-) ). I have a header followed by a section, and I would like to place images in between the two. However, despite my attempts to position the images, they keep getting hidden "und ...

htmlcssz-index

Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani: ...

javascripthtmlcss

Displaying and hiding a div element using Vue.js dynamically

I have a scenario with two different sized divs: <div class = "bigger"> </div> <div class = "smaller"> </div> The goal is to hide the bigger div and show the smaller div when the screen width is ...

javascripthtmlvue.js

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

phpjavascriptjqueryhtmlforms

I am struggling to activate the hovering feature on my menu bar

I am having trouble making the hover effect in my navigation bar work properly. Even though I can separately make the 'display: none' and hover effects work, they do not function together. I am unsure of what mistake I might be making. Below is ...

cssdrop-down-menuhover

Ways to display notifications when the user is not actively browsing the website?

How can websites display notifications even when the user is not actively on the site? Take Facebook messenger, for instance. Even with the page closed, notifications still pop up. The same goes for Twitter, which also sends push notifications. I ...

javascripthtmlnode.jsangularweb

Trigger a div to transform upon hover among multiple divs sharing the same class

I have encountered an issue with multiple divs having the same class. I've written a JavaScript code to adjust certain CSS properties on hover, but the problem is that when I hover over one box, all others with the same id and class are also affected. ...

javascripthtmlcss

Unable to modify the text color within a moving button

Working on a school project and implemented an animated button style from w3 schools. However, I'm struggling to change the text color within the button. Being new to HTML, I would greatly appreciate any insights or suggestions on what might be going ...

htmlcss

Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/ <div class="one"></div> <div class="two">text here text here text here text here text here text here text here text here text here text here text here te ...

csscss-float

Modify css with php instead of using FTP

As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...

phpcssftpfwrite

What is the best way to transform XML into a two-dimensional array using JavaScript?

I really need to store the array in a variable. Currently, I am utilizing .DataTable for pagination. However, it doesn't support tables generated from XML using JavaScript. Based on this source, I have to convert my XML into a 2D array. Below is the ...

javascripthtmljqueryarrays

$_POST is unable to read POST parameters when using AJAX

I've been facing an issue with sending data to my PHP script. Interestingly, everything works smoothly when using POSTMAN and the results are displayed correctly. However, when attempting to send the data through AJAX in my HTML project, the PHP scrip ...

phphtmlajax

Modifying linked dropdown selections with jQuery

I'm trying to create a recurrent functionality where I have 3 select elements. When the first select is changed, it should update the second and third selects accordingly. If the second select is changed, then it should also affect the third select. ...

javascriptjqueryhtmljquery-uiselect

Tips on creating a Django query based on user-selected options from a drop-down menu

As a newcomer in an internship role, I have been tasked with creating a website where users can select a program, location, or theme to visualize on a heatmap. To achieve this, I opted to utilize Django. However, I am facing two challenges: Firstly, my M ...

pythonhtmldjangodjango-viewsdjango-templates

Starting a tab just once

I have successfully created 4 static HTML pages that include: Home About Services Contact Each page contains a link that leads to another static page named myVideo.html, which plays a video about me in a new tab. The link is available on every page so ...

javascriptphpjqueryhtml

Unable to get Bootstrap 4 overflow hidden to function properly within card layouts during animated transitions

In my project, I have an image inside a card layout and I am working on implementing a zoom effect on mouseover. However, I am facing an issue where during the animation, the image overflows from its parent wrapper. After the animation is completed, the ov ...

cssbootstrap-4

Mastering the art of creating data tables

Currently, I am working on a table that involves phone numbers, subscription status, and groups. However, I have encountered an issue where the incoming date is not aligning properly in my table. It seems to be a simple HTML problem, but I am struggling to ...

htmlruby-on-railshtml-table

Tips for utilizing bootstrap.css to position a web design form in the center of the page and place the copyright at the bottom

I have spent several hours trying to figure out how to achieve this, but still haven't found the solution. I have a form that I believe doesn't look very good: https://i.sstatic.net/t1MRd.png So, I attempted to center the form on the page and ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to limit the input field to only allow up to 100 characters

I have implemented the min and max attributes in my code <input min="1" max="100" type="number"> Upon hovering over the input field, an error message is displayed stating "please select a value that is no more than 100." I am looking for a way to ...

htmlangularjs