I'm trying to make a 2 column(sidebar) responsive theme for SMF forum software. I wanted to stick a column on the right that would expand 100% the height of it's parent.
FYI, I just started converting the default theme, into a responsive theme.
Usually, I don't have problems with these issues, or responsive design. However, I cannot figure out why the height of the sidebar, keeps matching the height of the header.
The sidebar HTML is outside the header HTML, and before it. Yet, when you give the sidebar say a fixed width of 400px via inspect element, it also expands the height of the header. I am baffled by this, as code-side it doesn't seem to make sense.
I figured if I had another set of eyes, someone can help me figure this out.
http://xarcms.com/index.php?theme=3
Thanks.
The main thing that I see is that you're styling the wrong element. You have your sidebar wrapped in an <aside>, which is not floated, nor does it have a size declared. The sidebar content that you have styled is, therefore, expanding to 100% the <aside> which itself is shrink-wrapping down to the size of the content. You need to shift your styles to the <aside> to get it to behave more correctly.
Aside from that, I don't have much else for you at the moment, but the above should get you started. From there, I'd double-check your CSS to make sure you're not getting too broad a scope on one of your styles. You might want to also look at your HTML structure and make sure that you only nest things down as far as absolutely necessary. If you're still having trouble, see if you can get a trimmed-down version that still shows the problem, so that we can more easily help you.
To fix this problem, I placed the and areas outside the div container. I was able to remove 4 un-needed divs(mostly wrappers) because of this. So In a rough nutshell...
Switched To This:
<div width wrapper>
<header></header>
<aside floated></aside>
<section></section>
<footer></footer>
</div>
Rather Than:
<div width wrapper>
<section>
<header></header>
<aside floated></aside>
<div></div>
<footer></footer>
</section>
</div>
Which seemed to be cleaner and make more sense.
Related
I have a <header> that is position: fixed; to the top of the display.
The natural consequence of this is that <main> ends up going underneath the fairly sizeable <header>.
I've faced this problem before and have solved it with a simple margin-top assignment on <main>. Here the issue is a little different though.
The height of the <header> is variable and unknown. It has top and bottom padding of 5px and a bottom margin of 5px. It has no explicitly set height of its own; it is decided by the content within.
The largest element in the <header> is an image that is assigned its height as 20vh. There is also an <h1> and <h3>, again sized using <vh> units. I know of no way that allows me to offset <main> so it is always below this dynamically-sized, responsive <header>.
I've been browsing SO but have found no single accepted solution to solve this. Many ideas rest solely on catching window resizes with JavaScript, getting the computed height of the header and assigning the top of main to match. I fear this approach will decrease performance and also introduce annoying page jumps/leaps etc. as JS catches up with the scrolling.
How this is kind of problem usually tackled in responsive design? Ideally, I'm looking for a pure CSS solution to this problem, or some kind of workaround for `position: fixed;'. Failing that, an elegant and versatile JS solution that doesn't hinder performance. This issue is causing me problems, because none of my usual attempts to resolve absolute/fixed positioning headaches are able to help.
Any advice would be much appreciated.
-Ilmiont
I would check this post. They mention pushing the content down with a second header or using javascript.
My guess is javascript would be a cleaner approach so you don't have extra content and unnecessary requests being made to the server.
I'm working on a responsive layout that is basically boxed on the right side so the banner area runs flush with the sidebar/aside for desktop and wide views.
I can't seem to get it flush on the right side without making the width of the container fixed width, which means even a 1px difference in browser width makes it hang over or not span far enough.
Any suggestions? I have a jsfiddle with my markup here: http://jsfiddle.net/MtQ5J/
Here is the specific html markup:
<div class="hero-container">
<div class="hero wrapper clearfix">
<h2>
We thrive on solving other people’s problems in a collaborative setting.<br />
This means starting by understanding the client’s needs and goals.<br />
Listening to and understanding our clients is the key to how we work.
</h2>
</div>
</div>
It's H5BP, Normalize, and mobile first.
Example screenshot:
UPDATE
I added a container around the header, closed it before the hero area, then re-opened for the main content. I then floated a empty div next to the hero # 20% width, set the hero to 80% width.. this kind of works but I would have to MQ it to death to get it perfect.. still looking for a more "fluid" solution if possible!
jsfiddle updated
Add this rule to your CSS:
body{
margin:0;
padding:0;
}
JSFiddle Demo
JSFiddle Code
Is this any help to you?
http://jsfiddle.net/panchroma/5kpkc/
The only change I've made is that I've added
.main.wrapper{
float:right;
}
to the CSS so that the wrapper class floats to the right instead of being centred on the page.
You might need to refine this some more with media queries if you want more control over the layout of the aside as the viewport narrows
Good luck!
I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.
However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.
Here's the link to see it:
removed
As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.
PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.
Thanks in advance
Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
From main-style.css line 5:
overflow:hidden
and main-style.css line 127:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content
(also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
<div class="centerText messageWrapper">
<div class="messgaeHeader">
<div style="float:left; width:50%">
From: 12345678<br />
</div>
<div style="float:right; width:50%; text-align:right">
Date: 123456789<br />
</div>
</div>
1234567890
</div>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
I have been working on a project using Compass with the 960.gs plugin. It's worked quite well so far, giving results that look nearly identical across browsers with little effort. I've run into a small problem, however.
The div I am using as 960's main grid container has a vertically tiled background in CSS. I need this background to extend all the way to the bottom of the browser's viewport, but it would seem that 960's use of floats is somehow conflicting with this.
Despite the container's height being set to 100%, the background only extends part of the way down the screen when overflow is unspecified. Setting overflow to hidden fixes it, but hides the scrollbars!
How can this be dealt with? I've used Webkit's inspector look through the code and DOM for problems and as far as I can see there's nothing that should cause this behavior.
It's not online and the code is too large to copy and paste here, but I will recreate the structure in abbreviated psuedocode:
<html>
<head></head>
<body>
<primary background div>
<960 container div>
<header div>Stuff</div>
<main content div>More Stuff</div>
<footer div></div>
</div>
</div>
</body>
</html>
I've scanned the CSS is there is nothing problematic. I'm not floating anything and the most I'm doing is small padding and margins...
It's hard to tell without the actual code, but the prerequisite for block to stretch at 100% is one of these:
It's parent have an absolute set height (like 100px etc.).
Or all parent of this block till HTML tag must have height: 100%.
So, look at this example: http://jsfiddle.net/kizu/UvAxV/ — there on frame hover HTML and BODY get height: 100% and the wrapper stretches to 100% too.
So, in your case, you must to make sure that HTML, BODY and “primary background div” all have height: 100%
Sample page
On the sample page I have set div#content {
padding-bottom:20px;
} which works well if 20px is enough to leave the footer beneath the content div. However, if the footer changes size, I'll need to change the amount of padding-bottom aswell. I want a more flexible solution.
Is it possible to fix this without moving the footer outside of the content-div?
Update:
found this page that describes a solution to the problem, but the author also states that:
There is only one limitation
You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.
If you have a lot of text in your footer then it's also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there's nothing to worry about – just set your footer height to a pixel value and away you go.
Which leads me to believe that maybe what I want to achieve is not possible without JavaScript.
Because the height of the footer is unknown beforehand, you can't set an explicit height (in px or em) in the CSS. You can, however, get the footer height with javascript and set your content padding-bottom to it. One line in jQuery:
$('#content').css('padding-bottom', $('#footer').outerHeight(true) + 'px');
The jsfiddle: http://jsfiddle.net/blineberry/cFSX4/19/
You'll probably want to set the padding-bottom in your CSS to your best guess of the footer height and let the javascript make the minor adjustments as necessary.
Tell me if i got you right check this link out, if not just try to explain in other words whats the problem.
http://jsfiddle.net/2cJsf/19/
*You can use "position: absolute;" but thats your choice, I dont like using its buggy sometimes when the website has lots of divs with positions.
Personally, I put my footers on their own outside of the content div, this gives me a more consistent and flexible approach.
My code may look like this
<div id="content">My content here</div>
<div id="foot">Copyright © 2011 mywebsite.com. All rights reserved.<br />my random resize content here</div>
Then with CSS I may do something like this
body {margin-bottom:10px;}
#content {padding:5px;}
#foot {padding:10px;}
Just as an example but obviously style to suit your page and code.
I hope this helps.