Adding margin to an HTML element causes the entire page to shift downward

Despite successfully applying margin to other elements, I encountered an issue with #searchbarcontainer where it causes the entire page to shift downward. My goal is to center it slightly below the middle of the page, but I'm struggling to find a solution. As a novice in HTML and CSS, I am attempting to create something akin to a Google clone. Below is the code snippet:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#nav {
  display: flex;
  justify-content: flex-end;
  margin-top: -40px;
  margin-right: -5px;
  padding: 20px;
}

.child {
  padding: 15px;
}

.link {
  color: rgb(95, 91, 91);
  text-decoration: none;
}

.link:hover {
  color: black;
}

#logo {
  margin-top: 110px;
  text-align: center;
}

#searchbarcontainer {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b445b46">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div id="form">
  <form action="https://google.com/search">
    <div id="searchbarcontainer">
      <input id="searchbar" type="text" name="q">
    </div>
    <div id="submitcontainer">
      <input id="submit" type="submit" value="Google Search">
    </div>
  </form>
</div>

<div id="nav">
  <div class="child">
    <button type="button" class="btn btn-light"><a class="link" href="images.html">Image Search</a></button>
  </div>
  <div class="child">
    <button type="button" class="btn btn-light"><a class="link" href="advanced.html">Advanced Search</a></button>
  </div>
</div>
<div id="logo">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

htmlcssbootstrap-5

Answer №1

The current layout of your page does not allow for the search bar container to be repositioned without affecting other elements on the page. Although you mentioned wanting it lower, there seems to be limited space available for this adjustment without shifting everything downwards.

If you intend to move the search bar lower, consider restructuring it so that the search input and the "Google Search" button are within the same container and centered accordingly. https://i.stack.imgur.com/SkpCK.png

Answer №2

When creating HTML content, it is important to structure your code in a way that reflects the layout of your website vertically.

A common mistake is writing from top to bottom instead of bottom to top, leading to confusion and inefficient coding.

Consider optimizing your code by removing unnecessary elements and organizing it for better readability and maintainability.

Below is an example of streamlined CSS and HTML code that showcases a simplified approach to creating a responsive design:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "sans-serif";
}

input {
  outline: 0;
  border: 0.3vh solid #bbb;
  font-size: 1.6vh;
}

nav {
  width: 100%;
  height: 6.7vh;
  border-bottom: 0.2vh solid #bbb;
  display: flex;
  justify-content: flex-end;
  padding: 0 3vh;
}

