How do I change position of .container

I am trying to make a website (just for learning). What I want is "follow us" h2 and two icon youtube and twitter at a side(right).

and if web page shrinks or if I open the website in the mobile device. it needs to be 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>

This should do what you want it to. :)

.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>

How to use the position property in CSS to align elements, Now let's move on with the position property values. to fixed, and this time it is relative 5px to the right of the <html>, not its parent (container):. Centering things is one of the most difficult aspects of CSS. The methods themselves usually aren't difficult to understand. Instead, it's more due to the fact that there are so many ways to center things. The method you use can vary depending on the HTML element you're trying to center, or whether you're centering it horizontally or vertically. In this tutorial, we'll go over how to center

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

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

You could try this CSS. Hope it will solve your problem.

CSS Layout - The position Property, With relative positioning the container is positioned relative to its usual position on the page. As with the absolutely positioned containers, we can use the left , right , top and bottom properties to modify the position. However, these modifiers work in a slightly different way with relative positioning. Grid Container. To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid.. Grid containers consist of grid items, placed inside columns and rows.

Try:

position:absolute, bottom:0px

CSS Positioning, Choosing how to position an element in CSS is sometimes really a choice This means that even though the container may change sizes, the� Containers. You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents. Containers are used to pad the content inside of them, and there are two container classes available: The .container class provides a responsive fixed width container

Positioning Elements on the Web, The position CSS property sets how an element is positioned in a document. of sticky positioning, select the position: sticky option and scroll this container. One solution is to add will-change: transform to the positioned� Select the dashboard item you want to position and size. In the Layout pane, the item's name appears under Selected item. Tip: To quickly toggle between the Dashboard and Layout panes, press the T key. Define the item's position x and y position in pixels as an offset from the top left corner of the dashboard.

CSS Positioning - MDN Web Docs, Set the position of div at the bottom of its container can be done using bottom, absolute: This property is used when position of a division is relative to its parent How to change font size depending on width of container? How do I change the fixed (container) width (960px to 1150px) in the responsive Static layout, of the default protostar template? I understand, I may need to create a new css file and possibly add to another file.

How to position a div at the bottom of its container using CSS , However, at the same time I have set the containers position as absolute. I could later position the Menu DIV at the right side of the screen by changing the� As you can see in the attached screenshot, for the second container item I do the following operations in order; 1. Change the position of the container object. 2. Change the positions of the shapes inside the container object. But the result is as you see, the Position X of the container does not change but the shapes move as I like to.

Comments
  • I would suggest you to take a look at bootstrap next, but its good that you are trying to learn from ground up. Bootstrap would prevent you reinventing the wheel.
  • It would help if you explain why and add a piece of code to show how its done, be as descriptive as possible with your answers.