ensuring the footer is correctly aligned

   <div id="footer">
    <div class="row">
        <div class="span5">
            <img src="../goyal/webdesign.jpg" class="verisign-image"></div> 
                I am a  
                <select style="width:10%;" class="dropup">
                      <option value="select">--select--</option>
                      <option value="Business">Business</option>
                      <option value="Indivisual">Individual</option>
                </select>

                <button class="btn dropdown-toggle btn-Warning" style="margin-top:-1%;">Go!
                </button>   

                <div class="span5" style="float:right;">
                <div class="footer-feedback">
                    <p class="left">Add & claim your business link|
                        <a href="">link1</a>|
                        <a href="">link2</a>
                    </p>
                    <span class="footer-feedback">
                        <h5>Feedback</h5>
                    </span>
                </div>
            </div><!--span5 --> 
        </div><!--span5 -->
    </div><!-- row -->
</div>

css:

div#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#eee;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
span.footer-feedback{

color:#fff;
float:right;
width:80px;
height:100%;
background:green;
}
 p.left {
    text-align:left;
    float:left;
}

 p.right {

    float:right;
    text-align:right;
}

I require precise alignment in my footer. For instance, the feedback should be displayed in the middle of the green area. On the left side of the green area, I want the text "Add & claim your business link| link2 | link3." In the center, I would like "I am a", select options, and a Go button in orange color. Additionally, the footer must remain fixed.

Answer №1

Click on this link

HTML Markup

<div id="footer">
        <div class="row">
            <div class="span5"><img src="../goyal/webdesign.jpg" class="verisign-image"></div> 
            <div class="orange">
                I am a  
                <select class="dropup">
                    <option value="select">--select--</option>
                    <option value="Business">Business</option>
                    <option value="Individual">Individual</option>
                </select>

                <button class="btn dropdown-toggle btn-Warning" style="margin-top:-1%;">Go!</button>   
            </div> 
            <p class="left">Add & claim your business link|
                <a href="">link1</a>|
                <a href="">link2</a>
            </p>
            <div class="span5" style="float:right;">
                <div class="footer-feedback">

                    <span class="footer-feedback">
                        <h5>Feedback</h5>
                    </span>
                </div>
            </div><!--span5 --> 
        </div><!--span5 -->
    </div>

CSS Styles

div#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   /*height:30px;*/
   width:100%;
   background:#eee;
   text-align:center;
   padding:5px 0;
}
select.dropup {
width:200px;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
span.footer-feedback{
color:#fff;
float:right;
width:80px;
height:100%;
background:green;
text-align:center;
}
 p.left {
display:inline-block;
}

 p.right {

float:right;
text-align:right;
}
.orange {
/*background-color:#ff9a2e;
overflow:hidden;
height:100%;*/
float:left;
width:auto;
}

Answer №2

Simply Update Your CSS Like This

div#footer {
   position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background: #eee;
}

Just delete the 'height' property from the 'dif#footer' selector.

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

Extracting information from a checkbox list displayed within an HTML table

I have a table with multiple rows and two columns in each row. The first column contains text, and the second column consists of checkboxes. While I was able to retrieve the values from the first column, I am struggling to fetch the values of the selected ...

Transform the JavaScript object received from an AJAX request into HTML code

