Here is my reduced test case on codepen: http://codepen.io/RonStrilaeff/pen/pKBdf
I have two fixed width sidebars on the outside edges of my page with the content autosizing between them … that works. It is required that one side bar is left an one is right.
However, when the screen gets smaller, I want the sidebars pushed down below the content. That basically is the opposite of what my demo does. :-)
What I want to know is what kind of css magic do I have to do inside my media queries to make it behave that way? I’m thinking it has something simple to do with float or clear that I have not grasped yet. Or maybe I need to start with a different order to my divs in the html.
Any help is greatly appreciated.
Some principles gleaned tips from Chris Coyier's site and forum helped me.
Here is the solution I went with (a fork of the first codepen):
http://codepen.io/RonStrilaeff/pen/oefav
put the content div first with specific margins to match sidebar widths
made the sidebars normally fixed (top, left or right) within the wrapper containing both sidebars and the content
at whatever width needed, made each sidebar static and float left or right (below content is natural because of source order) while removing the respective content margin
Voila!
I’m very happy with this since it does not involve much code at all and seems pretty standard … ie: no “tricks” :-)
Related
I have 3 separate graphical elements; the header, the footer, and the content-background. The content background is repeatable, and my intention is to allow the page to dynamically adjust without breaking any flow of the page. I've tried to achieve this by applying the 'header image' to a div at the top of the page - the 'content-background' to the container (of both the content area and the menu), and finally the 'footer image' at the bottom of the page - outside of the container.
It seems to work well when I have very limited content on the page - however, the moment I put a of content in the content area, it just hangs out over the edge of the images and looks awful, as opposed to repeating the background and nudging the other divs down.
I don't want to introduce overflow:scroll, or anything like such - and I'm desperate to try and avoid JavaScript. I'm sure I've made a flaw somewhere in my thinking, but I'm not too sure where. I have a feeling that I need to do something regarding positioning - and changing the heights of certain divs (container, content are still defined as the base; but whatever I set it at, it either has no effect or causes the page to look bizarre).
Instead of copying-pasting the walls of texts, I've posted the address to a temporary section on my website.
It seems like you have a few issues. Setting a height on #container is a problem, and not clearing your floats of your #content and #rightbar elements is another problem. My belief is that fixing both of those things will give you the result you're expecting.
From what I understand from your question, you want your div tags to become bigger as the text gets more and more.
The solution is simple: Use min-width instead of width. it will adjust itself
i'm having a slight problem which i can't seem to figure out how to solve in a wordpress layout.
I have 3 columns which shows the recent posts with each one being an individual by itself, but as the div increases in height, it pushes the next line of div downwards, but what i wanted is just each div having a 20 px margin with each other.
here's a picture of what is happening
here's a picture of what i want
You might want to consider using Masonry to implement the layout you're trying to achieve.
HTML and CSS alone will not get you the effect that you are looking for. For the full effect, and a well put together tutorial, visit:
http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/
I asked for help earlier which was amazing and I am grateful for it, but I'm in need of your guys' expert assistance.
http://www.mrandmrsmagic.com is the site I'm working on and after simplifying the code and not having the positioning be an absolute, the menu bar for some odd reason isn't scaling with the site. Also the testimonials tab is cut off, which I'm guessing is due to the width not being long enough?
Also, on smaller monitors (15 inches+), they're saying that the video gallery and photo gallery are off to the right three inches, is there a way I can add padding or a margin to make them stick to the middle like they do with a larger screen? Any and all help would be appreciated.
Ok...
Your Gallery is in a div that has been given a specified position.
e.g
#gallery {
position: relative;
left: 950px; /* This needs to be removed */
top: -560px; /* This needs to be removed */
}
That will always force the div off to the side.
What I think you want and correct me if I'm wrong is two columns.
That's actually quite easy to do and I've set up an example here to get you going.
In my example the two columns are floated left and right to give them space in the middle and the two divs with the class .placeholder provide the hight and width.
If you create something similar replacing each .placeholder with your image and gallery respectively then you should be able to keep videos within the main content.
Hopefully this helps.
Edit
I'll try my best to explain everything properly.
The content div in the example I linked was just there to wrap around the floated columns in that example. You do not need to duplicate it.
The columns are floated left and right to separate the content and place it side-by-side. Adding a float simply means that they are to position themselves as far in the given direction as possible within their parent container.
Floating content breaks the flow of the page though so the parent needs to have the class .clearfix added to prevent any content below the column from being disrupted. It also allows the parent to have height.
Positioning the gallery differently for different monitor widths will only work with browsers that understand media blocks within css which ie7 and ie8 do not. You are much, much better off with a two column layout.
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
#RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
http://jsfiddle.net/qr7WB/
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE
Is thee any benefit to wrap Main content and Context div in a content div?
Column can be increased. like 1. Main content 2. left sidebar 3. right sidebar.
My main question is is there any benefit to wrap all in another div?
(source: wpdfd.com)
There can be. So the answer is... it depends.
Generally I will wrap adjacent divs like this, particularly if there is a semantic reason to do so. But even if there isn't there's next to no overhead. Often you will find it much less awkward if you have this kind of nesting. For example, it would make it much easier if you wanted to float one or both child elements.
In this case you could argue your document consists of:
Header
Content
Footer
On this page there are two columns to the content but on other pages there might not be. Other pages might be a single column or have five. Whatever the case, having that content div wrapping all the columns will make a general layout (for all cases) much easier.
Is it necessary? Absolutely not. You could make it work either way. Both approaches are fine and work.
Use it if you intend to "group" the positions of main content and context together, so that you for example can position them relative from each other without influencing the other elements such as header and footer negatively. In semantic/SEO terms that extra div has in fact no impact.
If the sidebar and main-content divs are always together, I think the second option is smarter, because you can use the id for the outer-content wrapper for both css and javascript to manipulate the entire area at once.
The only reason to NOT do it, other than a strong minimalist attitude (which I tend to have) is if you want each area of the page to be truly modular and independent. Experiments like csszengarden are founded on such a principle. This philosophy, in a nutshell, thinks that divs and other elements are chunks of information that should have the ability to be arranged in any way a designer wants (putting your header at the bottom, for instances, or swapping the main-content with the sidebar div, etc). By using a wrapper div, you are forced to use techniques like fixed positioning to break that inner div out of the wrapper (maybe to put it in the upper left corner, for instance).
But aside from that, semantically the two chunks seem to go together, so wrapping them is not a hack. Look forward to the HTML 5 element <aside> which is explicitly meant for side notes like the one in your example.