For some reason my footer border is at the top of the page while the text is at the bottom. Can anyone tell me why it's doing this?
Your can see the page here:
I would expect the red line to be just above my footer. What am I missing?
Floats can cause layout issues like this. Since you are only using them on your content containers you can remove the float: left; from .search_summary_container and add display: inline-block;.
Demo: http://jsfiddle.net/ThinkingStiff/HSNNZ/
.search_summary_container {
height: auto;
width: 480px;
margin-top: 10px;
border: 1px solid #c1d1da;
display: inline-block;
}
Add clear:both to your footer:
<div style="padding-top:10px;border-top: solid 1px #ff0000; font-size:11px; clear:both;">...</div>
Explanation: If you have a float left and a float right, then, the content that comes after will go under your floats. So by clearing, it resets the floats and renders it after the content that is floated.
In the footer, just set the css to clear:both.
Read this article: http://css-tricks.com/all-about-floats/
Related
So I'm trying to run 3 floats within a div and I run into this problem.
http://jsfiddle.net/sPUjQ/101/click me
Whenever I run two floats the background color stays but when I attempt 3 floats then it's gone!
Can someone tell me what's happening and why it's doing this? I don't encounter this when doing inline-blocks, just float: left.
When floating child divs, the parent collapses because they're removed from the normal document flow. Add overflow:auto on the parent to restore the behavior you're after:
.contain {
display: block;
background: blue;
margin: 0 auto;
overflow:auto;
}
jsFiddle example
Are you trying to retain the blue background in both .contains? If yes then you will have to remove float: left to children of .contains and add display: inline.
See my revise code
Hope it helps.
Try the following example,
Float each separately,
.contain{width: 100%; background: blue; margin: 0 auto;}
.one, .four{float: left; background: red;}
.two, .five{float: left; background: orange;}
.three, .six{float: left; background: yellow;}
http://jsfiddle.net/ShamalSandeep/km8twgvf/1/
You should clear the floats at the end of the container div, otherwise it will collapse.
.clear{
clear:both;
}
http://jsfiddle.net/sPUjQ/105/
You can read more in detail about floats and their quirks here > http://css-tricks.com/all-about-floats/
I'm trying to have the div expand to fit the content contained in a <section> tag for my HTML and CSS page. The thing is that it cuts off midway through the content and I can't get this to work.
So far I've experimented with setting overflow:auto but to not much success - the inner container scrolls but I'm looking to make the whole page scroll.
Can someone have a look and help me out? JSFiddle: http://jsfiddle.net/6xgT5/
Just get rid of height:100% on #mainContent and replace it with float:left. That should do the trick. Let me know if that resolved the issue.
For the footer, git rid of position absolute and replace it with float:left, width:100%:
footer {
float: left;
background-color: #CAD0C8;
border: #000 1px;
width: 100%;
height: 45px;
text-align: center;
padding-top: 5px;
}
Thats because you are fixing #footer and it makes to float outside a content layout. So you need just add to the section padding-bottom :45px /*footer height*/
Add overflow:auto; to #mainContent.
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 have a problem with my layout. I have a content div that I want to expand the more text there is in it. And at the bottom there's a div that should hold some contact info.
My problem: I can't figure out how to allow the content div to become larger without overlapping with my bottom div. I've tried margins and paddings but I can't seen get it to work.
Any kind of help is appreciated.
I pasted the code on Pastebin so this post wouldn't be so long. A fiddle: http://jsfiddle.net/NpY66/
CSS: http://pastebin.com/7ztPs253
HTML: http://pastebin.com/YBqJJs3g
The answer is, you need to use clear: both; on your footer style.
#bottom{
border: 1px solid gray;
font: 12px Helvetica, sans-serif;
padding: 5px;
background: white;
text-align: center;
clear: both;
}
This will prevent floating div tags from overlapping.
Updated version of your JS Fiddle
Here's an example of what I'm trying to work with: http://jsfiddle.net/U2YkF/3/
I need #container to expand to fit #right when #right extends off the right hand side of the screen. Clearfix doesn't seem to be the answer as I've tried that: it only affects the vertical content.
try this
#container {
outline: 1px solid red;
min-width: 100%;
height: 50px;
display:inline-block;
}
I was able to achieve what you needed with a few lines of JQuery:
x1=$("#right").width();
x2=$("#left").width();
$("#container").width(x1+x2);
The simplest method is to add float: left to #container.
http://jsfiddle.net/U2YkF/6/