I have HTML And CSS like this below :
<style>
.header_div{
background: none repeat scroll 0 0 #F3F3F3;
border-bottom: 1px solid #D5D6D6;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.13);
height: auto;
left: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 50;
}
.content_div { width: 100%; }
</style>
<div class="header_div"></div>
Issue: Due to of this fixed position of header div some the postion of content div goes behind the header div. I dont want to apply margin to content div to solve this. because that affect other page designs also.And header div position is compulsory. So is there any alternative solution?
I'm not even sure if I follow your question - an example would've been nice - but it sounds like you want a fixed header on some pages but don't want to push your content down because that would look weird on pages without the fixed header?
In that case, how about simply adding a class name to the content wrapper on pages woth a foxed header and apply margin to that? Like this:
<div class="header_div"></div>
<div class="content_div fixed_header"></div>
And then style it with:
.fixed_header { margin-top: 200px; }
Alternatively, if your markup allows it, target content_div only if it's a general sibling to header_div, like this:
.header_div ~ content_div { margin-top: 200px; }
Do you have different headers? The header would be the same on all pages right? So all content, or at least a div wrapping everything but the header could have a top margin to push it down. Why would you have content that could be over the header?
<div class="header_div"></div>
<div class="contentWrapper">
...everything else in here
</div>
Then push contentWrapper down. That's the proper way to do it.
Use padding instead of margin styling. It is the common way to prevent content overlapping:
.content_div {
width: 100%;
padding-top: 20px; /*or whatever */
}
FIDDLE
Related
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
I'm trying to create a sticky searchbox so that it's always at the top of the page when you scroll.
However, I'd like it to take up 100% of the container, not the window.
Here's an HTML markup example:
<div class="container">
<div class="searchbox">
Search Box
</div>
</div>
and the CSS:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
overflow-x: hidden;
}
.searchbox {
background-color: red;
position: fixed;
width: 100%;
}
Here's a fiddle with what's currently happening: http://jsfiddle.net/09ynr879/
I'd like it to be indented on the right side by the same amount it already is on the left. Any way to fix this? I'd like to be evenly in the center with the same margins on the left and on the right.
Thanks in advance.
Here's a screenshot of the actual site where we're having the problem:
http://s2.postimg.org/dlj47yqix/Screen_Shot_2014_10_06_at_11_08_24_AM.png
Notice how the searchbox starts at the right place but ends at the end of the page, not at the end of the container. We're using Bootstrap 3.2
Elements that are position: fixed have no relative parents. They are always going to be fixed relative to the page.
If it's no problem to you, remove position: fixed; from .searchbox and add it to .container
It's not possible, the fixed position get's out of the flow.
But an alternative solution:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
position: fixed;
}
.searchbox {
background-color: red;
width: 100%;
}
http://jsfiddle.net/09ynr879/4/
Position fixed is always of the entire window. If you want to do it for just a container, you need JavaScript.
I think what you are looking for is either:
StickyMojo or jQuery Stickem
Bootstrap has a similar thing, called Affix.
I'm running into a minor issue with one of the elements on my page. I have a sidebar which I am attempting to have span the height of the page by using the following CSS:
#sidebar {
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
float: left;
background: #eee;
color: #666;
}
The corresponding CSS is pretty much what you'd expect:
<div id="header">
The header which takes up 50px in height
</div>
<div id="main-container">
<div id="sidebar">
The sidebar in question
</div>
<div id="main-content">
The rest of my page
</div>
</div>
The code works as expected for the most part. When the page renders it spans 100% of the height (minus the 50px from the top). The problem is that it essentially assigns the box to the exact height of the window so as I scroll down the box scrolls away instead of staying locked to the bottom of the window. Any ideas how to resolve this?
You have to use position:fixed if you want for the sidebar to be fixed on some position:
#sidebar {
width: 180px;
padding: 10px;
position: fixed;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Another way would be to give to the parent container position:relative, and on his child position:absolute - but then the parent must have some height so the child element takes its height.
html,body{
position:relative;
height:100%; /* some height */
}
#sidebar{
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Check learnlayout to read more about positioning.
use css position:fixed to make the sidebar fixed.
in order to lock the height according to screen height i would use javascript/jquery:
$(function(){
// assign to resize
$(window).resize(set_height);
});
function set_height() {
$('#sidebar_id').height($(window).height());
}
hope that helps
First of all, I don't understand how it's spanning 100% of the height when no height has been defined.
Secondly use position: fixed instead of absolute.
On a second note, I'd like to recommend what seems a more proper way of going about positioning this. At the end of the main-container div, before it's closing tag, put this
<div style="clear: both;"></div>
and make the main container also float left, or float right if that doesnt give you what you want. It's suprising how such a common layout can feel tricky to do properly. (at least for newbies like us). I might be wrong, this might not be a better way, but it's the way I'd do it. The extra div you add is so that floated divs take up space, apart from that if it doesn't work, give the sidebar a height of 100%, or if you think it will overflow, tell me I'll add to my answer.
Okay, so I'm having rather annoying problems with what should be simple code, I've searched for duplicates but it appears to be different in a slight way. Here's my basic layout:
html:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
css:
html,body,#wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
}
#header {
position: fixed;
top: 0px;
height: 40px;
width: 100%;
color: white;
background-color: #000000;
}
#content {
position: fixed;
padding-bottom: 50px; /* to match the footer height*/
top: 40px;
bottom: 50px;
height: 100%;
width: 100%;
overflow: auto;
}
#footer {
position: fixed;
bottom: 0px;
height: 49px;
width: 100%;
border-top: 1px solid #000000;
background-color: skyblue;
font-weight: bold;
}
The idea is that the 3 divs inside the wrapper take up 100% of the page - in other words: all them are always in view. Header up top, footer on the bottom and content in the middle respectively.
The footer and header can be fixed size (be it pixels or % of page height), the content I want to automatically take up the rest of the page.
The problem is that the page can be of many different resolutions(so content can't be of fixed height, unless I use javasript). Another thing is that the content div can have variable amount of elements, meaning it has to allow the scrolling of the content while keeping both header and footer in view. The main part is: the scroll-wheel must be inside the content div, not page-wide.
I almost have what I want with this css, but some of the content can't be scrolled to when they overflows content div (I'm talking vertical overflows - there will be no horizontal ones). I would really appreciate some help, but this is not as easy/simple as it seems, if possible at all as I think you need a fixed height for overflow: auto.
I want a pure css solution, if possible, so don't mention JqueryMobile to me (or ever).
Here's how it looks right now, notice the scroll-wheel problem on the content div:
I hate when this happens...I found the solution just after I posted, decided to try one more thing: I've set the #content height to 'auto' and that did it (since once I drew my own attention to the scroll-wheel, it became apparent the problem is with the div height)! Just need to test and make sure that's the case with all/most browsers!
Maybe it will be helpful to someone else though!
I have a div that has a variable width, depending on its content. I want to use it for a menu bar that slides in from the side of the page when the user clicks it, so it has to stick out. I want it to stick out exactly 16px (because the arrow image has that size), no matter how wide it actually is.
How can I realize that without using JavaScript?
EDIT:
Thanks for your answers! But it came to my mind that I could do it just like I did with the navbar on that site – modify the width instead of sliding it in.
See here: http://dev.mezgrman.de/tagwall/
The easiest way to do that is to add another class to your menu item when it is collapsed and set another width there and a text indent like so (instead of write again all your css in a new class)
.collapsed {
width: 16px;
text-indent: -9999px;
background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}
Now the only thing you have to do in javascript is to add and remove that class depending on the user's click. (You won't get rid of javascript. because css doesn't know when you click an element)
http://jsfiddle.net/LruWn/
No matter how long the .box is, it will always overlap the .container only by exactly 16px:
html:
<div class="container"><div class="box">text</div></div>
css:
.container {
position: relative;
outline: 1px solid red;
width: 100px;
height: 100px;
}
.box {
width: 70px;
position: absolute;
left: 100%;
margin-left: -16px;
outline: 1px solid black;
}
Add overflow: hidden; to .container to see how it might look like in action.
I solved my problem by modifying the width of my element now. Silly me.