nav>div {
  height: 6.7vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav>div>a {
  color: black;
  text-decoration: none;
  font-size: 1.6vh;
  background: yellow;
}

nav>div>a:first-child {
  margin-right: 1vh;
}

section {
  height: 93.3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section>img {
  width: 45vw;
  height: 15vh;
  object-fit: contain;
}

section>form {
  width: 45vw;
  display: flex;
  justify-content: space-around;
  margin-top: 3vh;
}

section>form>input[type="text"] {
  padding: 1vh;
  border-radius: 1vh;
  width: 65%;
}

section>form>input[type="submit"] {
  width: 25%;
  border-radius: 1vh;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Search</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <main>
    <nav>
      <div><a href="images.html">Image Search</a><a href="advaced.html">Advanced Search</a></div>
    </nav>
    <section>
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
      <form action="https://google.com/search">
        <input id="searchbar" type="text" name="q" />
        <input id="submit" type="submit" value="Search" />
      </form>
    </section>
  </main>
</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

"Excessive overflow results in the displacement of the following block

When viewing on smaller screens, the blocks move down due to oversized images causing overflow. Is there a way to simulate collision in this scenario? <div class="image"> <img src="img/1.jpg" /> </div> <div class="image"> & ...

htmlcsssass

Tips for displaying and concealing a toggle button based on screen size changes

My goal is to display my userlist without a toggle button by default when the screen is in full size, and only provide a toggle button when the screen is in mobile size to allow users to show/hide the list. Currently, I am utilizing the following code: & ...

jqueryhtmlcsstwitter-bootstrapangular-ui-bootstrap

What are some alternatives to using iframes?

Currently, I am working on a project for a client where I need to display multiple websites on a single page in a browser. To achieve this, I initially used the iframe element, but encountered an issue with the openerp frame. Despite setting up the openerp ...

javascripthtmliframeodoo

What is the best way to position my NavBar items to the right using the Bootstrap v5.2 framework?

I am working on a project for my course and need some help. My goal is to have the brand stay aligned to the left, while other items align to the right. I have been able to achieve this without a toggler using justify-content-end, but with a toggler, I a ...

htmlcsstwitter-bootstrap

Here's a unique version: "Steps for replacing an outdated chart with a new one using Chart.js and

Is there a way to remove an old chart when the user clicks a button to retrieve a new chart? I understand that the existing chart needs to be destroyed before a new one is generated, but currently, the code does not support destroying non-globally create ...

javascripthtmlvue.jschart.js

Instructions on how to automatically play multiple video tags on one HTML page while also opening a modal

I'm working on an HTML page that needs to display two different videos in separate modals. My goal is to have each video start playing automatically when the play-video icon is clicked and the modal opens. I attempted this using the code snippet (vid ...

javascripthtmlcss

Create objects in the gallery

I recently developed a React Material-UI component using Typescript: <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <B ...

javascriptcssreactjstypescriptmaterial-ui

Is it possible to target an iframe and display text simultaneously?

Trying to create a unique menu that interacts with an iframe and displays text in a separate div upon clicking. Example: • Menu item 1 clicked. • "https://wikipedia.org" loads in the iframe. • Address of the wikipedia page displayed in a diffe ...

javascriptjqueryhtmlcssiframe

Convert your HTML document into a Microsoft Word file and see the total number of pages in

I have been experimenting with creating a Word document using HTML code. Thanks to various examples, I have made some progress. However, I am facing an issue where I cannot get the total number of pages to display as text on the first page of the document. ...

phphtml

Assign a specific style to Fancybox links and buttons for managing the functions of 'next', 'previous', and 'close'

Utilizing the following jQuery script to hide a div whenever anything that does not have the class 'click' is clicked (used for empty space and certain other divs). $(document).click(function (event) { if (!$(event.target).hasClass('cli ...

jqueryhtmlcssfancyboxfancybox-2

How to conceal sections of a webpage until a child component is successfully loaded with vue

I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is be ...

javascripthtmlcssvue.js

What is the best way to add borders to table cells that have a non-zero value

I am trying to create a table using a function and it currently looks like this: table { border: 1px solid; } td { width: 30px; height: 30px; text-align: center; } <table> <tr> <td>2</td> <td>0</td> ...

htmlcsshtml-table

Transferring content from a div class to an input class

I am seeking help to extract text from a div class and transfer it to an input class. Here is the code I have written: import os import time from selenium import webdriver from pyvirtualdisplay import Display from selenium.webdriver.common.by import By fr ...

pythonhtmlseleniumselenium-webdriver

Troubleshooting Problem with Google Maps CSS

I'm in the process of constructing a website utilizing Foundation and have integrated Google Maps to showcase some markers on it. However, I've noticed that the map control elements in the top left corner (zoom in and zoom out) have disappeared, ...

cssgoogle-mapszurb-foundation

The link and source attributes are missing from the .ejs template

I am experiencing an issue where the href and src attributes in my .ejs file are not referencing my local files properly. My setup involves node.js and express. Here is a snippet from the .ejs template that is causing the problem. <head> & ...

javascripthtmlnode.jsexpress

Utilizing JavaScript to retrieve input names from arrays

This is the HTML form that I am currently working with: <form action="#" method="post"> <table> <tr> <td><label>Product:<label> <input type="text" /></td> <td><label>Price:<label> ...

javascriptjqueryhtmlformsdom

Just getting started with JavaScript and running into trouble creating an array of image objects using an array of strings

I am struggling to accurately describe my issue, making it difficult to find a solution. I have an array called tempData generated from a text file that I want to reference with variables of the same name as the strings in the array. var red = new Image ...

javascriptphphtmlcss

Guide on attaching an event to every dynamically created element in JavaScript

I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...

javascripthtmlcss

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

I'm looking to create a mouse trail that follows the cursor as it moves, made up of small icons or images that gradually fade out over time. I attempted to achieve this by overlaying a grid on top of all other elements on the page. The grid consists o ...

javascriptcss

Develop a PHP polling system with a limit of one vote allowed per unique IP address

My website features an Ajax Poll where users can vote multiple times after refreshing the page, with results being recorded. However, I want to restrict voting to once per IP address and show the results upon page refresh. Below is the code: The HTML Pag ...

javascriptphpjqueryhtmlajax