Bootstrap image with absolute positioning overlapping columns

I'm facing an issue with absolute positioning of images in Bootstrap. When the screen size decreases, the second column is supposed to move below the first column but instead, it overlaps the image. Here's my current code:

  <div class="row">
    <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
      <div id="imgdiv">
        <img id="ximage" src="css/images/x-ray-lat-left.png" width="578" height="715" border="0"/>
        <img id="emptygif" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" width="578" height="715" usemap="#location-map" border="0"/> 
        <img id="overlayr1">&nbsp;</img>  
        <img id="overlayr2">&nbsp;</img>
        <img id="overlayr3">&nbsp;</img>
        <map name="location-map" id="location-map" border="0">
          <area id="r1" shape="rect" coords="250,250,340,370" href="#" alt="Hilum"/>
          <area id="r2" shape="rect" coords="90,150,340,500" href="#" alt="Heart"/>          
          <area id="r3" shape="rect" coords="130,120,460,530" href="#" alt="Right Lung"/>
        </map>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-10 col-xs-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Information</h3>
        </div>
        <div id="imgdesc" class="panel-body">
          Description of the image
        </div>
      </div>
    </div>

The images in the first column are positioned like this:

#ximage{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    background-repeat: no-repeat;
    z-index:0;
}

For md, sm, and xs screen sizes, the second column should be below the first one, but due to the absolute positioning, it overlaps them.

Any suggestions on how I can resolve this?

htmlcsstwitter-bootstrapoverlapping

Answer №1

This method is not considered the most optimal.

DEMO Check out this demonstration here!

To improve, you can include a helper class (and hide it on larger columns):

.h20 {
    height: 20px;   
}

Utilize it as a separator in the following way:

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-xs-12">
            <div id="imgdiv">
                <img id="ximage" src="css/images/x-ray-lat-left.png" width="578" height="715" border="0"/>
                <img id="emptygif" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" width="578" height="715" usemap="#location-map" border="0"/> 
                <map name="location-map" id="location-map" border="0">
                    <area id="r1" shape="rect" coords="250,250,340,370" href="#" alt="Hilum"/>
                    <area id="r2" shape="rect" coords="90,150,340,500" href="#" alt="Heart"/>          
                    <area id="r3" shape="rect" coords="130,120,460,530" href="#" alt="Right Lung"/>
                </map>
            </div>
        </div>
        <div class="col-lg-4 col-sm-12 col-xs-10">
            <div class="h20 hidden-lg bg-warning"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Information</h3>
                </div>
                <div id="imgdesc" class="panel-body">
                    Description of the image
                </div>
            </div>
        </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

Tips for setting up a grid where boxes have a consistent width but varying heights to maximize space utilization

Seeking design inspiration from Pinterest, where fixed width columns are used but each grid item fills all available space with varying heights. Check out this example: https://i.sstatic.net/i2WDo.jpg Initially considered using flexbox for this layout, b ...

gui-designhtmlcss

"Adaptable design that seamlessly adjusts to all types of content

I am currently faced with the task of developing a highly adaptable layout for a content management system, one that adjusts automatically based on the content provided. The initial layout is set to a minimum width of 1024px and is functional in most cases ...

htmlcsslayout

When attempting to access the submenu in Bootstrap 5 dropdown, it does not slide down as expected upon clicking

Why isn't the rest of the menu expanding downward when I select a submenu? The submenu is already selected, but it hides other items. How can I make it expand downwards? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcssdrop-down-menubootstrap-5

Creating dynamic animations for your elements with AJAX

How can I apply animation to an element as soon as it appears? I want others with the same properties to remain unaffected. Here is my approach: $.each(data, function(i, obj) { if(obj['Ping'] == "FALSE"){ ...

javascripthtmlajax

Is there a way to ensure that all my "+" buttons are aligned vertically?

I am currently working on a Frequently Asked Questions section for a project I am developing. My goal is to compile a list of common questions that potential buyers may have. I envision a setup where, upon clicking the + button next to the question, a new ...

css

Material UI allows for the creation of numbered lists with ease. This

<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...

javascriptcssreactjsmaterial-ui

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...

htmlcss

Tips for positioning a mat-form-field beside an h1 tag

I've been attempting to place an h1 next to a mat-form-field from Angular Material, but I'm encountering some difficulties. Here's what I've attempted so far: <div class="mat-elevation-z8"> <mat-form-field> <mat-l ...

htmlcssangularangular-material

Positioning a DIV in the center within Bootstrap columns

I have been attempting to solve the challenge of vertically aligning content within my bootstrap grid. Within my 3 col-md-4 columns, I am looking to center another div along with text inside each of them. This is the current appearance: https://i.sstati ...

htmlcssbootstrap-4centervertical-alignment

Modifying the Header Background Color

Looking for help on my forum at The header background on my site needs fixing. I am trying to change the entire header background to match the color of the logo background, but I'm unsure what codes need to be adjusted. Can anyone provide guidance? ...

htmlcss

What is the best way to input an HTML element into AngularJS code?

I am looking to integrate the html element into my angularjs code. Within my HTML, I have elements such as data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" that I need to access withi ...

javascriptjqueryhtmlangularjs

Calculating the time difference between the current datetime and a value retrieved from

I am having trouble calculating the difference between the current date and a date stored in my database. My goal is to display an expiry date message if the difference is 30 days. Here is the code snippet I currently have: var timeDifference = DateTime.N ...

c#.netasp.nethtml

Simultaneously scrolling left and fading in with jQuery

I've come across this code that works well in scrolling my divs to the left. However, I'm looking to add a fading effect while they are scrolling. Is there a way to achieve this? $('div#line1').delay(1000).show("slide", { direction: "r ...

jquerycssjquery-ui

Enhanced spacing of characters in website text

Currently working on a client's website, I find myself once again being asked by my boss (who is the designer) to increase letter-spacing in the text for aesthetic reasons. However, I strongly believe that this practice can actually lead to eye strain ...

htmlcss

Refreshing the AngularJS application by re-rendering the view without the need for a full reload

I am currently working on an application that heavily utilizes the ng-include directive, and one thing I cannot stand is having to reload the entire application just to see a simple HTML update. I have experimented with manually replaying the XHR in the N ...

javascripthtmlangularjsajaxxmlhttprequest

How do you toggle the visibility of a dependent <select> in an HTML form?

In my HTML jQuery form, I need to display a second select box based on the user's selection in the first select box. Should I use .show() to reveal a previously hidden div or should I use .append() to populate an empty select element? In other words, ...

javascriptjqueryhtmlforms

Tips for creating animated images with a mask or clip using HTML, CSS, and jQuery

I am attempting to animate the movement of an image under a stationary mask. I have 2 methods for achieving this: one using the mask property and the other using clip First method using Mask : View working script at http://jsfiddle.net/2Aecz/ or below & ...

jqueryhtmlcssanimationhtml5-canvas

Generate a line chart adorned with dots and customized labels utilizing a pair of distinct data sets

Is there a way to enhance my line graph with labeled dots using two separate data sets, one of which is from an API? For reference, I would like the graph to resemble the sample image linked here: https://i.sstatic.net/yUcWw.jpg Here are the details of th ...

javascripthtmld3.jsgraphcharts

Show special characters with accents within an SVG element on a webpage written in HTML

I'm having trouble with accented characters (like á, é, etc) not displaying in my SVG object on an HTML page. Here's how the page is declared: <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8 ...

htmlsvgcharacter-encoding

Is this loader going through a triple loop?

<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-repeat: no-repeat; background: url('images/page-loader.gif'); } </style> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascripthtmlcsstwitter-bootstrap-3