I realise this question has been asked multiple times, however all times are irrelevant to my problem. All elements I have used 'position:absolute' on move across the screen as I re-size the browser, meaning all people with a different browser to the one i have designed will see this. It is devastating! I have to use absolute positioning, it lets me stack an image on top of another one which is essential in my site. So how can I fix this and make all elements behave the same? Is there a way to force the browser to be 1366 x 768 (my browser size) as this is the size that the site looks fine on? Thank you very much if you help me.
HTML and CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #cdcdff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */
}
.twoColFixLtHdr #container {
width: 1024px;
background: #f2f2ff;
margin: 0 auto;
text-align: left;
height: 1050px;
}
.twoColFixLtHdr #header {
background: #DDDDDD;
width: 1024px;
height: 200px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp {
margin-top: 3%;
visibility: visible;
z-index: 10000;
text-decoration: none;
color: #000;
}
.twoColFixLtHdr #container #sidebar1 #ptext {
font-family: Calibri;
font-size: 12px;
width: 80%;
line-height: 125%;
margin-left: 8%;
margin-top: 2%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #second-pic {
width: 115px;
height: 170px;
margin-left: 6%;
}
.twoColFixLtHdr #container #header #home1 {
width: 110px;
height: 30px;
position: absolute;
top: 170px;
right: 617px;
z-index: 200;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp {
width: 100%;
height: 100%;
margin-top: 5%;
font-size: 12px;
font-family: Calibri;
color: #000;
text-transform: none;
text-decoration: none;
margin-left: 9%;
}
.twoColFixLtHdr #container #header #about1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 507px;
}
.twoColFixLtHdr #container #header #information1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 397px;
}
.twoColFixLtHdr #container #header #contact1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 287px;
}
.twoColFixLtHdr #container #header #usefullinks1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 177px;
}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 25%;
background: #f2f2ff;
padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp2 {
margin-top: 3%;
margin-bottom: 6%;
color: #000;
}
#bolden {
margin-top: 4%;
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
margin-left: 8%;
}
h1 {
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px;
padding: 0 20px;
}
.twoColFixLtHdr #footer {
padding: 0 0px 0 0px;
background:#DDDDDD;
position: absolute;
width: 1024px;
height: 100px;
top: 1020px;
}
.twoColFixLtHdr #container #mainContent #yourweddingcerelogo {
width: 650px;
height: 49px;
position: absolute;
top: 213px;
left: 503px;
}
.twoColFixLtHdr #container #mainContent #secondlogo {
height: 49px;
width: 650px;
margin-bottom: 4%;
position: absolute;
left: 503px;
top: 650px;
margin-top: 1%;
}
.twoColFixLtHdr #container #mainContent #band {
position: absolute;
width: 130px;
visibility: visible;
left: 27
.%;
top: 200px;
left: 400px;
height: 122
..5%;
height: 1050px;
}
.twoColFixLtHdr #container #mainContent #contenttext {
margin-left: 13.5%;
margin-top: 10%;
width: 80%;
}
.twoColFixLtHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.twoColFixLtHdr #container #mainContent #secondarytext {
margin-left: 10%;
margin-top: 10%;
width: 60%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext2 {
width: 170px;
position: absolute;
right: 43
.%;
font-family: Calibri;
font-weight: bold;
font-size: 14px;
right: 525px;
top: 722px;
}
w {
font-family: Calibri;
font-size: 16px;
font-style: italic;
line-height: 1.6;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #2ndcoltext2 {
font-family: calibri;
font-size: 14px;
font-weight: bold;
position: absolute;
width: 14.2%;
right: 80%;
top: 87.7%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcoltxt {
position: absolute;
right: 200px;
width: 175px;
top: 720px;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolmaintxt {
height: 140px;
width: 320px;
position: absolute;
left: 833px;
top: 820px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext3 {
width: 280px;
margin-left: 3.5%;
margin-top: 0%;
height: 200px;
position: absolute;
right: 538px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolpic {
position: absolute;
height: 95px;
width: 130px;
right: 385px;
clear: both;
top: 723px;
}
.twoColFixLtHdr #container #mainContent #contenttext c {
font-family: Calibri;
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
p {
font-family: Calibri;
font-size: 14px;
font-weight: 500;
}
-->
/*]]>*/
</style><!--[if IE 5]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
</style>
<![endif]-->
</head>
<!-- Main Class Plan -->
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<!--img containing necc header elements -->
<img height="100%" src="BaseImages/MainHeader.png" width="100%" />
<div id="home1">
<!-- hyperlinks following -->
<a href="HomePage.html">
<img height="100%" src="BaseImages/1%20Home%20button.png" width="100%" />
</a>
</div>
<div id="about1">
<a href="AboutBriony.html">
<img height="100%"
src="BaseImages/2%20about%20briony%20button.png"
width="100%" />
</a>
</div>
<div id="information1">
<a href="Information.html">
<img height="100%"
src="BaseImages/3%20Information%20button.png"
width="100%" />
</a>
</div>
<div id="contact1">
<a href="ContactDetails.html">
<img height="100%"
src="BaseImages/4%20contact%20button.png"
width="100%" />
</a>
</div>
<div id="usefullinks1">
<a href="UsefulLinks.html">
<img height="100%"
src="BaseImages/usefullinks1.png"
width="100%" />
</a>
</div>
<!-- end hyperlinks -->
</div>
<!-- end #header -->
<div id="sidebar1">
<img height="30%"
src="BaseImages/label%201%20ceremonies.png"
width="100%" />
<div id="serieshyp">
<!--var of hyperlinks -->
<div id="hyp">
<a href="HomePage.html"
style="text-decoration:none">
Wedding Ceremonies
</a>
</div>
<div id="hyp">
<a href="SameSexWeddingCeremonies.html"
style="text-decoration:none">
Same-Sex Commitment Ceromonies
</a>
</div>
<div id="hyp">
<a href="RenewalofVows.html"
style="text-decoration:none">
Renewal of Vows
</a>
</div>
<div id="hyp">
<a href="CeremonyOptions.html"
style="text-decoration:none">
Ceremony Options
</a>
</div>
<div id="hyp2">
<a href="FrequentlyAskedQuestions.html"
style="text-decoration:none">
Frequently Asked Questions
</a>
<br />
</div>
</div>
<!-- hyp end-->
<img height="30%"
src="BaseImages/label%20extras%20and%20ideas.png"
width="100%" />
<!--uniform label -->
<div id="bolden">
Choosing the Right Celebrant
</div>
<div id="ptext">
When choosing your Celebrant, it’s not all about the money.
it will help if you consider the personality you are looking for, not just the fee.
Choosing a celebrant whose personal style fits in well with the type of ceremony you have in mind is far more important than finding the cheapest price.
The right celebrant can have a hugely positive impact on your wedding
and help make your day go smoothly and happily.
</div>
<div id="bolden">
Poetry
</div>
<div id="ptext">
I have a wide variety of poetry and readings for you to choose from
or you can use special verses which have special meaning to you both.
These can be seamlessly included in your marriage ceremony and often
are a real highlight.
You might like to consider having friends and family members
read one or two poems for you on the day, or I can do it for you.
It’s completely up to you.
<br />
<br />
<br /> <!--find sub for br breaks -->
<br />
<br />
<br />
</div>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<div id="yourweddingcerelogo">
<img height="100%"
src="BaseImages/page%201%20label%20your%20wedding%20ceremony.png"
width="100%" />
</div>
<div id="band">
<!-- change according to page -->
<img height="100%"
src="BaseImages/ElongatedFlower3.png"
width="100%" />
</div>
<div id="contenttext">
<h1>
A Ceremony Designed Especially for You
</h1>
<p>
I believe that you should have exactly what you want on your special day.
</p>
<c>
I understand how much time and effort goes into planning your dream wedding,
so I workwith you to ensure your special day is exactly how you want it.
It means the world to me to help you find the perfect verse,
write the most meaningful vows and put together
a service you will remember for the rest of your lives.
<br />
</c>
<p>
You’re certain to have wonderful ideas and plans for how you would
like your wedding to be, from the cake and flowers, to the head-dresses
for the flower girls, everything has to be considered and plans put
into action to make it work. The Marriage Ceremony should also be considered
as a crucial element in your special day and it too needs
advance planning so that it goes exactly how you want it.
<br />
<br />
Together, we can design a ceremony that fits the style of your wedding
and is all about the two of you. It can be as long or short as you want it.
You can choose the content. Whether modern or traditional, your wedding ceremony
should be as unique as you are and together
we can make one that works perfectly for you both.
<br />
<br />
There are requirements that are integral to the solemnisation
and registration of a marriage and I will ensure that the process
runs smoothly and nothing is overlooked. I’m happy to
explain all of the requirements more fully at our first meeting.
</div>
<div id="secondlogo">
<!-- change according to page -->
<img height="100%"
src="BaseImages/label%20wedding%20client%20testimonials.png"
width="100%" />
</div>
<div id="secondarytext">
<!-- change according to page -->
<div id="second-pic">
<img height="100%"
src="BaseImages/testimonial%20pic%201.png"
width="100%" />
</div>
<div id="secondtext2">
<w>
Thank you so much for making our day so special.
The ceremony you planned for us was perfect!
It fit in with our theme and reflected our individuality perfectly.
</w>
</div>
<div id="nekcolpic">
<img src="BaseImages/testimonial pic 2.png"
alt=""
width="100%"
height="100%" />
</div>
<div id="nekcoltxt">
<w>
Hi Briony,
We can’t thank you enough for the time and
attention to detail you put into our wedding.
</w>
</div>
<div id="nekcolmaintxt">
<w>
Your professionalism was outstanding and helped make our wedding day
run smoothly with everything going off without a hitch.
Thank you for all the different options you gave us.
We ended up with exactly the service we wanted,
even though at the start we had no idea what that was!
</w>
</div>
<div id="secondtext3">
<w>
Thanks for all your time and patience and being there
for us all the way through the process.
It would not have been the same glorious wedding without you.
</w>
</div>
</div>
<!-- end #mainContent -->
</div>
<br class="clearfloat" />
<div id="footer">
<img height="100%"
src="BaseImages/footer.png"
width="100%" />
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>
Elements positioned with position: absolute are positioned relative to the next element up in the hierarchy with position: relative, or the screen if you don't have one (which you don't). The simple fix to your current code is to add position: relative onto your main container element:
#container {
position: relative;
}
This doesn't make your site work completely, but it stops everything moving. I suspect you'll need to reposition your elements once you've done this, but that might be all you need.
As a general point, you should not be designing for a fixed browser size these days. It's a simple fact that people don't have the same size screens, and there are many people accessing sites from mobile devices. If you're not prepared to make your site work on multiple resolutions, then I would recommend starting from some sort of framework such as Bootstrap which will allow you to pick and choose their grid elements to achieve your desired layout, without needing to put much effort in to make the site work on other resolutions.
Related
I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
Here's the code
fiddle
.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px;
}
You need to clear the float. Add clear:both; to the .footer.
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
* {
margin: 0;
}
html,
body {
height: 100%;
}
.footer,
{
height: 140px;
display: block;
}
p {
font-family: HindRegular;
font-size: 13px;
font-weight: normal;
display: block;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.article {
float: left;
font-family: HindRegular;
width: 21%;
padding-right: 4%;
color: #999;
}
.article-right {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 4%;
color: #999;
}
.article-centre {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 2%;
padding-right: 2%;
color: #999;
}
.blurb {
font-family: HindMedium;
font-size: 24px;
padding-bottom: 100px;
color: #999;
}
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width: 100%;
min-height: 100%;
/* equal to footer height */
margin-bottom: -140px;
}
.heading {
font-family: HindMedium;
font-size: 24px;
color: #666;
margin-top: 1em;
}
.copyright {
float: left;
}
.contact {
float: right;
font-family: HindRegular;
color: #999;
}
#container {
width: 100%;
}
#container img {
width: 100%;
}
h8 {
font-family: HindRegular;
color: #999;
padding-right: 5px;
font-style: normal;
}
.footer {
clear: both;
background-color: #FFF;
height: 120px;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
}
a {
border-bottom: 1px solid #219edf;
padding: 0;
margin: 0 0 2px 0;
clear: both;
color: #666;
text-decoration: none;
font-weight: normal;
outline: none;
transition: all .15s ease;
}
.services {
width: 100%;
}
a:hover {
text-decoration: none;
color: #999;
border-bottom: 1px solid #999;
}
#details {
color: #666
}
#header {
color: #999;
}
<div class="about">
<div class="blurb">Stunning Imagery and resourceful imaging
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
</div>
<div class="heading">Architectural Photography
</div>
<p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</p>
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
</div>
<div class="heading"> Aerial Services
</div>
<p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
<p>Registered CAA pilot with commercial flight permissons</p>
<p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
<p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
<p>Agronomy - Crop analysis, multispectral imaging</p>
<p> </p>
</div>
<div class="article-centre">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
</div>
<div class="heading">Verified Views
</div>
<p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
<p>We don't outsource the photography or site survey whole process is in house</p>
<p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
</div>
<div class="article-right">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
</div>
<div class="heading">Rhizome
</div>
<P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
<P>Comming Soon</P>
</div>
<br style="clear: left;" />
</div>
<footer class="footer">
<div class="article"><span id="header">Contact Details</span>
</div>
<div class="article">
<span id="header">Address</span>
<br /><span id="details">Nathaniel McMahon Photography<br />
Maynards Farmhouse<br />
A21, Lamberhurst QTR<br />
Kent<br />
TN3 8AL</span>
</div>
<div class="article-centre">
<span id="header">Mobile</span> <span>+44 (0)7377673765
</span><br/>
<span id="header">Email </span>
nathaniel.mcmahon#gmail.com
</div>
<div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
</div>
</footer>
Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.
min-height: 100%;
margin-bottom: -140px;
Add clear:both; to your footer declaration.
Also change your body style from height to min-height, so that your body can be larger than the browser.
You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.
.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }
With less content, footer is at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/1/
With more content, footer is still at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/3/
If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats:
You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.
https://jsfiddle.net/suefeng/u4coohpp/4/
Also added this to the footer so the email address wouldn't run into the next column:
.footer a[href*="mailto"] {
word-break: break-all;
}
Here's an example of having a fixed footer:
https://jsfiddle.net/suefeng/gv7Lg3e0/1/
.footer {
position: fixed;
bottom: 0;
}
If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.
If you update your footer content like so:
.footer {
background-color: #FFF;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
overflow: hidden;
position: fixed;
left:0;
right:0;
bottom:0;
clear:both;
}
The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.
HTML:
<div class='footer-spacer'></div>
CSS:
.footer-spacer {
height: 160px;
}
Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page.
min-height: 100%;
margin-bottom: -140px;
I try to use stack as a last resort to figuring out my coding problems but I can't find what is wrong with this stupid website. I am building the mobile site for a company right now and I am doing it through 2 separate style sheets so that when a user is on a device smaller than a specified resolution, it uses a different style sheet. I've done all of this no problem.
My problem is that some of the css styling in my external doc is not being applied to the respective elements in the HTML doc. More specifically, none of the ".fb a", ".tw a", and ".in a" are not being applied at all. When I apply them inline in the html document it works but I need it to be in the external style sheet. And I cannot figure out why this is happening. Since the background-image is not being applied, nothing shows up. What is weirder is that other elements of the footer display properly and when I change the styling, it is reflected on the site. Please help!!!
My HTML:
<!-- FOOTER -->
<div class="footwrap">
<div class="footer">
<!-- CONTACT -->
<div class="text">
<!-- LEGALITY -->
<div class="comm">Oblique Drive technology is patents pending. Copyright © 2014. All Rights Reserved. Oblique Drive is a trademark of Callplex, Inc.</div>
</div>
<!-- SOCIAL NETWORKING -->
<div class="sn">
<a href="http://www.facebook.com/obliquedrive">
<div class="fb">
</div>
</a>
<a href="http://www.twitter.com/obliquedrive">
<div class="tw">
</div>
</a>
<a href="http://www.linkedin.com">
<div class="in">
</div>
</a>
</div>
</div>
</div>
And my CSS:
/*Footer*/
.footwrap {
width: 100%;
height: 175px;
background-color: #444;
}
.footer {
width: 90%;
margin: auto;
height: 175px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 420px;
margin: auto;
height: 175px;
font-size: 24px;
margin-top: 20px;
text-align: left;
float: left;
}
.sn {
width: 400px;
float: right;
margin-top: 30px;
margin-right: 50px;
display: block;
}
.fb {
width: 75px;
height: 75px;
display: inline-block;
}
.fb a {
display: block;
width: 100px;
height: 100px;
background-image: url(images/sniconsm.jpg) !important;
background-position: 0px 0px !important;
}
.tw {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.tw a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 150px 0px;
}
.in {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.in a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 75px 0px;
}
.footer .text {
position: relative;
display: inline-block;
margin-left: 50px;
margin-top: 15px;
float: left;
line-height: 170%;
color: #ffffff;
}
Also, here is the page live, with all of the code if it helps:
http://thewolv.es/Oblique%20Drive/mobile
Please just ignore any other problems you see lol
Look a little more closely at your styles. You have .fb a, but the HTML markup is the other way around:
<a href="http://www.facebook.com/obliquedrive">
<div class="fb"></div>
</a>
If you were trying to target the div, you should use a .fb. But really, you might not need those divs at all. Just change your A tag to something like:
Then use the CSS selector that is a.fb (no space between them).
Your A elements are not children of the divs, it's the other way around.. yet your CSS defines the A elements as children.
Ok, I've tried everything. I've floated divs before successfully, and have researched continuously. Would someone please take a look at my code and tell me what wrong? Thank you very much.
I've tried varying the div width, played around with positioning types, and messed with display properties. I can't think of anything else to fix this.
The problem is located at the footer of this site:
http://caprettacbc.com/index2.html
HTML:
<div id="footer">
<div id="footermain">
<div id="f1">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="f2"><h1>Contact</h1>
7553 Estate Ave.<br />
Hudson, Ohio 44236<br /><br />
Office: (330) 425-1553<br />
Mobile: (440) 823-8498<br /><br />
fred#caprettacbc.com
</div>
<div id="f3"><p>Feel free to fill out a contact form to learn more, and recieve a <b>free eBook</b> and <b>free one-hour consultation</b>. Click below to fill one out.</p><br />
<img src="images/Contact_form_button.png" width="180" border="0"/>
</div>
</div>
</div>
CSS:
#footer {
font-family: 'Sintony', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFF;}
#footer #footermain #f1 {
margin: 0px;
float: left;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer #footermain #f2 {
margin: 0px;
float: left;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer #footermain #f3 {
margin: 0px;
float: right;
height: auto;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer #footermain {
height: 400px;
width: 950px;
margin-right: auto;
margin-left: auto;}
The reason this is happening is because something in your #maincontenttext is hidden, but pushing down below, into the footer, causing your floats to sit somewhere else.
This is occurring in #capabilities: if you set overflow: hidden; to it, your footer sits back in the spot you want.
As for why this is happening, it's it bit more messy to answer. There's a float inside #capabilities that is causing this. Setting overflow: hidden; might fix it for the now, but it might also mean breaking something else in the long run (it's a type of clearfix hack, but with fixed width and height, will mean problems if your container gets taller and you have no idea why stuff is getting clipped off.)
You can apply a clearfix to your #capabilities which is probably the safest option, affording #capabilities some extra height if it needs it, and also the footer stays pristine. Search clearfix for more info.
A common clearfix:
#capabilities:after { display: block;
clear: both;
height: 0;
visibility: hidden;
content: ' '; }
This does need to be combined with IE 6- & 7-only code:
IE 7:
#capabilities { min-height: 100%; }
IE 6:
#capabilities { height: 100%; }
I guess that this do the job, if you clear your "empty" line feed into your divs, as far as they can be managed using a css way, using margin or padding :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
#footer {
font-family: 'Sintony', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFF;}
#footer #footermain #f1 {
margin: 0px;
float: left;
height: 300px;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
}
#footer #footermain #f2 {
margin: 0px;
float: left;
height: 300px;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
}
#footer #footermain #f3 {
margin: 0px;
float: right;
height: 300px;
width: 300px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
}
#footer #footermain {
height: 400px;
width: 950px;
margin-right: auto;
margin-left: auto;}
</style>
</head>
<body>
<div id="footer">
<div id="footermain">
<div id="f1">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="f2">
<h1><br />
fred#caprettacbc.com
</h1></div>
<div id="f3">
<p><br />
<img src="images/Contact_form_button.png" width="180" border="0"/> </p>
</div>
</div>
</div>
</body>
</html>
First question ever, I started working on CSS about a month ago due to a job I got, but it seems I have encountered some problems I can't fix (mainly due to my inexperience and that it's someone else's CSS)
I won't beat around the bush so much and explain the problem before showing the code. There are a set of Div's in a form-like setting, but when the text get's too crowded it invades the next Div so, fixing it via CSS and not HTML, any fix on this? From the very problem I can imagine it's something so easy it's silly, but well, yeah.
Edit: I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site.
Here's a pic of how it looks at the moment, I'm sure you will see the problem right away
http://imgur.com/aj8pDaO
Here's the relevant HTML
<html>
<head>
<link href="hue.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="column">
<div class="form">
<div class="form-nivel">
<label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxAddress">Domicilio fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico Monterrey,Nuevo León,México.C.P.XXXXXX</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationExpeditionPlace">Lugar de expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México. </label>
</div>
</div>
</div>
<div class="column secondary">
<!--?xml version="1.0" encoding="UTF-8"?-->
</div>
</body>
</html>
And here's the CSS
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
}
p {
text-align: left;
}
.content {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
float: left;
background: #;
text-align: left;
}
.content label, .content p {
font-size: 16px;
color: #024DA1;
padding-left: 2%;
}
.column {
display: block;
float: left;
width: 48%;
margin-top: 15px;
height: auto;
background:;
}
.secondary {
margin-left: 10px;
}
.clearfix {
clear: both;
margin-bottom: 10px;
}
.form {
display: block;
width: 96%;
height: auto;
background:;
}
.form-nivel {
display: block;
width: 100%;
width: 470px;
min-height: 20px;
margin-bottom: 20px;
position: relative;
}
.form-nivel label {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.
float: left;
To fix this, remove the .form-nivel label rule and add these.
.form-nivel label:nth-child(1) {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
.form-nivel label:nth-child(2) {
width: 160px;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
you can use overflow:hidden to hide the content if it overflows into the next one
The CSS logic for the left labels and the right labels are the same.
First thing you should do is set them apart.
<div class="form-nivel">
<label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
<label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
Notice the added class
Then on your css you would do something like this:
.form-nivel label.leftLabel {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
.form-nivel label.rightLabel {
width: 400px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: left;
}
I made the right labels bigger and aligned them to the left.
Also, you should add:
<meta charset="utf-8">
on the html head. This is to be able to display characters with accents.
Why not simply keep your <label/>s inline? Removing all the unneccessary declarations...
.form-nivel label {
margin-right: 10px;
line-height: 20px;
}
Try adding:
<div class="clearfix"></div>
between each row.
<div class="form-nivel">
<label for="cfdiCreate:organizationRfc">RFC</label>
<label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="clearfix"></div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label>
<label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>
There is div container and 2 divs inside. It should be image(first div) and text near it with chosen distance between them.
alt text http://img24.imageshack.us/img24/1160/2delcontact.png
The code below works fine in Firefox/Chrome/Safari, but it works incorrect in IE7/Opera.
alt text http://img710.imageshack.us/img710/5675/2delcontactie7opera.png
xhtml:
<div id="mainContact">
<div id="contactIcon">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
</div>
<div id="contactField">
<span id="topMailAddress">07897 255 664</span>
</div>
</div>
css:
html, body{ font-family: Tahoma; }
img{ border: 0px; }
#mainContact{
width: 135px;
float: right;
overflow: hidden;
font-family: Trebuchet MS;
}
#contactIcon{
width: 19px;
margin-right: 7px;
float: left;
text-align: right;
}
#phoneImg{
position: relative;
bottom: 14px;
}
#contactField{
float: right;
width: 109px;
text-align: right;
font-size: 1.12em;
color: #454545;
}
#topMailAddress{
position: relative;
width: 109px;
top: 13px;
}
here is this example on server: link text
What can be the reason of this problem?
Try this
HTML
<div id="mainContact">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
<span id="topMailAddress">07897 255 664</span>
</div>
<br class="clear" />
CSS
#mainContact {
width: 200px; // Width of whole element - adjust to always fit number
}
#mainContact #phoneImg,
#mainContact #topMailAddress {
display: block;
float: left;
}
#mainContact #phoneImg {
margin-right: 10px; // Adjust gap between image and text
}
br.clear {
clear: both;
height: 1px;
overflow:hidden;
font-size: 1px; // For IE and the like
}
Have fun ;)