Is there a way to design a two-column footer using only divs and no tables?
The dimensions of the footer are set at 980px and it needs to include...
Copyright 2010 xyz.com (to be placed on the left side)
About us | privacy | terms (to be placed on the right side)
Here is one way you could achieve the desired layout:
CSS:
.Footer-outer {
width: 980px;
border: 1px solid black;
}
.Footer-inner-left {
width: 49%;
float: left;
display: inline;
}
.Footer-inner-right {
width: 49%;
float: right;
display: inline;
}
HTML:
<div class="Footer-outer">
<div class="Footer-inner-left">Copyright 2020 example.com</div>
<div class="Footer-inner-right">About | Contact | Privacy Policy</div>
</div>
Here is some CSS to style your footer:
#footerLeft { width: 47%; float: left; display: block; margin-right: 50px;}
#footerRight { width: 47%; float: right; display: block; height: 50px; }
#footer { width: 100%; height: 100% width: 980px; }
Add this HTML code:
<div id="footer">
<div id="footerLeft">Copyright 2022 example.com </div>
<div id="footerRight">Contact Us | FAQ | Policies </div>
</div>
For more styling options, consider using the Blueprint CSS Framework. It can simplify your design process.
Style Sheet:
#footer { overflow:hidden; width:980px; margin:0 auto; }
#footer #copy { float:left; display:inline; width:490px; }
#footer #links { float:right; display:inline; width:490px; }
Markup Language:
<div id="footer"><div id="copy">copyr..</div><div id="links">blah</div></div>
I'm completely new to the world of development, so I'll do my best to phrase this question correctly! Last month, I successfully created my first web application using RoR and Bootstrap for some visual enhancements. Currently, I am working on a ...
Is there a way to show a loading image while waiting for a JavaScript function to finish? <script type="text/javascript"> function create() { //Perform operation } </script> I am looking for a solution to display a loading image until ...
Is there a way to implement a menu button that, when clicked, reveals a menu with blurred content in the background? And when clicked again, the content returns to normal? Here's the current HTML structure: <div class="menu"> <div class=" ...
Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...
I've encountered an issue with a select element in my HTML page that has a custom arrow. The problem is that the text within the select element overlaps with the arrow, which is not desired. I'm seeking a cross-browser solution for this specific ...
I've been working with jQuery Mobile to create some pages and wanted to add a "back to top" element. It's been functioning well, but I've encountered an issue. When I navigate from one page, let's say #sport, back to #restaurants after ...
When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...
I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...
I am currently working on a 2 columns layout within 2 divs that have different margins set. In the left column, I have integrated a bootstrap datetimepicker and summernote. While the datetimepicker dialog overflows outside the internal div, I am wondering ...
Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...
Is there a way to align three divs horizontally, evenly spaced, in a manner that positions the rightmost element at the center of the page? ...
My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...
I am currently working on a responsive layout where the header and footer should each take up around 5% of the screen space and remain fixed. The middle section should scroll based on the number of elements within it. Despite using the fr and % values, the ...
Is there a way to prevent the input field from jumping out of alignment when an option is selected in these q-select inputs? I want to fix this issue so that the field remains in line with the horizontal alignment. https://codepen.io/kiggs1881/pen/RwENYEX ...
Currently working on a project that is about to begin, seeking advice and suggestions for available options. The main objective is allowing users to draw shapes like polygons while the server performs calculations based on various properties of these shap ...
I need assistance with aligning three boxes next to each other, each containing an image, header, and text. The issue arises when resizing the browser, causing the content in box 2 and 3 to be positioned higher than box 1. Below is the code I have been us ...
There seems to be a difference in margin between <button> elements when rendered by React compared to plain HTML. Plain HTML adds a small margin between the buttons, while React removes it completely. Does anyone have an explanation for this discrep ...
I've been working on creating a chatbot widget for my website, but I've run into an issue. The "Chat with us" button only shows the bot and not the close button as well. Here's what I've attempted: <input id="chat" type="button" on ...
I am attempting to resize an element by dragging, similar to this example. I have created a simple directive for this purpose: @Directive({ selector: '[drag-resize]' }) export class DragResizeDirective { private dragging: boolean; const ...
I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...