I have a navigation bar with 40px height and I can't place my other content (just a textarea) below this bar. I tried to set margin-top:40px; to the textarea but it doesn' t work.
Then I used padding-top:40px which is ok for the content inside the textarea but as you will see has a problem with the scrollbar (it gets behind the bar).
Just take a look at this jsFiddle
Add padding-bottom: 40px to the nav, and remove it from the text-area.
use
postion:fixed;
and margin to push contents out
http://jsfiddle.net/4Y63u/3/
As an alternative to #Andrw Ice's answer
You just have to give the textareas margin something to push against.
JSfiddle Demo
This is common...as the advantage is that it doesn't cause any of the elements to moveif the navbar is hidden.
body {
border:1px solid transparent;
}
nav + textarea{
margin-top: 40px;
}
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).
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
I'm simply trying to display a textarea control inside a Twitter Bootstrap tab pane. I want the textarea to span the entire width of the tab pane, so I've added the row-fluid class to it. This works, but there seems to be some additional padding added to the textarea, causing a nasty horizontal scrollbar to show across the tab pane.
Here's a screenshot to demonstrate what I mean:
Here's a jsFiddle.
How can I get rid of the scrollbar?
Just remove (or if not possible, override) the overflow:auto; on the <div> with the class .tabcontent, e.g.
div.tab-content {
overflow:visible;
}
jsFiddle here.
or give a smaller width that doesn't overflow the scroll
.text_area {
width: 200px;
}
or
.text_area {
width: 90%;
}
ie7 is at it again - my accordion works in all other browsers but in ie7 it does not push down the footer, but overlaps it and heads way down the page. Any idea what I can do to make it so that when I open one of the accordions the div expands and pushes down the footer?
Thanks in advance!
jeez sorry. heres the link
http://184.172.137.64/~laserlof/temp/services.php
IE is a pain that way. I would suggest having the div display in a block and adding either padding or a margin to the bottom of it. I have this on one of my sites and it pushes the footer down in IE:
div {
display: block;
padding-bottom: 20px;
}
Edit:
Ok remove the height: 100% on the accordian id in your css
You have this in your css somewhere
#accordion {
float:left;
height:100%;
margin-left:auto;
margin-right:auto;
position:relative;
width:950px;
}
If you remove the
height:100%;
it will allow the accordion to expand properly
On the website http://thornhillss.ca/pages.php?id=7 The footer looks fine in every browser. Yet in chrome it doesn't touch the bottom of the frame. Why is that. It should be a simple fix however I just dont know why it wont work.
*It should stick to the bottom of my div. Not my page.
This is because the div with the id "main2" isn't set to expand with the right-hand floated div. By default divs won't expand to fit floated child elements, so you need to tell it to hide overflow (which will tell it to expand to fit all child elements as long as you don't also give it a fixed height):
#main2 {
width: 860px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
overflow:hidden;
}
You're p.clear class has a margin on it as you're not using a reset.
If you add margin:0 to your .clear styles the margin goes away and it displays how you want it to.
This is what you are looking for it works and is awesome sticky footer