Here is an example of what the result (data) looks like: <tr> <td> Something... </td> </tr> <div id="paging">1, 2, 3... </div> This is using ajax to retrieve data. ... dataType: "html", success: function( ...

Convert JSON to HTML tooltip content - hide brackets and include <br> tags

I am currently working with a JSON object in my JAVA code. I am trying to display the values of the object using the following HTML and AngularJS syntax: <uib-progress ng-if="month.data" data-toggle="tooltip" title="{{month.dataTest|json}}"> < ...

ReactJS Navbar component experiencing CSS hover bug

While developing a navbar component in React, I encountered an unexpected issue - the hover effect on my navigation links suddenly stopped working. Strangely enough, the cursor: pointer functionality still operates on my logo but not on the nav links durin ...

Is the background color extending the entire width of the page?

Hey there, I'm currently trying to determine how to set the background-color on a paragraph or h1 so that it only appears behind the words and not across the entire page with blank space. I'm still a beginner when it comes to coding. I'm wor ...

Pressing a button within an HTML table to retrieve the corresponding value in that row

How can I click a button inside an HTML table, get the value on the same row and pass it to an input field called FullName? Thanks for your help! <td><?php echo $r['signatoryname'] ?></td> <td ...

Top ways to avoid default on anchor tags: best practices for preventing this issue

Previously, excluding the criticism for not using unobtrusive JS, I typically employed anchors with inline onclick attributes for AJAX loading in the following format: <a href="http://example.com/some/specific/link.php?hello=mum" class="menu" id="m ...

Developing my React application with Material UI. The fonts I've implemented don't appear consistent on Mac operating systems

Why does the font change in Mac and iOS platforms, and how can I ensure consistency across all devices? Here is an excerpt from my index.css file: body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto&apos ...

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

I have been working on testing this code snippet in Firefox 49.0 on Linux Mint: a{ font-size:50px; color:gray; font-weight:1000; transition:color 1s; } a:hover{ color:black; } a:visited{ color:lightgray; } <a href="">VISITED LINK</a>&l ...

Blurry text in Webkit browser after applying css transform (translate)

Having an issue with webkit transform. If I don't use -webkit-backface-visibility:hidden ... I notice flickering on many objects when I translate (e.g. -webkit-transform: translate(80%,0)) an object and If I do use -webkit-backface-visibility:hi ...

Eliminate gaps between items when using the flex-wrap:wrap attribute

Check out my code on Plunker. Is there a way to eliminate the vertical spacing when using flex-wrap: wrap; #main { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; } <div id="main"> < ...

Issue with hidden event callback not functioning properly in Bootstrap 3 popover

After studying this example, I attempted to incorporate a hidden callback function. While the show callback is functioning perfectly, the hidden callback seems to be ineffective. Can someone shed light on why this issue is occurring? To showcase the probl ...

The feature in Chrome that automatically reloads generated CSS is failing to refresh the page after SASS recompiles the CSS

I'm attempting to set up Chrome's DevTools to automatically reload a page when I save changes to a watched SCSS file that compiles and updates the CSS file. Although I have checked the Auto-reload generated CSS option, it is unfortunately not fu ...

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

Controlling the position of a <div> element using JavaScript

Is there a way to adjust the position and size of a <div>? I have already set it to float with this CSS code: div.grid_tooltip { position: absolute; left: 0px; top: 0px; } ...

My JavaScript functions are not compliant with the HTML5 required tag

I am currently developing input fields using javascript/jQuery, but I am facing an issue with the required attribute not functioning as expected. The form keeps submitting without displaying any message about the unfilled input field. I also use Bootstrap ...

Grails is experiencing a surge of duplicate events being triggered simultaneously

In my _test.gsp layout, I have a 'click event' that is triggered when the layout is rendered as shown below. <div id="testid"> <g:render template="test"/> </div> When I click on the event in the _test.gsp layout, it trigge ...

Transferring a parameter from link_to to a popup window in a Rails application

I am facing an issue with passing an object to my modal in Rails. The object has a table of results with an attribute "email", but I seem unable to pass it so that I can use it within my modal. index.html.erb <div class="modal fade bs-example-modal-lg ...

Adjusting image alignment and formatting long text with CSS in Firefox

I'm attempting to float an image and text within a paragraph, but encountering an issue when the text is long and in one line. The display appears fine in Chrome, but not in Mozilla Firefox. You can view the problem here: In Chrome, it looks like thi ...

The `forEach` method cannot be called on an undefined node.js

I have been developing a small study website but encountered an issue with the title. Despite extensive internet research, I have not been able to find a solution. The system I am using is Ubuntu with node.js, express, and mysql. app.js var fs = requir ...