The div seems to be out of place and sitting within another div in a

I'm working on a school project to create a mock website, but I'm facing an issue with my div elements being misaligned and showing up in the wrong place.

Here's how it currently looks: [

Here's how I want it to look (designed with photoshop): [

HTML

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left">
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left">
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

NR on the right is displaying correctly, but LN1 and LN2 are misaligned

CSS

#wrapper {
 margin-top: 20px;
 margin-left: 20px;
 margin-bottom: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-bottom: 600px;
 padding-right: 30px;
 font-family: Roboto-Light;
 min-width: 55%;
 max-width: 55%;
 float: left;
}
#NR {
 margin-right: 20px;
 margin-top: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-right: 30px;
 padding-bottom: 300px;
 font-family: Roboto-Light;
 min-width: 32%;
 float:right;
}
#LN1 {
 font-family: Roboto-Light;
}
#lni1 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
}
#lni2 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
 margin-left: 10px;
}

I've tried adjusting margins and padding for LN1 and LN2, but I want to avoid using position:absolute as I plan to add more divs in a similar format below them.

Any assistance would be greatly appreciated. Thank you!

htmlcss

Answer №1

To ensure proper alignment of the images to the left, it is important to specify a clear float.

#LN1, #Ln2 {
      clear: both;
    }


#wrapper {
 margin-top: 20px;
 margin-left: 20px;
 margin-bottom: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-bottom: 600px;
 padding-right: 30px;
 font-family: Roboto-Light;
 min-width: 55%;
 max-width: 55%;
 float: left;
}
#NR {
 margin-right: 20px;
 margin-top: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-right: 30px;
 padding-bottom: 300px;
 font-family: Roboto-Light;
 min-width: 32%;
 float:right;
}
#LN1 {
 font-family: Roboto-Light;
}
#lni1 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
}
#LN1, #Ln2 {
  clear: both;
}
#lni2 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
 margin-left: 10px;
}
<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left" />
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left" />
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

Answer №2

This is an example of how you can incorporate CSS into your HTML:

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1" class="test">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left">
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2" class="test">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left">
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

If you want to style the elements with the "test" class, you can use this CSS:

.test{display: inline-block; width: 100%;}

Answer №3

Use the code snippet below to address your issue. Simply replace the image:

<!DOCTYPE html>
 <head>
    <style>
    p{
        color:white;
    }
    #wrapper {
     margin-top: 20px;
     margin-left: 20px;
     margin-bottom: 20px;
     background-color: #202020;
     padding-left: 30px;
     padding-top: 1px;
     padding-bottom: 600px;
     padding-right: 30px;
     font-family: Roboto-Light;
     min-width: 55%;
     max-width: 55%;
     float: left;
    }
    #NR {
     margin-right: 20px;
     margin-top: 20px;
     background-color: #202020;
     padding-left: 30px;
     padding-top: 1px;
     padding-right: 30px;
     padding-bottom: 300px;
     font-family: Roboto-Light;
     min-width: 32%;
     float:right;
    }
    #LN1 {
     font-family: Roboto-Light;
    }
    #lni1 {
     width: 20%;
     height: 20%;
     margin-right: 10px;
    }
    #LN1 {
        float:left;
    }
    #lni2 {
     width: 20%;
     height: 20%;
     margin-right: 10px;
    }
    h4{
        color:white;
    }
    #Ln2{
        float:left;
    }
    </style>
</head>
<body>
    <div id="wrapper">
     <font color="BB9B5D"><h3><strong>UPDATE NEWS</strong></h3></font>
     <hr color= "bb9b5d" />

      <div id= "LN1">
       <img src="newimg.jpg" name="lni1" id="lni1" align="left">
       <h4 >New Version 2.0.0</h4>
       <p>Introducing the latest update! Download now and challenge your friends, as well as conquer the new bosses before anyone else. </p>
      </div>

      <div id= "Ln2">
       <img src="newimg.jpg" name="lni2" id="lni2" align="left">
       <h4>Patch Notes 2.0.0</h4>
        <p> Check out the Official Patch Notes for all the details on the new features and challenges awaiting you.</p>
      </div>

    </div>

     <div id= "NR">
      <font color="BB9B5D"><h3><b>UPCOMING RELEASES</b></h3></font>
      <hr color= "bb9b5d" />
     </div>

    </body>
    </html>
</body>

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

Using AJAX in Laravel Blade to bypass the specified div class

As a beginner in AJAX JavaScript, I have been trying to filter data in Laravel 10 without refreshing the page using AJAX, but so far I haven't had much success. Below is the code snippet from my blade view: <script src="https://code.jquery.co ...

javascripthtmlajaxlaravellaravel-blade

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Within a large application, I am managing a micro site and looking to implement tertiary navigation with an active state for pages. This involves inserting a single html blob into multiple pages. My goal is to use an active class to highlight the page in ...

htmlcss

The issue of CSS not being applied to HTML content after being inserted via AJAX has been encountered

