table-footer-group and safari / chrome / mobile - css

so I have containers set up like so:
<div>
<div class="left"></div>
<div class="right"></div>
</div>
The left div is the login, the right div is the content...
With media queries, when the browser gets small enough I want the left(login) section to go on the bottom of the right(content) div.
I tried using table-header-group on the .right div and table-footer-group on the .left, and it works on the desktop browser perfectly in FF...however in chrome, safari and IE...including iphone and android phone it doesnt work at all.
My entire layout is based around needing this first div to be below the second one for the mobile layout...is this possible at all or do I have to redo the entire structure of the site?
ex. http://jsfiddle.net/VF6Hy/1/
EDIT: If this is not possible with pure css, would there be a JS option to stack the second div above the first?

I kinda worked around the issue by adding a large min-height to the container and position:absolute to the .right div and bottom:0 on the mobile version which put it on the bottom

Related

100% height responsive sidebar

How do i go about setting up a full height side bar using a responsive grid system, that is similar to bootstrap?
The issues I am running it to is the .main wrapper div collapses to the height of the .primarycol div.
I 'm using pull and push classes to adjust the visual layout so the .secondarycol div looks like its on the left hand side, even though it is after the .primarycol div in the code.
<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>
Normally the without the .secondarycol` class, the div would and look like this.
I have tried adding min-height:100% to the .main div and height:100% to the body tag, but that makes the main div height only ever be the height of the browser window and not the content.
Any suggestions on how I can remedy this would be really welcome.
This is the codepen of my base structure.
http://codepen.io/onebitrocket/pen/ZYQLMm/
I've added in the third column as well as some pages require one.
The column system is based on bootstraps, but i think it's an improved version:
The column classes are declared from smallest size to largest size.
I've also changed the class names to indicate the breakpoint size rather then xs,sm,md,lr etc..
Thanks
At least on chrome you need to set the height on the html tag too. Try it - http://jsfiddle.net/27kze60s/
html, body { height: 100%; }
Fixed, thanks to everyone for the suggestions
I've added the following to the css
height:100% to body
min-height:100% to .main
overflow:-y: auto to .secondarycol
I've updated the codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/

Responsive height content background color

I'm using Kube CSS framework to create a demo site at www.dreametry.nl/ddfleurs . It was going well until I came across a problem with the main content background color. On the desktop the white background grows with the content, but not on a mobile device. The problems is the white background stops half way the content.
I tried using several styles, the only changes was with
.content { min-height: 650px; }
But then the background height is too much on mobiles.
Including height: 60%; to the previous code doesn't work.
This can be solved in two ways.
by giving
overflow: hidden
to class="unit-75 content"
or by clearing the div
<div class="unit-75 content" >
<!--All you HTML-->
<div style="clear: both"></div>
</div>
You can use overflow:hidden on the wrapper element (body tag, a particular div etc) to force it to adapt to the height of elements contained IF your layout uses floats.

Force browser to always scroll horizontally?

Is there a way to force a browser to always scroll horizontally?
Without setting a fixed width on any divs?
I've made it so that the Div in question (which contains a table) will scroll with:
overflow-x:auto;
But I need the browser scroll bars to be used, and not scroll bars on the div itself.
The page code looks similar to this:
<div id="content">
<div id="MenuContainer">
.....various divs for menu
</div>
<div id="TableContainer">
...ASP Gridview that renders a table
</div>
</div>
I want to be able to make the page scroll horizontally using the browsers scroll bars, Firefox does this already with the code as it is, but IE6,7,8 all force the content in the "TableContainer" div to go below the menu.
The menu and the table container are both floated left.
Try to set this:
{overflow-x:scroll}
on the body of css
I presume you're using floats just now? you can force floats to sit side by side in IE7 by triggering hasLayout (zoom: 1;) but not in IE8 so I'd use the table display properties instead of floats and feed IE7 the floated version with the hacks or put the IE7 properties in a conditional CSS
try this:
#MenuContainer {
float: left !ie7;
display: table-cell;
min-width: 300px;
background: #cfc;
}
#TableContainer {
zoom: 1 !ie7;
display: table-cell;
}
added jsfiddle

css error - adding a banner messes up the scrollbar of the page

hi
I have this simple CSS code to add a banner to a sharepoint 2010 site - the problem is, when I add it, the page doesn't 'recognize' the additional horizontal space added by the banner, and thus the scrollbar scrolls past the bottom of the page. This happens when windows is maximized as well as when it isn't. Happens in IE, chrome, FF.
EDIT: screenshot of browser scrollbar
banner code:
<div id="header_container">
</div>
css:
#header_container {
background-image:url('/Images/topBanner.png');
background-repeat:no-repeat;
background-color:#fff;
height:147px;
}
Try adding 1px padding and set the width. Im just learning but ive found sometimes wierd stuff happens when you add more code to a site. The 1px of padding has fixed some of my layouts
Also id recommend not using header_container as your div tag. Think about how many items you have in the header.
EG if i had a banner and site name but still needed a wrapping div i would use
<div id="header">
<div id="banner"></div>
<div id="headerlogo"></div>
</div>
or
<div id="headerbox">
<div id="banner"></div>
<div id="sitetitle"></div>
</div>

IE7 Not Playing Nice with My Floating Sidebar

I'm trying to get a dynamically sized sidebar to float in the upper right portion of my web pages (but below the header and nav) and have the main content on the page flow around it (sort of in an "L" shape except with the bottom part of the "L" really thick). The width and height of the sidebar will vary from page to page so I can't use any hard values.
My css looks like:
#main {
width: 850px;
height: auto;
}
#sidebar {
width: auto;
float: right;
}
(plus some padding, margin, and background color code I think is inconsequential)
My html looks like:
<div id="wrapper">
<div id="header"> /* header stuff */ </div>
<div id="nav"> /* nav stuff */ </div>
<div id="sidebar">
/* my sidebar content, really just an h3 and a ul */
</div>
<div id="main">
/* lots of content here */
</div>
</div>
I don't completely understand why I have to have the sidebar div first, but it this code works fine in FF, Chrome, Safari (Windows), and IE8. But on IE7 (and IE6, which I don't care about), the main content gets pushed down below the bottom of the sidebar, as if there was a "clear: left" on the sidebar div (but there isn't).
I have a feeling this is one of those evil IE7 non-compliance bugs, especially because IE8 behaves exactly like the other browsers. But I have no idea how to fix it.
Any ideas? TIA.
First, make sure you are using a doctype that will put IE7 into strict mode (see http://hsivonen.iki.fi/doctype/ for an explaination). if that doesn't do it, it may be that you need some play in your margin widths.
The reason why you have to have the sidebar div first, is since div is a displayed as a block element anything after it, will be below it (unless you float the main div).
By floating the sidebar div and putting it first, the browser knows it can display the main div to the right of the sidebar. You could get a similar effect by adding float left to the main div and removing the float from the sidebar div and moving it after the main div.
From what you describe, it sounds like your sidebar is behaving as if it was a block element. Maybe try some different display options like inline-block. I'd also try experimenting with the width min-width attributes. Hard to say though.
Bingo! Fixed! The guys who mentioned playing around with widths and margins get the gold stars tonight. It turned out that all I had to do was remove the fixed width on the main div, then add some padding on the right to create a gutter for text and images. Tested and confirmed in FF3, Chrome, Safari (Win), and most importantly, IE6 & IE7 (even though I still hate IE).
I guess the IE rendering engine was saying, "I see that you want your main div to be 850px wide, but with that sidebar you stuck up there, I don't have room so I'll have to shove it underneath the sidebar". Of course, every other browser's rendering engine said, "Dude, I totally get what you're trying to do! No problem, I'll lay out everything exactly as you'd like it."

Resources