Showing a div at a precise location

I have designed a webpage, and it resembles the layout shown https://i.sstatic.net/1dUYZ.png

The challenge I'm facing is how to display an image gallery within the highlighted yellow section. No matter what I try, the gallery ends up below the footer. Any suggestions on how to solve this issue would be greatly appreciated.

Below is the code snippet:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index_style.css">
    </head>
    <body>
        <div class="nav">
          ... (Code continues here)

******CSS

body {
     //overflow: hidden;
    background-color: #d0e4fe;
    //additional CSS styles...
}
.nav
{
   // nav CSS rules
}

... (more CSS rules)
htmlcssweb

Answer №1

I have made some adjustments by adding extra div elements to properly position the content. You can view the result on this CodePen link.

Here is the updated HTML structure:

<!-- Your HTML code here -->

And here are the corresponding CSS styles:

<!-- Your CSS code here -->

Answer №2

I have modified the HTML structure for you:

I created a single div with the class "gallery" and placed all images inside that div.

In your original HTML, the images did not have any parent container. By adding a parent container, it will make it easier to move all child elements according to the parent.

Please note: view the result in full screen

<div class="container">
    <div class="extra0"></div>
    <div class="gallery">
        <!---all images--->
    </div>
</div>

Here is the updated CSS code:

... (CSS code goes here) ...

The rest of the content remains unchanged.

Answer №3

I have made some additions to the div and CSS. Here is the link for reference: http://codepen.io/anon/pen/BobQzo

body {
     //overflow: hidden;
    background-color: #d0e4fe;
    //background-image: url("background.jpg");
    font-family: "Book Antiqua",Times New Roman, Georgia, Serif;


}
.nav
{
    border-style: solid;
}
.nav a {
    color: #5a5a5a;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav li {
    display: inline;

}

a:hover {
    color: coral;
}
.pull-left
{

    float:left
}

.sidebar {
    float: left;
    width: 250px;
}
.pull-right
{
    float:right
}

.clear
{
    clear:both;
}
.container
{
    padding-right: 75px;

    margin-right: auto;
    margin-left: auto;
    background-color:#bbb;
}
.gallery {
    
    float: left;
width:80%;
margin-bottom: 40px;
    
}

.extra0{

    background-color: #555;
    width: 250px;
    padding-bottom: 10px;
    margin-top: 5px;
    border-style: solid;
    border-color: #0ca3d2;

}
.cata-head
{
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0px 5px 15px;
    text-transform: uppercase;
    color: activeborder;
    border-style: solid;
    border-bottom-color: #0ca3d2;

    border-left-color:#555;
    border-right-color: #555;
    border-top-color: #555;



}
.cata
{
    color: #b3c0c8;
    list-style-image: url("list.png");
    line-height: 2.333em;

}

.foot
{
    background:#ffab62;
    width:100%;
    height:30px;
    position:fixed;
    bottom:0;
    left:0;
float: left;
    padding-left: 15px;
    padding-bottom: 5px;

}
b
{
    color: firebrick;
}
.extra
{
    width: 250px;
    padding-top: 12px;
    padding-left: 12px;
}

