I've created a logo, but why are there two logos on my website?

There seems to be an issue with two divs stacking on top of each other, which is not the desired layout. This problem occurs when five div boxes are added.

The goal is to have all divs in a single row, but it's unclear why this layout is not working as intended.

.Box {
  height: 200px;
  background-color: pink;
  width: 18%;
  float: left;
  margin: 5px;
  margin-left: 10.5px;
}

.wrapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
  border: solid black 5px;
  float: left;
  margin: 100px 40px;
}

.Logo1 {
  width: 100px;
  height: 100px;
  background-color: grey;
  float: left;
  margin: 25px;
  background: url(https://via.placeholder.com/100);
  background-size: contain;
}
<div class="wrapper">
  <div class="Box">
    <div class="Logo1"></div>
  </div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
</div>

htmlcssimage

Answer №1

Ensuring flexibility is key when working with percentages in CSS, incorporating percent values in margins, padding, and other properties is essential.

I have successfully updated all box sizes and margins using percentages in CSS, and everything is functioning as expected.

I trust this information proves to be helpful!

.Box {
  height: 200px;
  background-color: pink;
  width: 18%;
  float: left;
  margin: 1%;
}

.wrapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
  border: solid black 5px;
  float: left;
  margin: 100px 40px;
}

.Logo1 {
  width: 80%;
  height: 80%;
  background-color: grey;
  float: left;
  margin: 10%;
  background: url(https://via.placeholder.com/100); /*url(Pictures/animal-2028258.png); original img path*/
  background-size: contain;
  background-repeat: no-repeat;
}
<div class="wrapper">
  <div class="Box">
    <div class="Logo1"></div>
  </div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
  <div class="Box"></div>
</div>

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

The width of sibling divs in IE7 does not match their sibling's width

Currently facing a challenge with resolving an IE7 problem. My goal is to ensure that my sibling div has the same width as its counterparts. The initial sibling serves as the header, whereas the subsequent siblings have specific dimensions. Any advice woul ...

csshtmlinternet-explorer-7

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

htmlcsstextareacss-grid

When a nested CSS Grid is inserted into an HTML table element, it causes horizontal overflow

     Generating an invoice dynamically with a CSS grid poses some challenges. To maintain a specific format, I need to define the number of rows and columns in advance along with column widths. Using template rows and columns for this purpose restrict ...

htmlcsshtml-tablecss-grid

Choosing specific text below an element

I'm having trouble selecting specific text from the table below <section id="bullet_features"> <h2>Additional Features</h2> <p> Knife Steel: 8Cr13MoV, satin finish <br> Handle: Molded co-polymer <br> Blade: 3.6 in. ...

htmlxmlxpath

Picture with predetermined size to occupy entire container

Seeking assistance! I am looking to pixelate an image after a jQuery event without using plugins like pixelate.js as they are not suitable for my project. Is it possible, through CSS or JavaScript, to automatically change the image to a smaller version wi ...

javascriptjquerycsspixelate

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this: https://i.sstatic.net/ss3Ir.png Can this layout be achieved using columns instead of floats? <div class="clearfix"> <div class="float-left"><button class="rounded btn btn-outline ...

htmlcsstwitter-bootstrapbootstrap-4

Utilize AngularJS to bind a variable and display an external HTML file without the need to open it in a browser

In my setup, I have two HTML Views - one is for application purposes and the other is for printing. Let's call them Application.html and PrintForm.html, respectively. Here is a snippet from Application.html: <!DOCTYPE html> <html> < ...

javascripthtmlangularjsprintingangularjs-bindings

What could be causing the 'margin-top' property not to function as expected?

Although I understand the concept of 'margin-collapse', I am puzzled as to why there is no visible 10 px margin on the top of the first box here. The top box, which has the id 'first', should have a 10px margin above it. If this method ...

cssmargin

Crafting a horizontal sub-menu that sits between the parent element and the company logo

Seeking assistance with designing a navigation menu that places the navigation bar above the site logo. I envision the sub-menu expanding horizontally from the navigation bar and positioning itself between the parent navigation bar and the logo. The sub- ...

htmlcssweb

Tips for creating content with ellipsis after every 5 characters

I am new to coding and I need some assistance. I want to truncate text in my navigation bar if it exceeds 5 characters by displaying the first 5 characters followed by an ellipsis. This is to prevent display issues in my nav menu. For example: Input: T ...

phphtmlcss

Is it possible to animate the innerHTML of a div using CSS?

In my HTML file, I have these "cell" divs: <div data-spaces class="cell"></div> When clicked, the innerHTML of these divs changes dynamically from "" to "X". const gridSpaces = document.querySelectorAll("[data-spaces]"); f ...

javascripthtmlcss-animations

Create a server directory structure that populates multiple HTML dropdown lists using either jQuery or AJAX

As a novice navigating jQuery and Ajax, I find myself faced with a specific challenge. My current situation involves a structured set of directories on a server. My goal is to populate a dropdown dynamically with this file hierarchy. Upon click ...

javascriptphpjqueryhtmlajax

Press the button to update several span elements

Imagine I have multiple span elements like this: <span>A</span> <span>B</span> <span>C</span> <span>D</span> and a div element (which will be converted to a button later) named "change". <div id="chan ...

javascriptjqueryhtmlcss

Can anyone recommend the best method for pinpointing the exact building the user is currently in - utilizing HTML5 geolocation or creating a customized map?

In the process of developing a web application using Google App Engine and Python, I have come across information suggesting that HTML5 geolocation provides more accurate results compared to IP geolocation. However, I am curious if this level of precisio ...

pythonhtmlgoogle-app-enginegeolocationgps

Is there a way to assign the value of a textfield to a session attribute in JSP prior to rendering?

Imagine I have the following code snippet: <html> <head> <script> function setSession() { var roll=document.getElementById("rollno").value; session.setAttribute("rollno", roll); } & ...

javascripthtmlcssajaxjsp

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

htmlpython-2.7python-3.xselenium-webdriveriteration

Image file not saved correctly in database using PHP and MySQL

I am currently facing an issue with storing uploaded images in the database. Despite my efforts, the images do not display properly. When I check the image column in phpmyadmin, it shows [BLOB - 20B] instead of the expected size. Interestingly, the displa ...

phpmysqldatabaseimagestore

Enhancing your design with animated borders on hover

This unique border animation caught my eye and sparked my curiosity. I'm interested to know if it can be achieved using only HTML5/CSS for a hover effect. Have you discovered any other visually appealing hover animations worth mentioning? ...

htmlcss

Download the PDF instead of just viewing or downloading it through a link

I need help configuring a link so that when the user clicks "download here," a PDF file is automatically downloaded to their desktop. Can someone provide guidance on how to achieve this? ...

htmlcss

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb