I've got a little div that contains a next/previous button and a Page # out of #. Trouble is, it only shows up in Firefox, not Chrome. It uses Foundation 4's button code and Jekyll's paginator code to create the setup.
You can see it at the bottom right of the page, just above the footer at tx0rx0.com
Chromium on my laptop shows nothing, but the code is there in the page source viewer. What gives?
The .pagination div's container has floated elements but is not cleared.
Since the container is the last element inside #wrap, it is affected by this class which cuts off the floated .pagination :
#wrap > *:last-child {
padding-bottom: 6.25em;
}
You can fix this by changing the padding-bottom to margin-bottom, or apply a clear-fix to the div containing the floated .pagination element.
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
You have this going on:
#wrap {
margin: 0 auto -6.25em;
}
And the bottom margin of that container is set to -6.25em. You also have this going on:
#wrap > *:last-child {
padding-bottom: 6.25em;
}
Which is effectively selecting the last child div of #wrap to have a padding-bottom of 6.25em. The intention here looks to be that those two would cancel each other out; that is not what's happening though, because the styles are applied to different block elements that are in the normal document flow. So your pager is hidden because of a negative margin.
I'm not sure what your intention is here. The simple fix, unless there's some reason this can't be done, is:
#wrap {
margin: 0 auto;
}
And wipe out this:
#wrap > *:last-child {
padding-bottom: 6.25em;
}
Related
I recently stumbled upon this example of using text with a limited width and a height equal to, or greater than, the containing HTML page. It all looked good until I checked the source...
There were two wrappers(!) for the content. I realized that if I tried to change the padding of the inner wrapper, the <h1> inside both of them suddenly broke free and pushed both of them downward.
Is there any better workaround for this padding issue? With no padding, margins behave unpredictably. There's no way I know of to subvert this... not even overflow:auto would work without requiring another wrapper to keep the page's content from becoming its own narrow scrollable area.
Edit: Here is a fiddle with a couple potential solutions.
Solution 1: Requires an extra wrapper, which in turn requires its own extra padding. (Attempting to add padding into the <body> results in a bit of a mess.)
Solution 2: Requires an enumeration of all the possible elements that could cause the content to balloon out: h1-h6, ul, ol, etc...
The problem is that h1 has some top-margin, which collapses to .wrapper.
You can avoid that inserting a pseudoelement between the top of .wrapper and the h1:
.wrapper:before{
content: '';
display: table;
}
Alternatively, you can also try display: inline-block (note it could produce additional space because of line-height), or display: block; height: 1px.
html,body {
margin:0; padding:0; height:100%
}
html {
background-color: gray;
}
body {
background-color: white;
font-family: verdana, arial;
max-width: 300px;
height: 100%;
margin:0 auto;
}
.wrapper:before{
content: '';
display: table;
}
<div class="wrapper">
<h1>README</h1>
The top margin of the word README extends above the content of this text.
</div>
I have a div and I want to keep an image on the right of it.
The problem is that the div is not expanding to fit the image. I gave the div a background to check that.
This is the jsfiddle http://jsfiddle.net/BJ7YZ/
very simple code
What I have tried
I checked this question
and I tried to do the same. I gave the div .header class a clear class, which is:
.clear{
clear: both;
}
and I gave the div that contains the image, which is .logo_container this fix:
.logo_container:after, .logo_container::before {
clear: both;
}
none of them has worked. I know the problem is because I didn't set a height to the .header, but I need to not set the height.
One way of taking care of this problem is as follows:
.header{
width: 100%;
background-color: red;
position: relative;
overflow: auto;
}
Adding overflow: auto creates a new block formatting context and the floated child elements are confined within the edges of the parent container.
See: http://jsfiddle.net/audetwebdesign/zptjb/
You need to clear the container itself. The easiest way today is to use this lovely, simple, clearfix "hack". See updated fiddle
http://jsfiddle.net/BJ7YZ/2/
and
http://nicolasgallagher.com/micro-clearfix-hack/
.header:before,
.header:after {
content: " ";
display: table;
}
.header:after {
clear: both;
}
Have you tried giving display: inline-block; to your header class? It seems to do the trick. I can see the red background by applying it.
TLDR: this codepen works fine in Chrome, but the alignment is off in Firefox.
I'm building a jQuery plugin which modifies a text input to give it a dropdown button on the left. In order to get the positioning right, I add a wrapper div, which is the same height as the input, so the button can be absolutely positioned on top of the input, and yet still have the same height:
#wrapper {
position: relative;
}
#overlay {
position: absolute;
top: 0;
bottom: 0;
width: 30px;
}
This works fine until the input has vertical margin: then the container grows to include the margin, and so the dropdown button grows with it. My solution to this was margin collapsing: I gave the input display:block which meant that the container ignored it's margin. All good.
input {
margin: 20px 0 40px; /* testing */
display: block;
}
But now the problem is that by default, inputs are inline elements e.g. you might want to have a submit button next to the input. So I wrapped the whole thing in a container div with display:inline-block, so another inline element like a button can happily sit next to it.
#container {
display: inline-block;
}
This works fine in Chrome, but has weird alignment issues in Firefox when there's any vertical margin on the input. Below I've added the final markup. There's also a codepen link at the top.
<div id="container">
<div id="wrapper">
<input>
<div id="overlay"></div>
</div>
</div>
<button>Submit</button>
Edit: the point is that this is a plugin and I'm trying to work with the user's existing markup and CSS e.g. they have this markup:
<input><button>Submit</button>
and their existing CSS has vertical margin on the input, and I want them to be able to just initialise my plugin on the input and it just work, without forcing them to change their markup/CSS. Now because the plugin needs to add lots of markup around the input (for the overlay and the dropdown list), I wrap it all up in a container div. This container div is the limit of our reach (and does not include the button element, or anything else they choose to put next to their inputs).
To fix this, you'll need to define a line-height in your parent div#test2. Without it, different browsers will give it different values. This will cause Firefox to cause this weird result.
Now, the line-height isn't the only problem, also the vertical-align's baseline value will generate a different result for inline elements than it is for inline-block elements that have a different height than the surrounding inline content. To fix this, change the value to top for the #container element (since that's the inline-block element).
The final result would have the following changed (only pasting the parts that changed):
#test2 {
background-color: green;
line-height:70px;
#container {
// replicate the inline nature of the input
display: inline-block;
vertical-align:top;
}
//the rest of the #test2 nested code
}
That would look like this.
Reply to comment
I've made something that does work by the requirements set. Since you said the extra code (so the divs around the input) are made by the plugin itself, I've taken the liberty of changing that a bit to make this work.
The way it can work quite easily is just not using inline-blocks at all, and sticking with the inline elements. This would change the styles to the following:
#container {
// replicate the inline nature of the input
display: inline;
}
#wrapper {
display: inline;
position: relative;
}
input {
// you'll want to make sure the typed text doesn't appear behind the overlay
padding-left:35px;
}
#overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
Notes:
I didn't bother making the overlay cover the full height of the input, since your plugin would just make it a flag anyway. To make it cover the full height, just set negative top and bottom styles on the overlay, equal to the computed padding-top and padding-bottom (resp.) on the input. In this case, you'd have to change them to top:-5px;bottom:-5px;. (you can get the computed style via jQuery's $(input).css('padding-top'))
You could actually also remove the whole #container from it, since the only style it has now is display:inline which really doesn't add anything to the whole thing.
I've added a padding-left to your input, because otherwise you'd have to type behind the overlay, which is just silly.
Is the HTML generated by the plugin and it needs to stay exactly the same? I'm not sure I can figure out exactly why the second example is not working, but you seem to have too many div elements there. You could make since simpler:
HTML
<div id="test1">
<div id="wrapper">
<input>
<div id="overlay"></div>
<button>submit</button>
</div>
</div>
SCSS
input, button {
border: 1px solid black;
padding: 5px;
}
input {
display: inline-block;
padding-left: 35px;
}
#test1 {
background-color: yellow;
padding: 20px 0 40px 0;
#wrapper {
position: relative;
#overlay {
position: absolute;
top: 1px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
}
}
Codepen example
I've removed the margin, and instead used padding on the parent, it achieves the same thing. You'll also want some padding-left on your input field so the entered text doesn't disappear behind your overlay div.
EDIT: In case you are unable to change the markup:
SCSS:
#test2 {
background-color: green;
#container {
// replicate the inline nature of the input
display: inline-block;
padding: 20px 0 40px 0;
}
#wrapper {
// this is just here to be display:block and ignore the margin on the input
display: block;
position: relative;
}
input {
// tell parent to ignore margin
//display: block;
margin: 0;
}
#overlay {
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
width: 30px;
background-color: #00C2FF;
}
}
codepen demo
Removed the block and margin declarations from the input field, and moved the spacing to padding of the #container element.
"Disclaimer": Let me just start by saying that I did not find exactly what is causing the problems in Firefox, but I did think of an alternative way you could do it.
The way this works in both Firefox and Chrome is just to use the exact same HTML as you used for your #test1, but on top of that, also using the CSS :before pseudo-element (instead of using the #container and #wrapper). The code I used was:
#test2 {
background-color: green;
position:relative;
&:before {
content:"";
display:block;
position:absolute;
left:1px;
top:1px;
bottom:1px;
margin:20px 0 40px 0;
width:30px;
background:#00C2FF;
}
}
demo
The way this works is to simply position the :before overlay on exactly the same place as the divs previously were. As you can see, I've used most of the same styles as you did, but instead, I've put them on the :before pseudo-class.
Other answers don't know why it doesn't work on Firefox. Well, I think that Firefox has the right behavior and it's a Chrome problem.
In short, you want to align an input with a button. But the input is inside a wrapper. Then, you can use vertical-align to control the vertical aligning between the wrapper and the button, but not between the input and the button.
Here you can see an screenshot with different vertical-align:
See the code.
If you want to align the input and the button (last case in the image), you have a problem, because any of the keywords you can use with vertical-align does that. Only in case that input's top margin and bottom margin are equal, then vertical-align: middle works.
But in general, you have have another solution: vertical-align also accepts a <length> value.
And, to get a perfect alignment, you should use the formula
vertical-align: -(input bottom margin)
Or, if you want to align them even if the button has a bottom margin, then
vertical-align: -(input bottom margin) + (button button margin)
The code formula above works with inline-block <div>, but not with <buttons>.
The formula must be fixed to
vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6
In your example
(Input bottom margin) = 40px
(Input offsetHeight) = 31px
Then, you need
vertical-align: -(input bottom margin) -(input offsetHeight)/2 + 6
Demo
I could achieve it with the following.Codepen You will have to know the css applied to input and apply it to button as well
button{
position:absolute;
margin-left:5px;
}
input, button {
display: inline-block;
margin: 20px 0 40px 0;
}
please update below in your code.
input, button {
border: 1px solid #000000;
margin: 20px 0 40px;
padding: 5px;
vertical-align: top;
}
hope it will work
http://codepen.io/anon/pen/Isycu
So I'm having a problem with the last paragraph apparently not clearing and slipping into the middle of the h1 and nav. But when I put a div with a clear:both property before the paragraph it appears to work.
Bear with my fiddle, please.
I used a purple background to represent the image replacement technique that I learned from nettuts.
The clearfix part is a class named "group", the CSS is at the bottom.
Also if I remove the display:block; from h1 > a the layout breaks so a follow up question is, what elements should I float and where should I apply the clearfix.
The problem you are seeing arises because the clearing element is in the wrong place.
Consider your CSS:
h1 {
margin: 0;
float: left;
background: red;
text-indent: -9999px;
border: 1px dashed cyan;
}
nav {
height: 44px;
margin: 0;
float: right;
background: black;
border: 1px dashed cyan;
}
.group:after {
content:"x";
display:table;
clear:both;
background-color: cyan;
}
You have h1 floated left and nav floated right, and then you have your p block with your text (not floated).
The p content wraps around the two floated elements as expected unless you add the clear:both rule to p as pointed out earlier.
The clearing element has to appear in the DOM after the nav element.
In this example, you apply .group to nav, which generates content that appears after the ul block that is a child of the nav block.
The problem becomes more obvious is you set the nav height to auto and you add some borders and colors to show the edges of the various blocks.
See demo at: http://jsfiddle.net/audetwebdesign/9nGQy/
The problem can be seen as follows:
I added an x to mark the spot in your generated content for the clearing element, which appears within the nav block.
Try:
p{
clear:both;
}
It should work for you depending what the outcome is you are after.
I am currently creating a general responsive template for myself , as I have not really touched this side of design as of yet.
I am having a issue with my "Content Div" when resizing to about 600px (A red border will appear when the resolution is right as to where the problem is). My content div will no longer expand even though I have set a static height of 2300px , so the content just floats outside and the content div does not expand.
#media only screen
and (max-width : 603px) {
/* Styles */
#column_wrapper img {margin-left:25.33%;padding-right: 20%;}
#column1_content{height:500px;}
#column2_content{height:500px;}
#column3_content{height:500px;}
#column_wrapper{border:1px solid red;height:300px;float: left;}
#content{height:2300px;margin-top: 100px;margin-bottom: 20%;}
}
The site can be found at Responsive Template
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
You do not need to give height instead for div#content use clearfix. This will fix it ;)
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
don't use static height in div#content use only overflow:hidden; and remove too the static height in #column1_content, #column2_content and #column3_content
relevant: http://www.quirksmode.org/css/clearing.html
It's because the elements inside are floated. When you float an element, it takes that element out of the content flow. This means that those elements aren't going to push out the div and expand it with the content.