I have a two column layout, The left hand column is flexible in size, but the right hand column has a fixed width. When you resize the browser, the left hand column shrinks to allow the right hand one always to fit.
At a set size however, when the left column reaches a min width (as dictated by the overall width of the window), we need to stack the columns using a media query, so that they can be unfloated and fill the space available to them.
The problem is that when this happens, the right hand column appears above the left column due to the way the markup has to be written. I need the right hand column (containing less important info) to be below the left hand column on smaller screens.
Is it possible to have the right column naturally fall below the left one? Either by achieving the size effect having it further along in the markup, or through some pure CSS solution?
I don't want to have to resort to javascript to change the element order, and if possible I don't really want to have to have duplicate divs with the same content to hide/unhide, however I understand if that's the only viable solution.
There's a demo fiddle here: http://jsfiddle.net/jmxu2/
<div class='column-contain'>
<div class='c-right'>
The right floated div is secondary content, but fixed width. It should drop below the primary content when there isn't enough room.
</div>
<div class='c-left'>
This left div is primary content, but non fixed in size. When there isn't enough room to nicely display side by side, this div should be on top.
</div>
</div>
The right column will appear on top because it is first in the HTML. If its not possible to reorder the elements in HTML try adding the following to your media query:
.c-left {display: table-header-group; }
.c-right {display: table-footer-group; }
This will place each elements with those classes in a pseudo table and reorder them in the flow accordingly. The elements displayed as headers appear above those displayed as a footer.
Related
I have a simple 2 column layout within a centered background div.
The two columns are inside a larger div which is centered in the page. The issue is that the right column may be 1-2 pixels out and will be pushed to the bottom of the first div. How can I stop this from happening? I would prefer the second column to push outside to the right of the surrounding div.
A couple of options. You can float the left column left and the right column right. (If you do that, give the container overflow: hidden so that it wraps around the columns, and also make sure the combined widths of the columns are a bit less that the width of the container, to prevent the problem you are having and also to create a space between the two columns.)
Another option is not to float the main content column but instead (assuming it's the right column) to give it a large left margin that is slightly wider than the width of the left column. Then float the left column and just make sure it comes before the right column in the HTML.
there are other methods still, but these are perhaps the two most common.
It would be good to see your page code if more advice is needed.
The reason why the second column aligned bottom of the first column is because the sum for both column widths have exceed the size of that container, or maybe because you didn't applying floats (left/right) to that columns.
I would prefer the second column to push outside to the right of the
surrounding div
That means you want to put the column out from its container. You can apply negative value to achieve this.
Example:
.right{
position:relative; /* apply position relative */
right:-20px; /* out from the container by 20px on right */
}
Have a look at here http://jsfiddle.net/qiqiabaziz/RseAp.
I'm trying to create a two columns layout where there is one column floated left, and there are two DIVs floated right. The sum of the two right DIVs is a height that is less than the height of the left DIV. I think I'm missing some CSS that allows this to happen. As of right now the second right DIV is appearing below the end of the left DIVs because of the height difference.
It's probably easier to view the page itself to see the issue. I need to have the DIV close the end of the right content so that it appears that all of the text is within a box.
http://brimbar.com/no_crawl/RiverHollow/history.html
I can add a negative margin to accomplish this, but I'm assuming I'm going about this all wrong.
Un-float both (or all, if you plan to add more) of your righthand divs, put them inside a wrapper, and then give that wrapper a margin-left value equivalent to the width of your left div.
screenshot: http://easycaptures.com/fs/uploaded/677/0314515048.png
demo: http://jsbin.com/aviyok/1/edit
You should also remove the huge negative margin on your right content div; that breaks very easily.
I am attempting to implement the following layout without using javascript and without using tables:
There are a LOT of rows on a page. Each row is filled by four content elements, the tallest of which determines the height of the row. Each content element has two other elements, in this case, an image and a caption. The image is aligned to the top of the row while the caption is aligned to the bottom.
In the HTML structure, the image and caption must stay together in the content element.
Some solutions I've tried:
Splitting each row into two: a row of images and a row of captions, separates the images from the captions.
Using the famous equal height column div structure results in an ugly absolutely-positioned Matryoshka Doll arrangement of divs.
The issue with tables is that the page will be made MUCH more dynamic in the future (rearrangable content, fluid layout, dynamic searching, content of varying width), and tables will be extremely annoying to do this with.
If I'm imagining your markup correctly, perhaps this will work for you:
http://jsfiddle.net/Puppies4Life/Fd94X/1/
I absolutely positioned the .caption to the bottom of .row. I made it a point to position .caption to .row instead of the immediate parent .content because of the varying heights of .content. The image remains in the flow of the document. I Added some additional padding to the bottom of .row to account for the text and put in a simple clear fix (I suggest using a better option in your production code)
Hope this helps solve your problem or possibly ignites an idea or two!
I want a layout with two columns, two divs, where the left one has fluid width and the right one has fixed width. So far so good - see jsfiddle below - however, the height of the right column must be in relation to the height of the left column. So that if I have some content in the fluid column and would resize the browser window, thereby increasing or decreasing the height of the left column, the right one should follow and getting the same height.
What I got so far: http://jsfiddle.net/henrikandersson/vnUdc/2/
Edit: Resolved, see comment below
Ah, the ol' two column layout. Unless you want to resort to JavaScript to track the height of one column to adjust the other, you're not going to be able to do it in the way you expect. Using height="100%" usually doesn't work in these situations, either.
What you can do is something like the old Faux Column technique. The div's don't resize, but you have a background image on the parent element that tiles vertically, giving the illusion of equal columns. Old school, yes, but effective.
You can use JavaScript to get the height of the left div, then set the right div to this height.
To get height of the left div:
var divHeight = document.getElementById('left').offsetHeight;
To set height of right div:
document.getElementById('right').style.height = divHeight+'px';
Your JSFiddle example fixed.
So, I got an answer to my question from #thirtydot (see comment above):
Do you need to support IE7? If not, you can use display: table-cell
I'm creating a webpage where I need a content column in the center of the page (including a fixed width) and two non-scrollable (fixed) columns at the left and the right side of that content column (including a fixed width also). The left column needs to be aligned to the left side of the middle content column. The right column needs to be aligned to the right side of the middle content column.
If the content column gets a lot of content the middle content column should be scrollable with a scrollbar at the right side of the browser. But the left and right columns must not scroll, but stay fixed against the top of the browser.
When resizing the browser width then the left+middle+right columns keeps their width and centered in the middle of the webpage. At the left side of the left column and at the right side of the right column the whitespace will increase/decrease on both sides with same width.
In my screen example you find the concept of what I'm trying to solve.
I tried to search for this problem at stackoverflow and google, but I only found examples wich are a bit different.
Who knows how to solve this problem?
example in JSBin
- (see updated version below, this is buggy, fixed columns are sticky)
the green is not required it's there
to show the wrapper is actually
centering the whole lot
absolutely
position the left and right wraps
first so the the position:fixed
columns don't go to side of viewport
Update
non-buggy version now in JSBin
hmm that was more difficult than I thought it would be; this one works in IE7, 8, Safari, FF3.6, Opera, Chrome
view the source code for the notes, especially interesting is pointer-events, without them the newer browsers will not click through (select text or click a link) an "overlaid" div, which is what this layout is doing it's overlaying an Absolutely Position div and using absolute positioning and relative position to get around the scrolling, vertical and horizontal, issues there was with disappearing content and sticky fixed divs
Updated to use jQuery as per comments
Example: here