Okay, so, on my website, I have three panels: cont1, cont2, and cont3. The following are their CSS definitions:
#cont1 { width:35%; position:fixed; background:#2583FE; right:0px; overflow:hidden; float:right; border:1px solid #0961D3; border-left:0px solid black; height:100%;}
#cont2 { height:69%; width:100%; overflow:auto;}
#cont3 { min-height:75px; width:100%; position:relative; display:block;}
Now, if I implement it in the following way, only a vertical scrollbar appears and I can scroll my content as I wish:
<div id="cont1">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
However, if I implement it in this way (the way that I ultimately want it to work), horizontal scrollbars appear in cont2 for no apparent reason:
<div id="cont1">
<div id="cont2">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
</div>
Usually, I would just put overflow-x:hidden, but I'm trying to make my site as cross platform as possible and I know overflow-x is a CSS3 property (not supported in IE8 or below). Could anyone offer insight as to what might be happening? Thank you!
.cont{
height: 30px;/**/
border-color: black;
/*position: relative;*/
position: fixed;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border: none;
}
To begin, you must use the #id once, there can be only one #id. Uses .classes if you want to put several.
Then I do not understand I do not have this problem on jsFiddle, I wonder if this is the edge that is used in #cont1 that you created this bar.
You have a page to show us the problem live?
Related
I'm creating a new blogger template , but unfortunately I'm facing an issue.
simple example for what i am trying to do.
<div class='container'>
<div class='slider'></div>
<div class='posts'></div>
</div>
by default the second div (posts) should have z-index higher than the first one.
see this demo
and see this pic and now see what should be done here
, so what is the problem !.
here is my blog
To have an apparent higher z-index, the element must either be
After the other element or
Have a position:relative; or absolute when the previous element has a relative/absolute position.
.d1{
width: 100%;
height:50px;
background: tomato;
position: relative;
}
.d2{
width:80%;
height:200px;
background: blue;
margin: -30px auto 0 auto;
position: relative; /* Try removing this - it will be 'below' d1 because d1 has position:relative; */
}
<div class='container'>
<div class='d1 slider'></div>
<div class='d2 posts'></div>
</div>
In your case, this means adding position:relative; to .container class.
I had created the following divs and its definition.
<div class="serach-container">
<div class="search-keys-container">
<div class="search-type"> </div>
<div class="basic-search-keys-container"> </div>
<div class="advance-search-keys-container"></div>
</div>
<div class="search-result-container"></div>
</div>
.search-type{
height:20px;
width:auto;
margin:5px 10px;
background-color:#4000A0;
}
jsfiddle
But unfortunately the top-margin of class search type goes upwards. I tried by adjusting the margins so and so. But no result is found. Without margins it is ok. But I want the margins.
edit:
I dont know why top-margin is not working. Anyway an alternative solution is put another div say error-correct before the search-type div ie
<div class="serach-container">
<div class="search-keys-container">
<div class="error-correct"></div>
<div class="search-type">/div>
<div class="basic-search-keys-container"></div>
<div class="advance-search-keys-container"></div>
</div>
<div class="search-result-container">
</div>
</div>
.search-type{
height:20px;
width:auto;
margin:0px 10px 5px 10px;
background-color:#4000A0;
}
.error-correct{
width:100%;
height:5px;
}
jsfiddle
Thanks all my friends for your great help.
DEMO
Try change that class like here:
.search-type{
height:50px;
width:90%;
margin:0px auto;
background-color:yellow;
}
Try this and let me know if this is what you wanted.
.search-type{
height:20px;
width:auto;
margin:5px 10px 0 10px;
background-color:#4000A0;
}
That makes it come down and still keeps your margins.
As I said in my comment, you are being a little bit too strict in your size definitions...
But to solve your problem, you should do this:
.search-result-container{
height:100%;
width:100%;
background-color: #0000FF;
padding-top: 5px;
}
.search-type{
height:20px;
width:auto;
margin: 0 10px 5px 10px;
background-color:#4000A0;
}
To me, this looks like a bug or something, as margin isn't being applied against the parent, but the body tag.
Also, you have a minor typo in the first container serach
Try adding padding:0.01px to .search-keys-container. It won't have any visual effect, but it will cause margins to not collapse like this.
I''m looking to move an image of a saw in between two borders so it is looks likes this.
I believe I have centered the image correctly but it appears I haven't and I am loathe to use padding if that is not right way, as I want this to be semantic as possible for a responsive design. I also need it to be placed within the two borders with one border stacked in front. Presumably I need use z-index to do that but I haven't got that far.
JsFiddle
Are you looking for something like this:
See Demo: http://jsfiddle.net/rathoreahsan/Fcn96/
Hi Played with positioning and tried to make the results as per your referred image requirement. I hope this will help you.
CSS
#logo-container .saw {
left: 50%;
margin: 0 auto;
position: relative;
top: 46px;
}
#tag-container {
border: 2px solid #00AC9D;
height: 150px;
margin-bottom: 5px;
position: relative;
width: 1140px;
}
see the demo:- http://jsfiddle.net/RJVXE/16/
You need to utilize both z-index and positioning.
.line
{
height:1px;
width:100%;
background:#000;
position:absolute;
left:0px;
}
.item1
{
top:5px;
z-index:5;
}
.item3
{
top:25px;
z-index:15;
}
<div style="width:100%; position:relative">
<div class="line item1"></div>
<div style="position:absolute; top:0px;left:50px;z-index:10">
<img src="saw.png" />
</div>
<div class="line item3"></div>
</div>
(example uses both inline & blocked CSS references only for brevity. Stay away from inline CSS).
You could tryo what AlphaMale suggestes here: How to center image in a div horizontally and vertically
Before your image include a 'span' tag. Then add this properties to 'saw' class:
#logo-container .saw {
text-align: center;
margin-bottom:-50px!important;
}
The !important is to override margin: 0 auto that actually has.
http://jsfiddle.net/2EKWS/1/
I've found a lot of variations to this question within SO, but it seems no matter what I try I can't get this (seemingly very simple!) thing working!
What I'm trying to do is to keep the 'centered' div in the center of the viewport and to place the 'sidebar' div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the 'centered' div.
Here's some test code on jsfiddle:
http://jsfiddle.net/6wCyr/13/
Everything I've read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results wherein the right sidebar is placed below the 'centered' div rather than beside it. That's what's shown in the link.
I've also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn't get that one going either.
Hopefully this question is as easy to solve as I think it should be! Just can't seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!
Thanks!
Live Demo
I moved div.sidebar inside div.centered.
I added position: relative to div.centered.
We're using this technique.
You don't have to declare a fixed width on div.sidebar.
CSS:
div.centered {
margin-left: auto;
margin-right: auto;
border: dashed;
width: 100px;
height: 100px;
position: relative
}
div.sidebar {
border: dotted;
position: absolute;
top: 0;
left: 100%
}
HTML:
<div class="holder">
<div class="centered">
CENTERED
<div class="sidebar">
RIGHT SIDEBAR
</div>
</div>
</div>
Try this.
http://jsfiddle.net/DOSBeats/6wCyr/16/
.holder {
margin:0 auto;
width:100px;
}
.centered {
border: dashed;
float:left;
height: 100px;
}
.sidebar {
border: dotted;
float:left;
margin-right:-100px;
width:100px;
}
If you do not set a width to your holder and center it, the sidebar will float to the edge of the window.
Try this:
HTML:
<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>
CSS:
#holder{
margin:auto;
width:500px;
}
#sidebar{
border:dotted;
float:left;
width:100px;
}
#centered{
border:dashed;
margin-left:110px;
width:380px;
}
I've been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.
My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I've mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?
Thanks, Matt
<style>
.left {
width:100px;
float:left;
border: solid black 1px;
}
.right {
width: 100px;
margin-left:100 px;
border: solid red 1px;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
Since this is a community wiki. I thought I'd post the working code with the solution proposed below by Plan B.
<style>
.left {
width:100px;
border: solid black 1px;
float:left;
}
.right {
width:100px;
border: solid red 1px;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
<div class="clear"></div>
c
Float them both left, add the following after both divs:
<div class="clear"></div>
.clear { clear: both; }
That or use padding instead of margins.
.body {
padding:0px;
margin:0px;
}
It is the double margin float bug. Described well here:
http://www.positioniseverything.net/explorer/doubled-margin.html
Try adding display: inline to floated divs. I believe this is an IE bug of adding more margins to floated elements. display: inline worked for me in the past. Hope this helps.