I'm having a weird issue in Firefox that I can't seem to fix. In both Chrome and Safari my float: left and float: right columns are working properly and in the right position, but when I view it in Firefox it's wayyyy messed up. My bottom header is in the section above it, and my columns are overlapping! I've been searching around but can't really find any concrete solutions to floating differences in Firefox -- can someone take a look at my code and tell me what's going on? Or does someone have any facts about Firefox floats that I'm not aware of? Thank you!
Here is my JsFiddle with my code in it. The floaters seem to be okay in Firefox for the JsFiddle.. just not on my page. Ugh, I'll keep looking but I'm pretty sure it's an issue with the floats.. Removing them made everything align nicely on Firefox. At least the left column.
Here's the relevant float css:
.fourtextleft {
font-family: Roboto;
text-decoration: none;
text-transform: none;
font-weight: 300;
font-size: .5em;
color: #666;
float: left;
width: 38%;
height: auto;
text-align: justify;
margin: 0% 5% 2% 0%;
padding: 4% 2% 3.5% 0%;
vertical-align: middle;
}
.fourtextright {
font-family: Roboto;
text-decoration: none;
text-transform: none;
font-weight: 300;
font-size: 1em;
color: #666;
float: right;
width: 30%;
height: auto;
text-align: justify;
margin: 3% 15% 2% 0%;
padding: 4% 0% 3.5% 2%;
vertical-align: middle;
}
.floaters {
clear: both;
}
Thank you for any help you may provide!
ஃ Shanling
Without the issue being replicable it's hard to say what it is. However, just by reading the issue and from personal experiences I would say try adding clear: both to the fourth CSS class (your header). Additionally, it may not be necessary to float your second list to the right. Instead, set the margins once your first list is floating left.
Again, it's hard to say for sure if the issue can't be replicated. Just making educated guesses at this point. If you do find a way to replicate it, definitely bring it on back!
I finally found the issue and it was a negative margin in one of the sections above the problem section. Seems that firefox doesn't like negative margins very much.. Thanks for the help guys :-)
Seem like IE should have had the problem not firefox, but hey if it works it works right?
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I had the same problem with a layout of divs and I resolved my problem adding a white border to the divs using css, my sample code:
<head>
<title>Sample Layout</title>
<style type="text/css">
.divToLeft
{
width: 49.5%;
float: left;
}
.divToRight
{
width: 49.5%;
float: right;
}
.divToCenter
{
width: auto;
float: none;
**border-color: #FFF;
border-width: 1px;
border-style: solid;**
}
</style>
</head>
<body>
<div id="pnlMainHolder" style="width: 100%">
<div id="Rep0" class="divToCenter">
Rep0
</div>
<div id="pnlLeft" class="divToLeft">
<div id="Rep1" class="divToCenter">
rep1
</div>
<br />
<div id="Rep3" class="divToCenter">
rep3
</div>
<br />
<div id="Rep5" class="divToCenter">
rep5
</div>
<br />
<div id="Rep7" class="divToCenter">
rep7
</div>
</div>
<div id="pnlRight" class="divToRight">
<div id="Rep2" class="divToCenter">
rep2
</div>
<br />
<div id="Rep4" class="divToCenter">
rep4
</div>
<br />
<div id="Rep6" class="divToCenter">
rep6
</div>
<br />
<div id="Rep8" class="divToCenter">
rep8
</div>
</div>
<div id="Rep9" class="divToCenter">
rep9
</div>
</div>
</body>
I hope this help!
add clear:both for container and div's, it will solve your problem
.fourtextleft, .fourtextright, .floaters {
clear: both;
}
Related
I'm using twitter bootstrap for my css and the following code has an issue with the alignment:
see jsfiddle here: http://jsfiddle.net/graphicsxp/99rhF/ (make sure you enlarge the html view)
<div class="view-header">
<span class="view-title">Recherche de mandats</span>
<div class="pull-right">
<a style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
<span class="pointer">more options</span>
</a>
<form class="form-inline pull-left" placeholder="N° de contrat, nom/numéro de client" css-class="input-xxlarge">
<input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model">
<button disabled="disabled" class="btn btn-info" type="submit"><i class="icon-search"></i> Rechercher</button>
</form>
</div>
<div class="clearfix"></div>
<div class="pull-right">
</div>
<div class="clearfix"></div>
</div>
as you can see the button with the label 'Rechercher' is too far right. What am I doing wrong ?
There is nothing wrong with your button, its the containing element.
Update the css with:
.view-header {
background-color: #F5F5F5;
border-bottom: 1px solid #BBBBBB;
margin-bottom: 20px;
padding: 10px 20px;
}
Removing width: 100%; Div's are block line elements, meaning they will fill their parent. This should solve your problem.
See:
http://jsfiddle.net/99rhF/2/
The parent element has a width of 100%, but padding isn't included in width calculations, so it ends up being 100% + 40px. You fix this by wrapping the contents in a container, and padding that instead.
http://jsfiddle.net/ndTuL/
.view-header {
background-color: #f5f5f5;
width: 100%;
margin-bottom: 20px;
border-bottom: solid 1px #bbbbbb;
}
.content-wrap {
padding: 10px 20px 10px 20px;
}
First of all, I know I'm late to the party :)
Second - #Jamie Hutber has a very good and valid answer. No arguments here at all - it should remain the accepted answer for sure.
Third - Here's what I ran in to, and how I fixed it:
HTML:
<!DOCTYPE html>
<html>
<head>
<?php echo $str->head; ?>
</head>
<body>
<footer>
© Copyright 2021-$currentYear | All Rights Reserved | No Unauthorized Use Permitted | JPeG Web Development
</footer>
</body>
</html>
<footer> is also a Block Line Element, so width is not needed. Here's what I did instead:
CSS
body {
background-color: #f8f3ed;
max-width: 1200px;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
footer {
display: flex;
flex-direction: row;
height: 1.5rem;
font-size: 1rem;
position: absolute;
bottom: 0px;
right: 0px;
overflow: hidden;
max-width: 1200px;
padding: 5px;
}
Things to note is that the position: absolute; will mess up any text-direction and make it overflow, especially if you try and add a width: 100% to it. The right and bottom stick it on the bottom right corner no matter how much you scroll.
It's not exactly what the question was asking, but I thought it might be nice for people to see some alternate ways to have this issue, and resolve it.
I'm trying to make one large DIV that floats to the left of my content and then use additional DIVs that are rows beside the content.
How would I do that and be sure that each "row" div is actually a row, but still respect the larger DIV on the left (the first few should not pop down below it).
I duplicated the problem on jsFiddle here:
http://jsfiddle.net/Dracorat/Xf9Qv/1/
CSS:
.DropCapImage {
border: 2px solid purple;
color: #EEE;
display: block;
width: 200px;
height: 300px;
float: left;
margin: 0 10px 10px 0;
}
.DialogAction {
padding: 10px;
font-style: italic;
float: left;
clear: right;
}
.DialogLine {
float: left;
clear: right
}
.DialogWho {
font-weight: bold;
float: left;
width: 100px;
}
.DialogWhat {
float: left;
white-space: pre-wrap;
font-family: 'consolas', monospace;
}
HTML:
<div class="DropCapImage">Pretty Image Here</div>
<div class="DialogLine">
<div class="DialogWho">KING CLAUDIUS</div>
<div class="DialogWhat">Short Text</div>
</div>
<div class="DialogAction">Exeunt all but HAMLET</div>
<div class="DialogAction">Something Else</div>
<div class="DialogAction">Another Else</div>
<div class="DialogLine">
<div class="DialogWho">HAMLET</div>
<div class="DialogWhat">O, that this too too solid flesh would melt
Thaw and resolve itself into a dew!
Or that the Everlasting had not fix'd
His canon 'gainst self-slaughter! O God! God!
How weary, stale, flat and unprofitable,
Seem to me all the uses of this world!
Fie on't! ah fie! 'tis an unweeded garden,
That grows to seed; things rank and gross in nature
Possess it merely. That it should come to this!
But two months dead: nay, not so much, not two:
So excellent a king; that was, to this,
Hyperion to a satyr; so loving to my mother
That he might not beteem the winds of heaven
Visit her face too roughly. Heaven and earth!
Must I remember? why, she would hang on him,
... etc</div>
</div>
<div class="DialogLine">
<div class="DialogWho">Speaker Below</div>
<div class="DialogWhat">This should be below the purple area
</div>
As you can see, the floating is totally bogus with small divs.
Do not float the .DialogLine and .DialogAction elements
Just give them the correct margin-left (equal to the width of the left column)
And do not forget to give overflow:hidden to them as well so the will expand to fit their contents..
.DialogAction {
padding: 50px;
font-style: italic;
margin-left:210px;
}
.DialogLine {
margin-left:210px;
overflow:hidden;
}
Demo at http://jsfiddle.net/gaby/Xf9Qv/4/
I have the following HTML code where the subnav div is a collection of div tags that will act as tabs across the featuredexhibit div. Problem is that there is a white space adding between the top of the featureexhibit div and bottom of the subnav tab.
HTML:
<div id="subnav">
<div id="subnavtab">Plan Your Visit</div>
<div id="subnavtab">Tour the Museum</div>
<div id="subnavtab">Program & Events</div>
<div id="subnavtab">Membership</div>
<div id="subnavtab">Donate</div>
</div>
<div id="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
CSS:
#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }
I have tried using the Chrome Developer Tools to find the issue but I do not have any luck or I do not know what to look for.
There doesn't seem to be any problem with your code.
Are you sure no other CSS is conflicting? Make sure the CSS tags you are using are from the last CSS added in the HTML.
For example,
<link rel="stylesheet" type="text/css" href="css-1.css">
<link rel="stylesheet" type="text/css" href="css-2.css">
If there are common tags in "css-2.css", then it will over ride any similar tags of "css-1.css"
You should give a float to the subnav and then clear the featuredexhibit and then only it couldn't save a space between them.
#subnav{float: left;}
#featuredexhibit{clear: both;}
See this Demo
I'm honestly not sure why the white space is there, but I got it fixed in Chrome by removing the inline-block and creating a clear both.
CSS
.subnav { margin-top: 20px; width: 740px; }
.featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
.subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; }
.clear { clear: both; }
HTML
<div class="subnav">
<div class="subnavtab">Plan Your Visit</div>
<div class="subnavtab">Tour the Museum</div>
<div class="subnavtab">Program & Events</div>
<div class="subnavtab">Membership</div>
<div class="subnavtab">Donate</div>
<div class="clear"></div>
</div>
<div class="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
jsFiddle: http://jsfiddle.net/vFFx5/
I know this is old, but since I just ran into this issue I might as well point future visitors to this article: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
The problem seems to be that a new line counts as white space character in a row of inline-block elements. To solve this use floated blocks or flexbox.
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.
this is my first post here on StackOverflow and I'm quite excited about it since Google has brought me here quite often in the search of comprehensive answers.
Anyways, my question is quite simple but I can't seem to figure it out. I am trying to align three small icons on the same line but to the right of my page/post title. The post heading code looks like this:
<div class="post-heading">
<h1>Title</h1>
</div>
The 3 icons need to have their own ID in order to function properly. They are inserted like this:
`#icon_container {
position: relative;
margin: 0;
padding: 0;
line-height: normal;
font-size: medium;
width: 50px;}
`#icon_container #icon_1 {
float: right;
background-image: url(icon.png);
background-repeat: no-repeat;}`
`#icon_container #icon_1 A {
width: 24px;
height: 24px;
display: block;}`
So all I am trying to achieve here is to have the h1 title to the left, and on the same alignmnet to the right the 3 icons inserted with the above CSS. Can anyone help me out? I'd appreciate it a lot :)
Thanks all
EDIT
I forgot to mention the HTML code for the icons; here it is:
<div id="icon_container"><div id="icon_1"></div><div id="icon_2....</div><div style="clear:both"></div></div>
The h1 and the images needs to have the
style="display:inline"
if you want the images to have the same horizontal alignment.
you need to float post-heading and the icon elements to the left.
<div class="post-heading" > < h1 >Title < /h1 > < /div>
<div id='icon_container'>
<div id='icon_1'></div>
<div id='icon_2'></div>
</div>
#icon_container, #icon_1, #icon_2, .post_heading {float:left;}
Try floating your #post-heading h1 to the left:
#post-heading h1 {
float: left;
}
You have two options.
Fist one is
<div class="post-heading">
<h1>Title</h1>
<span class="icon_container"> [icon] </span>
</div>
.post-heading *{
display:inline;
}
Example
2nd is
.post_heading h1{float:left;}
Example