Div elements shifted to the right instead of appearing on a new line

Running into a formatting issue while working on my personal website. New elements are not starting on a new line but rather to the right of a div containing a picture gallery.

A visual representation can be seen in this screenshot... https://i.sstatic.net/edLFf.jpg

I want the circled elements below the gallery div as shown in the code snippet below:

<!-- Gallery Code -->
<div id="gallerydiv">
        <div class="gallery">
            ......
        </div>

        <div class="gallery">
            ......
        </div>
        .
        .
        .
</div>

<!-- App functionality explanation -->
<p>Essentially, this app stores tickets in text files inside the working directory. By using tags similar to HTML, the individual tickets can be pulled and stored.</p>
<br height="500px">
<h2>Advanced Youtube Search</h2>

Additionally, here's the CSS styling for the gallery:

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  height: 190px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

#gallerydiv {
    width: 1000px;
    margin: auto;
}

I've attempted utilizing line breaks and setting the gallery width to 100% among other things, but have yet to resolve the issue.

htmlcss

Answer №1

Make sure to apply the same styles to both the <p> and <h2> elements that were previously misaligned. Here's an example in HTML:

<div class="unknown">
    <p>The functionality of this application involves storing tickets in text files within the working directory. By using tags similar to HTML, individual tickets can be retrieved and saved.</p>
    <br height="500px">
    <h2>Advanced Youtube Search</h2>
</div>

CSS:

div.unknown {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 180px;
      height: 190px;
}

Applying these styles should resolve the issue...

Answer №2

To ensure your next div appears on a new line, add the clearfix class to your current div.

    div.gallery {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
        height: 190px;
        border: 5px solid red;
    }

    div.gallery:hover {
        border: 1px solid #777;
    }

    div.gallery img {
        width: 100%;
        height: auto;
    }

    div.desc {
        padding: 15px;
        text-align: center;
    }

    #gallerydiv {
        width: 1000px;
        margin: auto;
    }
    
    div.clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    
    div.mydiv {
        width: 1000px;
        margin: auto;
    }
    <div id="gallerydiv"  class="clearfix">
         ... (content continues as provided in original text) ...
    </div>

    <div class="mydiv">
        <p>Essentially how this app works is by storing the tickets in text files inside the working directory. Then by using tags similar to HTML the individual tickets can be pulled and stored.</p>
        <br height="500px">
        <h2>Advanced Youtube Search</h2>
    </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

Steps for implementing target='_blank' on a <Link> tag with more than just an <a> element inside

I'm facing an issue where I need to open a new browser tab and redirect to a specific URL when a button is clicked. The problem arises when using an element other than an anchor tag inside the Next's <Link> element, as it seems to ignore th ...

javascripthtmlreactjsnext.jshyperlink

Issue with CSS styling not being reflected in JSF application

I am currently diving into the world of JSF and facing an issue with moving my inline styles to a CSS file. Despite my efforts, I can't seem to get it to work as expected. Below is the code snippet for reference. The location of my XHTML file is as f ...

cssjsf

The CSS Image Gallery refuses to be centered

.imageContainer{ width: 100%; margin: 0 auto; position: relative; text-align: center; } .imageContainer img{ width: 250px; height: 250px; float: left; } .imageContainer img:hover{ opacity: 0.60; } I am having trouble gett ...

csscenter

Identify the XML variable within the XSL file and confirm its existence by responding with a res

I am facing issues with the Xpath expression test="$roles/roles/role='HOBSCS1GB'" . Is there anyone who can assist me in resolving this problem? Thank you. <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl ...

htmlxmlxsltxpath

Tips for maintaining the button color when clicking and refreshing the page

By default, the color of my like button is gray. When a user clicks the like button, it will trigger the togglepost "like" function and the color will change to red. I am using AJAX to insert the data when the like button is clicked. If the user clicks the ...

javascriptphpjqueryhtmlcss

Adjust the visibility of a different element when it is set to display none using jQuery

I am looking to modify the visibility property of a different element when a specific element has its display set to none. if ($("#first-layer").css('display') === 'none') { $("#second-layer").removeAttr("visibility"); } #second-la ...

