I try to solve this problem for hours ...
I tried a few tricks, some small hack, I also tried to add positions "relative, absolute...Etc", some "top", top add a invisible not fixed div behind the fixed and others, but I want the cleanest solution possible and to know WHY have I got this problem.
: I have a menu "fixed" to the top, and a header.
The header is behind the menu (normal), but the problem is that when I add a margin to the header, it adds a margin to the body, while I want to add margin to the header INSIDE the body, just place the header under the menu without position:relative+top:Xpx.
And use "box-sizing: border-box" doesn't change anything
http://jsfiddle.net/WdNz4/
<div id="menu">
</div>
<div id="header">
test1(Success)<br>test2<br>test3(Lose)<br>test4<br>test5
</div>
(can't post my css, little bug, go to jsfiddle)
Thanx in advance for your help !
Add top:0; property to your #menu:
#menu {
height: 40px;
width: 100%;
position: fixed;
background-color: red;
top:0;
}
JSFiddle: http://jsfiddle.net/WdNz4/4/
Just use float:left; this will set your block outside the body structure, so that way you can position it anyway you want.
Related
I just found out that my website is scrolling horizontally on mobile. However, I am not able to find out why this is happening.
The containers and body seem to have the correct width when I check it in my browser.
Any idea?
https://www.urban-zweirad.de
Cheers,
Mark
There is some extra margin on your header or navigation which is having more width than your body/container.
add overflow-x:hidden in body
body{
overflow-x:hidden
}
it seems line number 204 from _pages.scss is creating issue
.teaser {
padding: 0!important;
}
try removing this.
The problem is in your class named "main"
what you need to do is to add css property : overflow:hidden;
.main{
overflow:hidden
}
think this might help you.
Your problem lies in this part of your HTML. #pons awnsered correct.
<div class="container-fluid center teaser" data-plim="495">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</div>
How can you fix it? You could remove the .row class. As this is not neccessary because its a full width bootstrap col. And the .container-fluid allready clearfixes the floats.
You also just could change the CSS of the .teaser class into:
.teaser {
padding: 0 !important;
overflow: hidden; // This fixes the negative margin on the row to be hidden inside its parent.
}
Add the following css to body tag
.body{
..
..
width: calc(100% - 8px);
}
My slideshow is overlapping my footer. In the source code, I've tried to clear the previous DIV as typically recommended:
<div class="clear"></div><!-- /clear any floats -->
This is not fixing the problem. Any ideas?
One way to solve this is to adjust the footer-wrap class to add more margin on top:
#footer-wrap {
margin: 100px auto 120px;
}
There might be other adjustments necessary but this should fix the issue assuming your content in the sideshow stays the same height.
give this one <div class="ls-thumbnail-wrapper" style="visibility: visible;"> a float: left and it should be fixed
Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.
I've used the last example on this page for equal height columns.
http://www.ejeliot.com/blog/61
The problem is, when you click an internal anchor link, the content is shifted up, and the overflow is making the top part of the page disappear.
For example, click this link
http://www.noosanativeplants.com.au/~new/articles/botany-words/
Then click a letter to jump to that section. You will notice what I am describing.
Is there a way to combat this, or is this a short coming of the technique? Do you recommend I use the background image technique for faux equal height columns? I'd rather not use this, as one page has a different background, and would require a bit of reworking to do the background for this page.
Thanks
I really recommend you to use the fail-safe faux columns method. If you are not a layout expert (no offence, seriously), stay away from the padding/margin/overflow magic and the one true layout technique. The latter is elegant but it can cause unwanted side-effects if you are to do heavy JS/DOM manipulations and all (see the problems listing).
As slink said you have two overflow: hidden rules in your css:
#main-container {
overflow:hidden;
}
And
#content {
overflow:hidden;
}
If you disable/remove these you will able to use your scrollbars again. Unfortunately the padding / negative margin "hack" will be visible. I recommend you to completely remove this solution and use faux columns. Faux columns background can be added to your #main-content or even the #content div (not just like the example in the ALA article that sets the background image to the body tag).
Good luck!
Update: Sorry, let me correct myself: to use faux columns in your case it is better to set the current background to the html element and the faux background to body element.
Assuming your equal height columns are the left menu and right content in that example, you could just use a margin-left property on the right-column and set the background colour of the container to the desired left-column colour. This would assume your right content always has a greater height than the left, but there are other ways round this.
#container {
width: 960px;
background-color: #000;
}
#menu {
float:left;
width: 240px;
}
#content {
float:right:
margin-left: 240px;
background-color: #fff;
}
<div id="container">
<div id="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div id="content">
stuff goes here
</div>
</div>
The problem is caused by two overflow: hidden; rules defined on elements #content and #main-contaniner.
A div, containing a table has the following CSS styling:
#formulaAlts {
float: right;
height: 200px;
overflow: auto;
}
This makes it so that when the table is >200px, a scrollbar appears only for the table and the other elements on the page stay put. Great!
Now for our friend IE...
In IE, the element spawns the vertical scrollbar without growing the containing element. To "solve" this, a horizontal scrollbar is created.
That sucks. And I don't want it to suck...
Any ideas?
--EDIT--
I found out that the line
overflow-x: hidden;
forces IE to ignore the horizontal scrollbar. This is better.. but not quite there because now part of my table is invisble.
Careful.
overflow-x
isn't the most widely supported attribute out there.
I tend to go with a containing div with some right padding:
CSS:
div.scroll {
overflow:auto;
padding-right:6px;
/* I've found 6px to be just right my purposes, but try others*/
}
EDIT: You'll need to add a height attribute somewhere for this to work! I usually have a default set in the div.scroll declaration then tweak that for specific cases (most).
HTML:
<div class="scroll" >
<table>
<!-- your table stuff in here -->
</table>
</div>