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>
Related
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.
I need to vertically align with CSS multiple elements inside my header.
At the moment, I am using this structure:
-Header
-Content div (This only set my width to 940 with paddings of 10px each side)
-Element 1 (Height: Known, 50px)
-Element 2 (Height: Unknown, bigger fonts)
-Element 3 (Height: Unknown, smaller fonts)
So I need to vertically align to the middle (50% of my header - size of the element) all of my elements and I need to make it cross-browser compatible...
I've found some suggestion by searching such as using a floater div, however I had a hard time trying to align all of my elements since they are not all of the same size...
EDIT
As requested, here is my HTML and CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/mediadevis.css" />
</head>
<body>
<header>
<div class="content">
<div id="logo"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Nos services</li>
<li>Notre compagnie</li>
<li>Nous joindre</li>
</ul>
</nav>
<div id="lang">English</div>
</div>
</header>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #336699;
}
header{
background-image:url('../IMG/bg_top.png');
height: 90px;
}
nav > ul{
float: left;
list-style-type:none;
margin:0;
margin-left: 10px;
padding:0;
color: #ffffff;
}
nav > ul > li{
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 10px;
}
.content{
margin: auto;
width: 940px;
padding-right: 10px;
padding-left: 10px;
}
#lang{
float: left;
}
#logo{
background-image:url('../IMG/logo.png');
height: 50px;
width: 180px;
float: left;
}
Try these suggestions from Smashing Magazine:
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
Specifically, try this code, using the TOP, LEFT, RIGHT, and BOTTOM properties to position your elements:
HTML
<div class="magix">
magix!
</div>
<div class="more-magix">
More Magix!
</div>
CSS
.magix{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
.more-magix {
background: blue;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 500px;
right: 0;
width: 100px;
}
OR, check out Chris Coiyer's methods:
http://css-tricks.com/centering-in-the-unknown/
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.
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 ;)