I have a two column layout with a parent div (container) and the two column divs inside. The left column is floated left with a width and the right column has a margin to the left which is the width of the left floated div + 20px. I want this second column to take up the rest of the width provided by the container.
The problem is that floated content placed in the second column and then cleared lower down appears under the first column, a white space appears that's the same height as the floated column. So in the screen shot the < p > tags would be floated left with the second clearing the first as an example.
How can this be fixed? I've included a link to an image as reference. I've used this technique before without problems so I'm not sure what's gone wrong.
Image of problem including CSS in use
Thanks for looking
Related
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.
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 have two columns in my layout. I'd like the right <div> to expand to fill the remaining space beside the left <div>. However, I would like the left <div>'s width to be based on its content - I don't want to specify a specific pixel width or percentage. In other words, no matter how wide the left column becomes, the right column should simply fill whatever horizontal room is left.
Is this possible with purely CSS?
You can use float:left for your left side div.
Check this fiddle, I gave it 3 different size of left side div column.
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 have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.
The two columns do not need to be equal in height.
Additionally, I would like to create a 5px gap between the edges of the two boxes.
Is this layout possible without using a table?
EDIT:
Here's a table version to show you the kind of behavior I'm looking for.
I think one of my answers on another question solves this:
xHTML/CSS: How to make inner div get 100% width minus another div width
Am I understanding your question correctly?
Yes it is! You can float the first column left, and play with margins to create your gap.
http://innonesen.se/test/l-41-mod/
Ths should do it ( tested only on IE6 and Opera ).
Additional feature exist that the main container will stop expanding ,
when sidebar is less then 100px wide .
http://innonesen.se/test/l-41-mod/no-right.html
P.S. sorry , i cant past URLs .. my rep is too low.
Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.
The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.