http://jsfiddle.net/ZGhEe/
I've read several tutorials and they all say use float or use relative positioning, but all the techniques I try aren't giving me expected results. This is a pretty simple thing to do, but I want to do it the "correct" way since using html tables is punishable by death. Any help?
If I use float left it stacks unnecessarily when the browser gets narrow..
When using float and you want it to show side-by-side, you need to set the width and make sure the sum of the widths are less than the width of the container, like so.
If you want to make your browser fit it all of the browser. Make your browser fluid.
i.e. Give % while defining the width of the layout.
Related
I may well be asking for the moon on a stick, here, but: I'm trying to figure out how to get a two-colour background to delineate the two columns of the main content.
The background must be full viewport width (edge-to-edge), and the central content is responsive with a max-width of 960px, split into two columns; the first column is 2/3 of the width (max of 640px wide) and the second column takes up the remaining 1/3 (max of 320px wide). Probably the easiest way to explain it is with a GIF:
As you can see, the left-hand part of the light blue 'sidebar' background colour always lines up with the left side of the actual sidebar column. It was pointed out to me that the checkout on woothemes.com has pretty much this exact same effect (although I think you need to add something to your basket to see it). They appear to have achieved it with linear-gradient, and it boils down to this:
background: linear-gradient(90deg,#fff 53.5%,#f0f4f5 46.5%);
background: -moz-linear-gradient(left,#fff 52%,#f0f4f5 46.5%);
The problems are:
I don't understand these declarations at all - why are the second color-stop's values lower than the first (and why is the -moz declaration's first color-stop a different percentage)? Adjusting it doesn't seem to make a difference, but I definitely need to update the values, as they don't match what I need... but I don't get it.
Although the effect is close, it unfortunately is not perfect: for a start, the stop between the two colours is kinda blurry; and worse, the line does 'drift' when rescaling. Although it's only by a small amount, unfortunately it's enough to kill the illusion with the design I've been given.
I've tried a couple of methods, including variations of linear-gradient and a pseudo-element with percentage & calc()-based offsets, but I'm totally not getting it. I've debated whether this is something I can achieve with some super-clever SVG element handling, but I seem to be totally stuck on something that looks deceptively simple.
Is there a way to achieve this with pure CSS?
I didn't look into the woothemes.com example, but here's my take:
http://jsbin.com/jofeseseyo/edit?css,output
This would need to be adapted a bit based on the rest of the site, but the idea is: one container of max 960px, with two children (66.666% and 33.333% width). Each child has a pseudo-element that is absolutely positioned at the point where the two columns meet. Then they are z-indexed behind everything.
I don't know how the rest of your site looks, so I left the rest a bit arbitrary. The background color columns have a fixed height, right now at 200vh.
Is it possible via CSS to force the background-image which is repeating that it should be completely visible (not cut at the end of the container)? The container-height is flexible!
It should look like on the right side but I get a result like on the left side if the content
grows.
There are two possible ways:
avoid the background-image to overflow (I can't use background-size: contain because it's repeating)
force the container to grow gradually
Is this possible?
this is not the best solution but maybe it will help: if you can ignore IE8 and below, you can use the background-size property, it will allow you adjust the size of the images with percents so they will feet completely to what you need (and will stay in the same position at resize), then you can use the background-position property and move the images little bit for a better result. then, when you will try to resize it you will see that it stays in the same ratio on the screen but the images are getting bigger because of the percents, so make sure to upload bigger images from scratch so when the images will get bigger they will not resize above the real image size.
example: http://jsfiddle.net/fq5dkL51/2/
I am trying to float divs horizontally, however its falling into a new line.
http://jsfiddle.net/nyCrY/4/
It works only if I set width of the #holder higher than its content.
Is there a way to do this without setting the fixed width on #holder?
Thank you!
Not really with pure CSS.
You can use a static width (which you don't want to do), you can use floats + whitespace (which is unreliable), or you can dynamically calculate the necessary width with javascript and set the style's width to that number.
According to this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
I spent some time playing with the float property and the white-space
property to see if I could find a way to fight browser auto-wrapping,
but I didn't have much luck. Page elements which are floated but do
not have a width exhibit a property where they expand to the width of
the content inside them. I thought perhaps if I put a bunch of float
elements inside of that, it might just keep expanding beyond the width
of the browser window. No dice. There is also a white-space: nowrap;
property in CSS which I thought might be able to be exploited to fight
the auto-wrapping, but it only works for text elements, not blocks or
just any old thing you set to inline. Oh well.
So, he basically is saying, no its not possible with just css.
But he goes on to say that you can do some javascript magic to achieve it:
JavaScript clearly has the ability to manipulate page elements and do
calculations on-the-fly.
I have this working fine: http://jsfiddle.net/uwcEw/ - a traditional border layout on css.
What I want to do is have another 5-region border layout within the "middle" of the border layout. Re-applying the same pattern from above I get this: http://jsfiddle.net/6bked/4/ (edited link), which does not work, clearly it is not relative to it's parent container, but i'm not sure how to fix this so i can apply this pattern as needed in a nested context.
Any help? Also if there's a better way to do this (Compass+Sass/blueprint/js layout) I'm open to suggestions.
UPDATE
I also wanted to make clear I only care about this working in modern browsers (Webkit, FF) mostly concerned with Webkit and I am not worried about users who don't have javascript enabled
I'm not exactly the biggest fan of fixed layouts, but if I understand correctly this should be what you're trying to do: http://jsfiddle.net/8Cq9A/.
The dimensions are relative to the browser window, even the nested set of div's. What you needed to do to fix your layout was adjust your inner dimensions taking that into account. For example if your outer left and right div's widths are set to 10% (meaning 10% of the width of the browser window) to split the center div into 2 equal halves, you'd set each of their widths to: (100% - 10% - 10%) / 2 = 40%.
Personally, I'd look into using floats: http://jsfiddle.net/Sf8Kp/. The issue you will run into here though, is if you're wanting equal height columns as seen in the link.
There are MANY articles floating around on how to tackle this though. A few good reads that have been around for a while: alistapart (1, 2), positioniseverything. Search around for faux columns and 3 column [liquid|elastic|equal height] 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