jqueryhtmlcsshiddendisplay

Animating UL/LI elements using the power of CSS3 transformations

I am interested in creating animations using CSS3 transitions. Let's consider the following UL/LI element: <ul> <li class="green" id="green" style="display: none;">Contents 1</li> <li class="red" id="red" style="display: ...

javascriptjqueryhtmlcss

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

I am working on an HTML page which has a form with various tags such as checkboxes, dropdowns, and more. When a button is clicked, I want to display the same form as plain text in a popup using jQuery dialog. Currently, I have managed to show the form in ...

javascriptjqueryhtmlcssforms

Is it possible to directly add a child in HTML from nodejs?

I'm in the process of developing a chat application that requires users to select a room from a list of available rooms stored in <datalist> options, which are fetched from a SQL table on the server. Within my login.html file, users are prompte ...

javascripthtmlnode.jsformsexpress

parent div with overflowing height

I am working with 2 tabs, each displayed as flex. My goal is to have a scroll bar appear only on the list within #myTabContent if it overflows .main-panel due to the content, rather than having a scroll bar on the entire div. This way, #myTabContent should ...

htmlcssbootstrap-4flexbox

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

Having an issue with my script. It works fine for editing and deleting on the first page, but when I navigate to the next page, those functionalities stop working. Can anyone help me troubleshoot this problem? <script> $(function(){ $(&ap ...

javascriptphphtml

Unable to transfer a value from a CGI script back to an HTML form

When working with an HTML form that has a date field named cdt, I encountered the need to retain the date value when submitting data to an Oracle table through a CGI script. To achieve this, instead of using Javascript code like history.go(-1), I aimed to ...

javascripthtml

The symbols ♥ and ♦ in HTML are displaying as black on Android devices, despite being styled as red in the CSS

In the midst of my card game development using HTML, JS, and CSS on the Meteor platform. To represent the hearts suit, I utilize &hearts; and for diamonds, it's &diams;. The color scheme is crimson with color: #FF0000; in the CSS code. The fon ...

androidhtmlcssfontsmeteor

Identify and target a particular DIV based on the URL for customization

My webpage has a collection of frequently asked questions (FAQs) on a page called faq.html. Here is an example structure: <div id="faq1">...</div> <div id="faq2">...</div> I am looking to create a pulsating or highlighting effect ...

jqueryhtmlcss

Glistening HTML Element along with DT::renderDataTable result$

My website is built using HTML and connected to Shiny through the use of matching IDs in HTML Elements. To display table data on the site, the code snippet below functions properly: server.R output$InfoTable <- renderTable({...}) index.html <div ...

htmlrclassshinydt

Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow fro ...

htmlcss

The WordPress issue of a background image not displaying properly when using both a linear gradient and an image

Code snippet: style="background-image: linear-gradient(151deg,#6a7a8f 9%,#8692A4 30%,#a9b1be 49%, #ced2d9 66%, #f1f0f1 88%),url(<?php echo $page['image']; ?>);" Within the div, only the linear gradient is visible. When I switch the order ...

htmlcsswordpressless

What is the best way to ensure buttons remain on the same line in Vue.js?

In a table, I have three buttons that are placed on top of each other when the data in the row is too long and expands the table. My goal is to keep these three buttons in one line regardless of the content length. <td class="text-xs-right"> <d ...

javascripthtmlvue.jsbuttonvuetify.js

Wave your way to unique text creation with Firefox

Hey there, I've got some text inside a div that's been transformed with rotate(3deg). Strangely enough, in Firefox, the text appears wavy. When I remove the transform property from the div, the waviness disappears. Is there any way for me to keep ...

htmlcssfirefoxtexttransform

"Toggling a switch alters the appearance following the submission of a form

Recently, I incorporated a switch toggle into my form to help filter products. I followed this guide. However, after submitting the form, the page reloads using ajax and the switch toggles back to its initial style before being toggled again. What could be ...

jqueryhtmlcssruby-on-railsajax