I have created my first template but my sidebar is not working as expected. Please take a look at this: http://neo4evr.com/templates/torque/
As you can see, the sidebar has gone down to the footer position and not at the side of #content div, as I wanted. Can anyone help me to bring it beside the content div?
You need to properly clear your #container div and float your content to the left to fix your issue. Try this:
#container:after {
clear: both;
}
#container:before, #container:after {
content: "";
display: table;
zoom:1; /* ie fix */
}
#content {
float:left;
}
This should be pretty easy. Just add display: inline-block to the div#content. The sidebar will then goes up and sits next to the div#content. One thing you might notice though, the sidebar might be a little bit higher than the content. If you want to take it down a little bit just so that it aligns with the content, just add the same amount of padding to the top of the sidebar like the one with the content. Which in this case, it's 20px.
Related
I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).
Why aren't these two elements next to each other?
Demo
HTML
<div>
<p>I'm a paragraph and I'm on the left!!!</p>
<h3>I'm a header and I'm on the right</h3>
</div>
CSS
div p{
float: left;
width:30%;
border: 1px solid blue;
}
div h3{
clear: both;
float:left;
width:10%;
border: 1px solid red;
}
I thought by giving the h3 a clear: both would use the empty space next to the p.
But it didn't work. Can anyone explain why?
Using clear: both; will clear the floats and will render the element below, inorder to make that work, you need to take out clear: both; from div h3 selector.
Also, if you want to float the header to the right you need to use float: right; rather using left.
This is what the clear: both; does to your example, it kinda acts like a wall between two floated elements.
Also this answer of mine will help you to understand how floats really work and the other one will help you understand clear both.
clear: both; is to clear the floated elements, so in your code, you should create a snippet of something like
.clear:after {
clear: both;
content: "";
display: table;
}
And now use the above snippet on your container element which will self clear the element like, rest stays the same but as I said you need to remove clear: both; from div h3
<div class="clear">
<p>I'm a paragraph and I'm on the left!!!</p>
<h3>I'm a header and I'm on the right</h3>
</div>
What will happen if I don't clear the floats?
Well, say you have a background applied to the parent element, the color won't render at all, see it yourself...
Demo 1 (floats aren't cleared so you don't see the red background)
Demo 2 (floats are cleared, you can see a red background now)
It's not just about the background-color, if you have third element, than it will just sit beside the other two, so inorder to prevent that, we use clear: both; as well. I've covered these aspects in the answers I provided the link for.
They aren't next to each other because you disabled any floating left of h3 with clear:both. Remove that and they will. Like so http://jsfiddle.net/vHph8/
The css clear property resets the floating and actually causes the layout to proceed beneath all floating material.
if you delete it from your css, it works (jsfiddle: here).
Please look here to see the problem I've got:
http://jsfiddle.net/M8aV5/
#main {
width: 940px;
padding: 20px;
background-color: #ffffff;
}
(you do best by looking at the jsfiddle as I'm not completely sure which code is affecting this problem)
As you can see when more content is added to sidebar the #main div tag doesn't stretch down which makes everything look bad.
For quite a while I have just put a standard height on the #main div tag but right now it feels like I want the content to be able to stretch out how much it want to without it being ugly.
I'd really appreciate some help on this since I've got absolutely no idea where to look for an answer on this.
You need to clear the floats. There are a number of different ways to achieve this. The method I would recommend is called a clearfix. See it in action on your code here: http://jsfiddle.net/M8aV5/1/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
Then just add the .cf class to your container #main. Details about this can be found here: http://nicolasgallagher.com/micro-clearfix-hack/
Another option would be to add overflow:auto property to the #main. See http://jsfiddle.net/M8aV5/2/ for a working example.
This a fairly popular option as well. There is a pretty good discussion between the two options here: ClearFix vs Overflow
I'm trying to make a layout where the footer is always at the end.
However, the HTML body should have a div fixed to the left and right split another with the remaining size.
Until then I have no problem ...
But when the right div has many lines of HTML not generally continues until the end, and the footer is in the middle of the screen.
When # main is with position: relative; happens the error, but if you take it, the speakers do not work the way I need.
I've tried everything and could not fix.
Example here:
http://jsfiddle.net/WzE3g/
#principal
{
width:100%;
float : left;
word-wrap: break-word;
/*display: block;*/
position:relative;
/*position:inherit;*/
bottom:0;
}
Use position:fixed; instead of absolute in #rodape element. This way it will be always at the the end.
I think you are talking about the sticky footer...
Here is an example with the explanation
My footer doesnt go all the way to the bottom.
I have put my code in a js fiddle for people to have a look at:
http://jsfiddle.net/q2pd5/
My problem is better viewed on the actual page:
http://dev.madhousecreative.co.uk/
or on the full screen result of the jsfiddle its obvious also.
As It is clear to see, underneath the footer there is a white gap, and I dont know why it is appearing.
I have alot of floats in here but I have tried clearing them where necessary.
Have also tried to sticky footer as suggested in some other questions answers but that doesn't work either.
As far as I am aware it is on all browsers
Just add
overflow: hidden
to #footer in your css. This is a little trick that often gets overlooked. Basically overflow: hidden allows your div to size vertically based on it's contents.
You haven't cleared the floats of the lists in the footer. Clear it with overflow: hidden; on the footer like this:
#footer {
overflow: hidden;
}
Your footer is not being properly cleared. Try it with a clearfix like so:
#footer:before, #footer:after {
content: "";
display: table;
}
#footer:after {
clear: both;
}
#footer {
zoom:1; /* ie fix */
}
The footer has height: 200px; specified, chopping of the background image. The footer actually extends to the bottom of the window, but the last item in the list can't be seen because it is white text on white background.
In other words, setting overflow: hidden doesn't fix it alone, it just chops of the rest of the footer. Remove the height: 200px as well, and it works.