Need assistance! My footer isn't showing up properly at the bottom even after applying clear:both. Can someone help please?
If anyone can provide guidance, it would be greatly appreciated.
Thanks for all your help in resolving the issue.
Need assistance! My footer isn't showing up properly at the bottom even after applying clear:both. Can someone help please?
If anyone can provide guidance, it would be greatly appreciated.
Thanks for all your help in resolving the issue.
In order to achieve a clear:both effect for your footer, it is necessary for the parent element to float the elements. However, this does not apply in your current situation.
The most effective solution would be to implement a clearfix.
Simply copy and paste the provided code into your CSS file, and then assign the class "cf" to your div element.
Your code structure should resemble the following:
<div class="cf">
<div id="smallpics" class="...">...</div>
<div id="smallpics" class="...">...</div>
<div id="smallpics" class="...">...</div>
</div>
I hope this information proves to be helpful!
By utilizing the footer, I was able to achieve this:
<!DOCTYPE html>
<html>
<head>
<base href="http://www.vellosdesigns.com/newsite/build-2/" />
<style>
html, body {height: 100%;margin: 0;background:#000;}
h1{color:#787979;}
#wrapper {min-height:100%;margin: 0 auto -75px;}
#header {min-width:100%;height:150px;float:left}
#headerContent {width:1112px;margin:0 auto;}
#separator, #footer {height:180px;}
#content {margin:0 auto;width:1112px;padding:15px;}
#footer {min-width:100%;float:left;color:#fff;background-color:#7f7f7f}
#footerContent {margin: 0 auto;width:1112px;padding:10px 0px;}
.address {color:#787979; text-align:right; font-size:12px; float:right; line-height:190%;}
#gallery {background:#FFF; height:450px;}
#navcontainer {float:right; margin-top:15px;}
#navlist li { display: inline; list-style-type: none; }
#navlist li a:link {text-decoration:none; color:#787979; font-size:12px; margin-left:25px;}
.smallpics {width:545px; height:180px; float:left; margin-top:40px;}
.s-pic-b,.s-pic-d {margin-left:20px;}
.s-pic-c,.s-pic-d {padding-top:50px;}
div.fadehover {position: relative; }
img.a {position: absolute; left: 0;top: 0; z-index: 10; }
img.b {position: absolute; left: 0;top: 0; }
</style>
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerContent">
<p><span class="address">Whetstone - 020-8888-8888 <br />Kensington - 020-8888-8888</span></p>
<img src="logo.png" />
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Bespoke</a></li>
<li><a href="#">Contemporary</a></li>
<li><a href="#">Achitecture & Interiors</a></li>
<li><a href="#">Management & Build</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div id="content">
<div id="gallery"></div>
<div class="smallpics s-pic-a">
<h1>Bespoke</h1>
<div class="fadehover">
<a href=""><img src="a-bw.png" alt="" class="a" /><img src="a-color.png" alt="" class="b" /></a>
</div>
</div>
<div class="smallpics s-pic-b">
<h1>Contemporary</h1>
<div class="fadehover">
<a href=""><img src="b-bw.png" alt="" class="a" /><img src="b-color.png" alt="" class="b" /></a>
</div>
</div>
<div class="smallpics s-pic-c">
<h1>Achitecture & Interiors</h1>
<div class="fadehover">
<a href=""><img src="c-bw.png" alt="" class="a" /><img src="c-color.png" alt="" class="b" /></a>
</div>
</div>
<div class="smallpics s-pic-d">
<h1>Management & Build </h1>
<div class="fadehover">
<a href=""><img src="d-bw.png" alt="" class="a" /><img src="d-color.png" alt="" class="b" /></a>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id="separator"></div>
</div>
<div id="footer">
<div id="footerContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
</body>
</html>
I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap? Unfortunately, I'm still having t ...
I'm attempting to achieve an effect where the fill color of the "insticon" SVG changes from black to white based on the scroll position indicated in the jQuery code. I have made the necessary modifications in the if and else statements, but unlike "he ...
I am attempting to create a simple div where I want px-5 for mobile screens and px-20 for larger screens. However, only px-5 is working and px-20 is not applying on large screens. Can someone help me understand why? Code Output Image <div class=" ...
After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: Is there a way to remove ...
Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...
Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...
When working with Vue.js, I encountered an issue where elements would briefly flash curly braces to the user before being hidden. To combat this problem, I implemented the following solution: HTML: <div class="main hide-me" id="my-vue-element"> ...
As I ventured into creating a business theme with stripes, akin to the one developed by W3Schools and accessible here, I encountered a particular challenge. The layout consisted of horizontal sections with varying background colors. My main concern was th ...
Recently, I encountered a strange issue with font rendering on Chrome/Opera compared to Firefox. The problem can be seen in the preview below - pay attention to the pink text. It appears blurry initially but sharpens once text input is focused. This same i ...
This issue seems to only occur in mobile mode, where the blueviolet line is coming from the background color. https://i.stack.imgur.com/VBhIp.png link to the image body { background-color: blueviolet; } header, main, footer { background-color: #ff ...
Unique Context In my webpage, I have a specific div element with the CSS property of overflow: auto. Within this scrolling div, there is structured content like this: <h3>Group A</h3> <ul> <li>Item 1</li> <li>I ...
I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...
I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...
I'm interested in creating a button <Button id="Button" text="Hey" />. I would like to know how I can position it on a webpage exactly where I want it, rather than it just appearing randomly without content. ...
I'm currently experimenting with creating a vertical text-align: justify effect between divs. I am working with a structure that includes 4 div elements inside a td, like this: <td> <div></div> <div></div> <div ...
UPDATE: Including an image for better visualization: [![Check out the image link][1]][1] To understand more clearly, refer to this fiddle: https://jsfiddle.net/c7jazc9z/2/ Currently, I have a list with items aligned to the left. The goal is to center th ...
I created a script to hide specific table rows as follows: $('.ms-formtable nobr:contains("Question")').closest('tr').hide(); However, I'm unsure if there is a way to achieve the same result using only CSS. Can anyone provide adv ...
This particular code functions correctly on the Firefox and Chrome browsers. However, there seems to be an issue with IE and Opera, where the 'OR' text is only visible within a 2px height area. hr { height: 2px; border: 0; background-color ...
After testing my simple web page in various browsers, I discovered that it only showed a blank white page in Internet Explorer. I combed through my CSS code and identified background = rgba(some stuff) as the unsupported line by IE. However, this particula ...
I am working on a mega menu that is set to display in the usual direction. However, for the last two items, I would like them to appear from the button upwards. I'm not quite sure how to explain it. What I envision is something similar to this: ...