I'm using Susy grids and utilizing the method described in this post A `position:fixed` sidebar whose width is set in percentage? to set a fixed sidebar. It work's well on Chrome but testing it out in IE10 the fixed sidebar end's up in the middle of the document. Can anyone see what's wrong here?
You can see it in action at:
http://dev-johandahl.com/gridtest/
It looks like IE10 is not centering the .sidebar-area container. That container is sitting flush left, so the right edge of it (the sidebar) falls in the middle of the page. There may be a better option, but the most obvious fix would be an additional wrapper around the sidebar container:
.sidebar-area {
position: fixed;
left: 0;
right: 0;
text-align: center; // this may not be needed.
.sidebar-container {
#include container;
text-align: left;
}
}
That will set up an outer fixed area that is the full screen width, and you can center your container within that context. Let me know if you find a better solution!
Related
I currently have two side-by-side divs, each set to the width of the page so that I can scroll sideways. The right-hand div needs to peek exactly 40px over into the left side so it's visible on page-load. I've managed (with a lot of help) to get that part fine - the issue now is that there is a 40px gap between the edge of the right-hand div and the edge of the page - illustrated below:
jsFiddle
Any ideas on how to get rid of it? Thanks a lot for any help. The 'peek' area has to stay exactly 40px, so using percentages seems to be an issue. Oh, and for an example of how this would look in vertical form, here's an example.
Cheers.
You're container has 200% width and is causing the expanding problem.
You need to reduce its size. It's a bit difficult because your width are in % and your negative offset is in px.
What you could do is change the offset to percentage and take that out of the container.
You will also need to use margin-left rather than left.
This works for me in chrome inspector:
#wrapper {
width: 199%; /* change here */
position: relative;
}
#right {
float: right;
width: 50%;
background-color:cyan;
position: relative;
margin-left: -1%; /* and here */
}
Fiddle: http://jsfiddle.net/hUyBq/
*Edit: * 1% is an example, you might want more. update the wrapper accordingly
*Edit: * Solution using JS: http://jsfiddle.net/bendog/wP4zb/
Could you fake it like this jsFiddle example?
I moved the scroll right block (<p>scroll right --></p>) outside of the wrapper (you didn't mention if that needed to be there). Then I applied the same color to the wrapper and added overflow:auto; to it.
I often run in the following problem, I have a web page with the following divs:
header
sidebar
content
footer
sidebar and content are both float left with a break afterwards.
I want content to expand to the right edge of the browser, no matter how wide or narrow the browser width.
However, no matter what I try, I am face with two choices:
content must be a fixed width
content is not a fixed with (no width property) but resizing the browser pops the content down under the sidebar
The site I'm working on has many more divs than these four so it's hard to post CSS code that is not convoluted, but does anyone have a general strategy to enable content to expand out to the browser's right edge while never popping under sidebar if browser width is made too small?
My current solution is: table.
Addendum 1
Thanks Hristo, your solution works except that sidebar and content can't have fixed heights, which causes the footer to appear in the middle. Since you aren't using floats, how do you make the footer come after both of them?
You should be able to set a margin-left to the #content and position:absolute to the #sidebar.
For example:
<div id=wrap>
<div id=content>
...
</div>
<div> id=sidebar>
...
</div>
</div>
and some css
* {
margin: 0;
padding: 0;
}
#content {
margin-left: 200px;
background: green;
}
#sidebar {
width: 200px;
position: absolute;
top: 0;
left: 0;
background: pink;
}
and the example:
http://jsbin.com/umomuk
This is the same solution that google uses on their search result pages.
UPDATE
http://jsfiddle.net/UnsungHero97/ABFG2/10/
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/ABFG2/2/
Let me know if you have any questions. I hope this helps.
Hristo
On solution will be to use the minimum width:
.containerDiv {
min-width: 600px;
}
if the div is greater than 600px it will just expand, and if the window is resized to a lower value the minimum width will be 600px. However, some versions of IE doesn't support this property, a different solution will have to be implemented for IE.
This link suggest a hack, but i have not tested that personally.
CSS play
I've been working on http://healthimpactnews.com and I need to fix this issue asap.
For some reason, IE, and IE only, squeezes the right-hand sidebar down below the other divs even though all the div columns are floating and within a fixed width container. My browsers create a horizontal scroll bar when the are sized down, but IE just forces the div down, instead.
Anyone know why?
The div with class ct_w is 1000px width;
The first child of that (ct) is also 1000px width,
so it pushes the second child ct_c3 (the right bar) away... (down)
solution:
completely remove the width property of the div with class ct
.ct {
margin: 0px auto;
width: 1000px; /** <--- remove this **/
}
Yes, your container, "ct_w", has a width of 1000px; your left column, "ct" also has a width of 1000px. There is no room left there for your sidebar, "ct_c3". The other browsers are actually being nice by rendering the sidebar where it is. In fact, they're only doing that because you didn't clear your floats, so they don't understand the box model of ct_w.
Use a clearfix on ct_w, set the width of ct to 750px (or 749px for IE7), and make ct float left, then you will see the layout you're looking for.
Try setting the following:
.ct_w {
...
float: left;
width: 750px;
...
}
.ct_c3 {
...
float: right;
...
}
The following seems to work as well:
.ct
{
float:left;
width:750px;
}
And remove the margin part, because it is not needed when floating the toolbar next to it.
I have a layout template made to have a top banner, a left side menu and a content area to the right of the menu. I'm trying to figure out how to keep the 'application_layout_content' div from dropping below the 'application_layout_menu' if the browser window is narrowed. I'm not sure if I was doing this the right way to begin with; otherwise it seems to work fine.
(looking at IE7/IE8 mainly), I've played around with 'overflow' and 'position' properties but either will cause problems in one version or the other. Like 'Overflow: auto' will work in IE7 (main content div won't drop below the menu div), but in IE8 it will cause a greyed out vertical scrollbar and the main content div will still drop below the menu div.
Thanks!
#application_layout_header
{
background-image: url('../hHeader.jpg');
background-repeat: no-repeat;
height: 103px;
}
#application_layout_menu
{
width: 205px;
float: left;
}
#application_layout_content
{
float: left;
}
I don't think you can accomplish this as long as you have a fixed width defined for #application_layout_menu. Try making it a percentage value.
try setting a min-width on #application_layout_header
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.