css problem with footer in html5

Check out this code snippet for the footer section:

<footer>
         <div class="footer">
            <nav>
               <ul class="nav-list1">
                  <li><img src="img/notes.png" alt="img"></li>
                  <li>ARTICLES</li>
                  <li>BLOG</li>
                  <li>COLUMN</li>
                  <li>TOPICS</li>
               </ul>
               <ul class="nav-list2">
                  <li>ABOUT</li>
                  <li>AUTHOURS</li>
                  <li>MASTHEAD</li>
                  <li>CONTRIBUTE</li>
                  <li>STYLEGUIDE</li>
                  <li>CONTACT</li>
                  <li>SPONSORSHIPS</li>
               </ul>
            </nav>
            <hr class="hr-style" />
           <section class="clearfix footerWidth">
               <div class="footer-column1">
                  <img src="img/footer1.png" class="footer-image" alt="dot"/> 
                  <p class="footer-title">.NET Training</p>
                  <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
                  <p><a class="footer-link" href="#">ask here. ></a></p> 
               </div>
               <div class="footer-column2">
                  <img src="img/footer2.png" class="footer-image" alt="expert"/> 
                  <p class="footer-title">Shopify Expert at $20 / hour</p>
                  <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
                  <p><a class="footer-link" href="#">click to view</a></p>
               </div>
            </section>
            <hr class="hr-style" />
            <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
         </div>
      </footer>

Here is a link to my JSfiddle containing the code snippet:

http://jsfiddle.net/d0teo50p/7/

The content on the right side of the footer section on my page is not displaying correctly. Can anyone assist me in fixing this issue?

Answer №1

To adjust the layout, set the width of div.footer to 960px and add style="float:left;" to

div.footer-column2 > p.footer-title
. Additionally, remove the width:110%; from p.footer-pgf.

For a live demonstration, check out the interactive DEMO

HTML

Updated HTML code here...

CSS

Updated CSS code here...

Image:

Image placeholder

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

Connection to external sources has been deactivated

I am experiencing an issue on my website at . When attempting to click on a link, it seems to be disabled. I suspect this is due to the presence of two images at the end of the navigation bar. Removing these images causes the navigation bar to fall apart, ...

Tips on effectively showing padding and margins in django templates and minimizing empty space between rows using bootstrap

Still fairly new to the world of html, Django, and Bootstrap. I find myself struggling with grasping the concept of padding and margins. Is there a clever trick or CSS technique to visually display the padding and margins? I've noticed that margins do ...

Exploring the potential of Python loops within Selenium capabilities

My latest project involves scraping data from a search page. Specifically, I need to extract the title, price, and link for each of the 25 results on the page. To achieve this, I'm working with Xpath and utilizing an incremental div number associated ...

Why is my CSS not recognizing the animation I specified for it to play?

I can't seem to get the simple animation I added to my code working properly. <div class="phone-center"> <div class="phone"> </div> </div> .phone-center { display: flex; justify-content: ce ...

An example of using quotes within quotes is an HTML tag embedded within JavaScript code

Currently, I'm working on a JavaScript code where clicking assigns the function getImage the source of an image to be displayed later on the page. The issue I'm facing revolves around dealing with quotation marks. <img src="bill.jpg" class=" ...

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure: <ul id="fruits"> <li><a href="#">Mango</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Grape</a>& ...

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

Ways to automatically update a page once the form response is received

After scouring various websites, I still haven't found a solution to my issue. What I need help with is how to refresh a page once a successful deletion message is received for a specific row. My admin2.php page displays information about the admin fr ...

Is it necessary to convert an HTMLCollection or a Nodelist into an Array in order to create an array of nodes?

Here we go again with the beginner guy. I'm working on this exercise from a book called "Eloquent JavaScript". The goal is to create a function similar to "getElementByTagName". However, the first function below is not returning anything and the secon ...

Javascript's second element does not trigger a click event with similar behavior

I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popu ...

What is the process for editing or importing CSS within a React project?

I'm a beginner in React and I am encountering an issue with CSS not loading properly. I followed the tutorial for importing it, but it seems like there might be a better way to do it now as the tutorial is outdated. Below is my code, I would appreciat ...

Where could one possibly find the destination of the mysterious <circle>?

I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself. This is the cur ...

What is the process for integrating a personalized font into the <head> section of the ConvertTo-HTML?

I created a script to generate an HTML file containing information about the services on a computer, along with some additional styling. $a = "<style>" $a = $a + "BODY{background-color:peachpuff;}" $a = $a + "TABLE{border-width: 1px;border-style: so ...

A method to extract the value of an array by referencing the primary key value

To create a unique name for my extra text field, I am utilizing the primary key of the room_extras table. For example: <tr> <td><?php echo $extrasInfo['description'] ?></td> <td> <input type="tex ...

Turn off hover effect for MUI DataGrid

I'm having trouble figuring out how to disable the hover effect on a row in the MUI Datagrid. I've searched through the API documentation but couldn't find a straightforward solution. Any suggestions on how to achieve this? <DataGrid ...

Updating hyperlinks from dynamic php links to stable static links

I have a script that predominantly uses absolute addressing, but now I need to switch to relative addressing. The problem I'm encountering is when trying to change the links in PHP from: <link href="<?php print $theme; ?>style.css" type="tex ...

What is the best way to bring a single object from Django into an HTML template?

Currently, I am working on a Django website project that involves two models: Gifi (which contains .gif images) and Categorite. My goal is to navigate to another HTML template with specific image information when a .gif image is clicked. Although I have ma ...

Cannot assign border to an undefined element - JavaScript

Currently, I am attempting to validate some code using javascript. However, I am encountering a frustrating issue where I keep getting an "Uncaught TypeError: Cannot set property 'border' of undefined". Being relatively new to javascript, I ...

Hover delay effect using Tailwind CSS

I'm facing an issue where text appears when someone hovers over a group, causing a dizzy feeling due to auto formatting during resize. I'd like to delay the text from showing up until the resize is complete. Is there a way to achieve this without ...

Get rid of angular comments in an HTML document

Is it feasible to eliminate or deactivate the HTML comments generated by Angular? <ol class="items"> <!-- ngRepeat: item in list | orderBy:'time':true --> </ol> This is disrupting CSS rules that utilize the :empty pseudo c ...