.main
{

   border-style: solid;
   border-color: black;
   display: block;
   width: 250px;
   margin: 10px 10px;

}
div.img {
   
    margin: 10px 10px;
    width: auto;
    border:3px solid #73AD21;
    padding: 10px;
    float: left;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index_style.css">
    </head>
    <body>
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li><a href="#">Home</a></li>

                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="pull-right">
                    <li>Welcome to our Store</li>
                    <li><a href="login_page.html">Login</a></li>
                    <li>or</li>
                    <li><a href="register_page.html">Register</a></li>
                    <li>yourself!</li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
<div class="sidebar">
        <div class="extra0">
            <div class="cata-head">
                Choose a category!
            </div>
            <ul class="cata">

                <li><a href="#">Men's Clothing</a></li>
                <li><a href="#">Men's Accesories</a></li>
                <li><a href="#">Women's Clothing</a></li>
                <li><a href="#">Women's Accesories</a></li>
                <li><a href="#">Baby Products</a></li>
            </ul>
        </div>

        <div class="extra">
            <a href="#"><img src="extra.png"></a>
            <a href="#"><img src="extra1.png"></a>
        </div> 
</div>
<div class="gallery">
        <div class="img">
            <a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
        <!-- Additional gallery images omitted for brevity -->
</div>
        <div class="foot">
            <footer>
                Policies: Terms of use | Security | Privacy | Infringement &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb...sic"">UsamaRehan & AsjadHussaini©</b>
                    ... <!-- Social media icons omitted for brevity -->
            </footer>
        </div>
    </body>
</html>

There are two main divisions in this layout: sidebar and gallery.

Answer №4

To accomplish this effect, consider utilizing position absolute and specifying the top and left values for your div element. .img{ position: absolute; top: 30px; left: 30px; }

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

Creating an .htaccess configuration for managing case-sensitive file names

Today marked the official launch of my new website, but I've encountered some unexpected issues with the .htaccess file. Despite my best efforts to address them prior to going live, it appears that there are still unresolved problems. You can visit t ...

css.htaccess

both modules loading at the same time in AngularJS

var moduleA=angular.module("MyModuleX",[]); moduleA.controller("MyControllerX",function($scope){ $scope.name = "John X"; }); var moduleB=angular.module("MyModuleY",[]); moduleB.controller("MyControllerY", function($scope) { $scope.name = "Sarah Y" ...

htmlangularjs

Having trouble getting the CSS Transform property to be affected by ScrollTop

Hello everyone, I am attempting to create a ball that has a 50% radius and rolls left based on the user's scroll movements. So far, I have successfully made it move left in relation to ScrollTop, but unfortunately, I cannot get the transform property ...

jquerycssjquery-animatecss-animationsscrolltop

I am looking to upload a text file into a Javascript program in order to display the data from the file in a table format

As I venture into the world of programming, a new assignment has come my way. I have been given this txt file: nombre="Mario"; apellido="Atencio"; cedula="8-782-2289"; telefono="233-7867"; correo="<a href="/c ...

javascripthtmlhtml-tabletxt

The Geolocation API popup on Safari for iOS kept appearing repeatedly

I have successfully implemented a code using the HTML5 Geolocation API to retrieve the user's current position within a mobile website. Although the code functions properly, there is an issue with Safari on iOS. Whenever the page is reloaded, a syste ...

javascriptioshtmlsafarimobile-safari

Comparing the efficiency of Jquery draggable with thousands of elements versus updating the elements continuously

Currently, I am developing an application that involves dragging an image using Jquery's draggable utility. The image is accompanied by several overlay divs containing various components positioned based on pixel locations, sometimes reaching into the ...

javascriptjqueryhtmlcssjquery-ui

How to center a div horizontally within another div using CSS

I'm attempting to center a block element horizontally on my webpage. Here's an illustration of what I'm aiming for: I can't use fixed div dimensions as the design needs to be responsive. Click here for the demo. Below is the HTML co ...

htmlcssalignment

Alpha Screen and Shading Filter

Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...

cssinternet-explorer-8gradientalpha

An unexpected background image appearing from an external CSS file

I need to dynamically change the background image of a class using an external CSS file. The image should be randomly selected from a specified path. While I know how to achieve this in PHP, I am looking to implement it in the external CSS file instead. ...

htmlcss

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

How can I make CSS/HTML tables display inline until they are wider than the parent div?

Is there a way to position two tables next to each other until one table grows wider than the set minimum width, and then have the second table appear below the first, with both tables centered within their parent <div>? This is the current setup: ...

htmlcsshtml-tablecenter

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

I am working on a project that involves two text boxes and a drop-down menu for providing rates. The values in the text boxes are given as inches. I want these inputs to be taken as values, rounded up to the next even number, and then set as variables. How ...

javascripthtml

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

javascripthtmlcssbutton

Is there a way to automatically send users to a different PHP file once they click "submit"?

I need to redirect to a different php file named index2.php. The username and password values are already set as follows: Username=sid, Password=yeaoklogin. When the user clicks on the Login button, they should be redirected to a page called index2.php. ...

javascriptphphtml

Storing button HTML in a variable with the help of jQuery

Looking for a way to store dynamically created button content in a variable using jQuery. <button id="test">Update now</button> This could include text or image data between the button tags, like icon images and text. The storage process sho ...

javascriptjqueryhtml

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

javascriptjqueryhtmlcssmodal-dialog

Unable to connect CSS/JS files to the HTML page

I followed a tutorial to set up my project which can be found here: However, when I run the gulp file, the CSS/JS files are not being linked. I have applied a background color to the body but it is not showing up. I installed Bootstrap 4 using npm and ad ...

javascriptcssnpmbootstrap-4sass

Safeguard your HTML, PHP, and image files from being monitored

What methods can be used to safeguard your files, such as PHP and image files, from being tracked by tools like TeleportPRO and HTTrack? Your time is greatly appreciated. Thank you! ...

phphtmlimage

Drop Down Automation with Selenium IDE

Currently in the process of automating a User Acceptance Testing (UAT) for a software project at my company. I've completed all the typical tasks like recording actions and clicking on buttons, but ran into an issue with a drop-down menu. The problem ...

javascriptjqueryhtmlseleniumselenium-ide

Is it possible to display a variety of color schemes in just one console.log()?

My task involves working with an array of hexadecimal values, "colors": ["#d5dd90","#e6bb45","#ef9770"] To log these out in different colors, I used the following method: colors.forEach((value)=>{ console.log(& ...

javascriptcssconsolestylingconsole.log