I've successfully implemented AJAX to retrieve specific page content from a database, but now I'm facing an issue: When it comes to the 'Contact' page, the form retrieved from the database (as HTML) is not applying the CSS styles I hav ...

phpjavascripthtmlcssajax

Create code with a form button and showcase the produced code on the webpage

I have created two files: code_generator.html, which takes input in the form of an image URL and landing URL. When I click on the submit button, it calls code_created.php. <html> <head> </head> <body> <form a ...

phphtml

Issues with the functionality of the contact form

I have recently purchased a new template that comes with a contact form featuring ajax and validation. I have tried to implement my script, but it doesn't seem to be working. I suspect there might be an issue on the server-side with my script. Can any ...

phphtmlajaxpost

Creating a dynamic video background using Html5 and CSS with a scrolling attachment

video { width: 100%; z-index: 1; position: fixed; } I tested this code and it works well, however, the video remains fixed across the entire body of the page... ...

javascripthtmlcss

It appears that WebClient.DownloadString has a tendency to alter certain aspects of the HTML code retrieved from an external website

I have a website built with ASP.NET (.aspx) that I access from an ASP.NET MVC 4 mobile site (.cshtml) to retrieve its HTML response string. Both sites are hosted on a Windows Server 2008 R2 system and were developed using VS2010 Professional. -When direct ...

asp.nethtmlwebclient

Tips for ensuring math formulas display correctly in CKEditor

I'm currently struggling to properly display the correct format of a math formula in ckeditor. I have made numerous attempts to find a solution, but so far, none have been successful. Here is an excerpt of my code: <html> <head> <scr ...

javascriptjqueryhtmljquery-ui

What is the best way to arrange card-columns in a horizontal order?

My smart-scrolling list of cards uses the card-columns style, but I find it frustrating that they are ordered top to bottom like this: 1 4 7 2 5 8 3 6 9 This vertical ordering becomes impractical when dealing with a large number of items. When I have 50 ...

csstwitter-bootstrapbootstrap-4

Arrange the DIVs in the identical spot and switch them back and forth

I'm struggling with a dilemma involving two DIVs. I am looking to have two DIVs positioned in the exact same spot on the page and toggle between them. When one div disappears, the other should appear using jQuery toggle(). The challenge lies in havi ...

csshtmlpositioning

The PHP/MySQLi registration form is displaying a blank white page without any visible output or error messages

Hey everyone, I'm currently working on a simple registration form in PHP and no matter how many times I try to run it, all I get is a blank white page. There are no errors or outputs, just pure emptiness. I was hoping someone could shed some light on ...

phphtmlmysqlformsmysqli

Creating an HTML button that functions as a link to a specific section on the same page

I am interested in creating an HTML button that functions as a link to an item on the same page. Essentially, when this button is clicked, it should redirect to an item within the same page. Is there a way to achieve this using only HTML, CSS, and JavaScr ...

htmlbuttonhyperlink

Animating SVG from upper left corner to lower right corner

I am looking to create an animation on this SVG that starts from the top left and ends at the bottom right, similar to a gif. You can view the example I want to replicate in the following link: body { background: black } path { fill: white; } /* ...

cssanimationsvgsvg-animate

Persist the current scroll position of a div in local storage using React

Despite the numerous questions I've come across on this topic, none of them align with my approach. Most solutions involve window scrolling, but I have a div containing overflow items that I want to retain the user's scroll position for. My attem ...

htmlreactjsnext.jstailwind-css

PHP - display the modified page with the updates applied

I currently have an HTML page where users can input information and submit a form to change database information. Typically, the submit button calls a PHP file on the server to process the data. However, I am looking for a way for this PHP file to return t ...

phphtml

What steps are involved in setting up a single form for entering orders, complete with both an order table and an order_item table that incorporates a foreign key

As I contemplate the best way to structure my page and forms for a customer ordering process, a few questions arise due to the tables' organization. To adhere to normalization standards, I have separated the order table and the order items table, link ...

pythonhtmlflaskjinja2

The issue with the CSS combination of :after and :hover:after across different HTML elements

Encountering an issue while attempting to create a rollover effect using CSS :after and :hover pseudo-elements. Check out the clock and facebook icons on the right side by visiting: See below for the CSS code: .icon { background: url('. ...

csshoverspritelesspseudo-element

Is the CSS3 bar chart flipped?

I'm currently developing a responsive bar chart, and everything seems to be going smoothly except for one issue - when viewing it in full screen, the bars appear to be flipped upside down. It's quite puzzling as all other elements such as text an ...

htmlcssbar-chart

The navigation bar alignment to the right is malfunctioning

I'm puzzled as to why the navbar-right class is not properly closing out the two navigation bar elements on the right. Despite adding the correct code, it doesn't seem to be working as expected. <nav class="navbar fixed-top navbar-toggleable- ...

csstwitter-bootstrap

refusing to display the pop-up in a separate window

Hi there, I'm having an issue with a link that's supposed to open in a pop-up but is instead opening in a new tab. I'd like it to open in a proper pop-up window. <button class="button button1" onclick=" window.open('te ...

javascripthtmlcss