Making use of CSS to manipulate the placement of images within a grid

I've been struggling to insert an image into a grid, and it's causing some issues for me.
Currently, the main problem I'm facing is that it's pushing another grid item down.

body {
  padding: 0;
  margin: 0;
}

.main {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-bar {
  grid-row: 1/16;
  grid-column: 4/21;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-info {
  grid-column: 1/21;
  grid-row: 1/21;
  background: #333;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.header-title {
  grid-column: 3;
  grid-row: 2/8;
  background: #000;
}

.business {
  grid-column: 17;
}

.side-bar {
  background: #fff;
  grid-row: 1/21;
  grid-column: 1/4;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  border-right: 1px solid #0F6B99;
}

.side-bar img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -24px;
}

.home-button {
  padding: 20px;
  text-align: center;
  background: #0F6B99;
  grid-row: 3/4;
}

.buy-button {
  padding: 20px;
  text-align: center;
  background: #59B3B3;
  grid-row: 4/5;
}

.sell-button {
  padding: 20px;
  text-align: center;
  background: #8FCCB8;
  grid-row: 5/6;
}

.rent-button {
  padding: 20px;
  text-align: center;
  background: #B8E6B8;
  grid-row: 6/7;
}

.article1 {
  background: #e6174b;
  grid-row: 16/21;
  grid-column: 4/11;
}

.article2 {
  background: #8FCCB8;
  grid-row: 16/21;
  grid-column: 11/18;
}

.article3 {
  background: #B8E6B8;
  grid-row: 16/21;
  grid-column: 18/21;
}
<div class="main">
  <div class="main-bar">
    <div class="main-info">
      <img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
      <div class="header-title">High Quality Real Estate Assistance</div>
    </div>
  </div>
  <div class="side-bar">
    <!--<img src="img/logo.png" alt="">-->
    <div class="home-button">
      Home
    </div>
    <div class="buy-button">
      Buy
    </div>
    <div class="sell-button">
      Sell
    </div>
    <div class="rent-button">
      Rent
    </div>
  </div>
  <div class="article1">
  </div>
  <div class="article2">
  </div>
  <div class="article3">
  </div>
</div>

The image with the class business is causing the issue where the item with the class header-title gets pushed down. The header-title should be contained within main-info, but the presence of 'business' causes it to move down!

htmlcsscss-grid

Answer №1

The problem at hand is related to the overflow of your image with the business class, exceeding both its own grid boundaries and those of its container.

To solve this issue, you should include the property overflow: hidden in both the .main-info class and the .business class.

Additionally, these classes must have the "display: grid" property so that the browser can interpret the grid-column and grid-row properties correctly for them.

Once these adjustments are implemented, you can fine-tune the grid-row and grid-column values for the .business class and the .header-title classes to achieve your desired layout.

Complete CSS and HTML provided below:

body {
  padding: 0;
  margin: 0;
}

.main {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-bar {
  grid-row: 1/16;
  grid-column: 4/21;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}

.main-info {
  grid-column: 1/21;
  grid-row: 1/21;
  background: #333;
  display: grid;
  grid-template: repeat(20, 1fr) / repeat(20, 1fr);
  overflow: hidden;
}

.header-title {
  grid-column: 3;
  grid-row: 2/8;
  background: #000;
  display: grid;
}

.business {
  grid-column: 17;
  overflow: hidden;
  display: grid;
}

.side-bar {
  background: #fff;
  grid-row: 1/21;
  grid-column: 1/4;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  border-right: 1px solid #0F6B99;
}

.side-bar img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -24px;
}

.home-button {
  padding: 20px;
  text-align: center;
  background: #0F6B99;
  grid-row: 3/4;
}

.buy-button {
  padding: 20px;
  text-align: center;
  background: #59B3B3;
  grid-row: 4/5;
}

.sell-button {
  padding: 20px;
  text-align: center;
  background: #8FCCB8;
  grid-row: 5/6;
}

.rent-button {
  padding: 20px;
  text-align: center;
  background: #B8E6B8;
  grid-row: 6/7;
}

.article1 {
  background: #e6174b;
  grid-row: 16/21;
  grid-column: 4/11;
}

.article2 {
  background: #8FCCB8;
  grid-row: 16/21;
  grid-column: 11/18;
}

.article3 {
  background: #B8E6B8;
  grid-row: 16/21;
  grid-column: 18/21;
}
<div class="main">
  <div class="main-bar">
    <div class="main-info">
      <img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
      <div class="header-title">High Quality Realstate Asistance</div>
    </div>
  </div>
  <div class="side-bar">
    <!--<img src="img/logo.png" alt="">-->
    <div class="home-button">
      Home
    </div>
    <div class="buy-button">
      Buy
    </div>
    <div class="sell-button">
      Sell
    </div>
    <div class="rent-button">
      Rent
    </div>
  </div>
  <div class="article1">
  </div>
  <div class="article2">
  </div>
  <div class="article3">
  </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

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Issue Description: I am facing an issue on the order page where I need to link the "Continue" button to a booking page. After reaching the booking page, I expect users to be able to navigate between the two pages seamlessly even when they use the browser& ...

javascripthtml

Using Jquery to loop through various select options within a designated container div

I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...

javascriptjqueryhtmlloops

JavaScript strangeness

I am currently working on a dynamic page loaded with ajax. Here is the code that the ' $.get' jQuery function calls (located in an external HTML page): <script type="text/javascript"> $(function() { $('button').sb_animateBut ...

javascriptjqueryhtmlajax

Align two spans within a div using the margin auto property

I often find myself struggling with the basics, it seems like I can't figure this out. I want the two spans to be centered within the div with auto margins... https://jsfiddle.net/5k4pnmf7/ <div class='foo'> <span class='bar& ...

htmlcss

Issues with click events in the navigation menu

How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...

javascriptjqueryhtmlcssmenu

Hover over the image to reveal sliding text

I am attempting to incorporate a CSS3 hover effect into my images, where hovering over an image will cause some text to slide up on a white background. However, I have encountered issues with conflicting code, as I also have overlay text and a 'new&ap ...

htmlcss

Filtering data from Arduino using web serial communication

My setup consists of an Arduino kit connected to a webserial API that sends data to an HTML div identified by the id 'target'. Currently, all the data is being logged into one stream despite having multiple dials and switches on the Arduino. Th ...

javascripthtmlarduino

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

The uniform height of flex columns was spoiled by a child element with a display setting of flex

CSS: * { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; background-color: #F5F5F5; } body > header { display: flex; position: fixed; width: 100%; height: 60px; align-items: center; background-color: #373737 ...

htmlcssflexbox

Ways to conceal a dynamically generated div upon page load?

I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...

javascriptjqueryhtmlcss

What is the best way to incorporate two range sliders on a single webpage?

I recently started using rangeslider.js on my webpage. I wanted to convert two input fields into range sliders, so I began by converting one successfully. Initially, the HTML code looked like this: <div class="rangeslider-wrap"> <input type=" ...

javascriptjqueryhtmlresponsiverangeslider

Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

I am attempting to design two panels in Bootstrap with centered text and different fonts. Similar to the layout shown in the image below https://i.sstatic.net/aVGwV.png Here is my code: <div class="row"> <div class="col-lg-6&q ...

cssbootstrap-4

How to use jQuery to extract a particular text from an anchor tag

If I want to choose a specific anchor text and make changes to it, I can do so by targeting anchors with a certain href attribute. For example, on a page with multiple unordered lists, each containing different links: <ul> <li><a href="v ...

javascriptjqueryhtml

Saving user-generated inputs within a React.js component's state, focusing on securely handling passwords

Curious about forms in React.js? I don't have any issues, but I'm wondering if there are potential flaws in my approach. I've set up a basic form with two inputs for email and password: <input type="email" name="email" value= ...

javascripthtmlreactjs

The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

htmlcss

What steps can I take to embed a video in HTML without autoplaying in a browser?

I have a simple but important question that I need help with. I am creating a compilation of family videos and I want to put them all on one page or in an HTML file. However, when I embed/link a directory file of the video into the HTML, it automatically ...

html

Content located on the right-hand side of the menu

I am currently working on a vertical navigation menu design, but I am facing some issues with aligning the text to start from the very left edge of the element. HTML <div class="jobs-links"> <ul> <li><a href="renovations. ...

htmlcsstextnavigationalignment

How can I display different divs based on a selected option?

I'm encountering difficulties while attempting to develop the code for this specific task. My goal is to display or hide divs based on the selection made in a select option, with a total of 4 options available. There are 2 select elements <select ...

javascriptjqueryhtmlcss

Ways to disable the ability to close a bootstrap modal by pressing the backspace key

How can I enable the backspace button in a Bootstrap Modal form for textboxes and textareas? $('body').keydown(function (e) { if ($('#myModal').is(':visible')) { if (e.keyCode == 8) { retu ...

javascriptjquerycsstwitter-bootstrap

Crushing jQuery's Sortable/Droppable

Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...

javascriptjquerycssjquery-pluginsjquery-ui-sortable