This is a tricky question, but I will do my best to ask it:
I have a middle column of content and I want to add columns to the left and right of it, but I want them to "hug" the middle column. How can I center the middle column always and have the other two columns "hug" it?
The columns have a fixed width of 750px and basically when the viewport is maximized it should be something like this on a big monitor:
-------------------------------------
| | | | | |
| | | | | |
| | left | mid | right | |
| | | | | |
| | | | | |
-------------------------------------
and when the window is not wide enough, the left and right columns should get cut-off, but the middle column should still be centered and visible (assuming they don't make it too small horizontally):
-------------
| | | |
| | | |
le|ft | mid | ri|ght
| | | |
| | | |
-------------
Where "le" and "ght" are off-screen and not visible in the viewport.
I'm interested in any ways of accomplishing this. Currently I'm using
margin-left: auto;
margin-right: auto;
to center the middle column, but if there are ways to accomplish this without that, by all means =)
Thanks for reading this tricky question. I hope I got my idea across.
(If you can think of a better question title, feel free to edit it. I wasn't sure what to put)
P.S. Each column is actually made up of a few divs itself, (blocks that make up a column), I'm not sure if that makes the problem any easier to solve, or if that totally changes the problem...
Something like this ? http://jsfiddle.net/ndtLX/
i'm using an absolute positioned div above 2 floated divs, each large 50% of the container.
the problem is that on the left and right columns, the off-screen happen on the other side, and not on the same side as you asked...
You could also try floats to see if that gives you what you want
.divLeftCol
{
float: left;
}
.divRightCol
{
float: right;
}
<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>
Related
I have a few block-level (or inline-block, it doesn't matter) elements with pre-defined dimensions. I want them at the top-right portion of a container div. I want them being positioned one next to the other, from top to the bottom. When there isn't enough space, I want a new column at left of the previous one, also going from top to the bottom.
In other words, I want something like this:
.------------.
| 4 1 |
| 5 2 |
| 3 |
'------------'
How can I achieve it using a pure-CSS solution with a clean HTML?
Even better if it can adapt itself to the available height.
Alternative effects that I can achieve (but are not what I want):
With a combination of column-width: <something>; column-gap: 0;, I can achieve this effect:
.------------.
| 1 4 |
| 2 5 |
| 3 |
'------------'
With float: right;, I can achieve this effect:
.------------.
| 3 2 1 |
| 5 4 |
| |
'------------'
If you change the writing mode, you can get the columns module to do what you want:
http://tinker.io/9f846
ul {
columns: 10em;
direction: rtl;
}
li {
direction: ltr;
}
I am starting an application that will use HTML / CSS. While I'm fairly familiar with the two technologies, I am having problems creating my default layout. Basically, I want the following:
|-------------------------------------------------------------|
| |
| This section will be as large as the content that it holds |
| |
|-------------------------------------------------------------|
| |
| |
| This section will take up the remaining available space. |
| No matter what. If more space is required, scroll only this |
| content. |
| |
| |
|-------------------------------------------------------------|
| |
| This section will be as large as the content that it holds |
| |
|-------------------------------------------------------------|
How do I use HTML / CSS to acomplish this?
This ought to do it: http://jsfiddle.net/ratbum/TUytU/4/
Using HTML5 and CSS, we will call the top section <header> and the bottom, <footer>, for semantic reference. We will also call the center section of your content <article>.
If you set both the <header> AND <footer> to position: fixed; only the center section or <article> will scroll. Check out my result in the jsfiddle linked below. Easy peasy!
Example:
http://jsfiddle.net/codesushi156/5wc25/4/
I am trying to create a page that has a width that adjusts to the screen with a fixed width column on the right. So for example:
| | |
|-------Content------|--Column--|
| | |
| | |
|---Content---|--Column--|
| | |
| | |
|-----Content----|--Column--|
| | |
http://www.reddit.com/ would be a good example of this.
Thanks
This blog is pretty useful for grabbing complex layouts.
ultimate-2-column-right-menu-pixels
this is essentially what reddit does: http://jsfiddle.net/pxfunc/rCG84/
the side div 1.) is above content in the html, 2.) is set to float:right;, and 3.) given a specific width (width:300px)
<div id="side"></div>
<div id="content"></div>
the content div will adjust with the window size
I have a list that looks like this
--------------------
| | |
| 1 | 2 |
| | |
| 3 | 4 |
| | |
| 5 | 6 |
| | |
--------------------
(it's a simple <ul> with <li>'s)
the container of this list, let's call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.
How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can't add any classes to these list items :(
I tried with margin-right: 10px on the <li>'s and margin-right: -10px on the <ul> but that doesn't work :)
An example with margin-right.
edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/
Not terribly elegant, but simple enough.
I'm usually a Web technologies enthusiast, and I'm all for the no-tables-design thing, but right now, it's somewhat pissing me off. :/
I'm trying to achieve something that would have been extremely easy with tables, but that seems overly complex/impossible using floating elements. Look at the following:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
+-----------------+
Where #info has a fixed width, and must be floating right to #contents. #contents should take whatever's left of the width.
In the simple design where both #contents and #info are present, this isn't too complex. They are both fixed-width, have the float:left property, and fit very well.
However, on certain pages, #info won't be present. When it's the case, obviously, #contents doesn't scale to fit all the page.
The most obvious solution was to give #contents no fixed width so it'd scale, and change #info to be float:right. Past the minor other changes it required, it didn't have exactly the desired behavior, since it breaks the column-like layout when #contents is taller than #info:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
| +---------+
| |
+---------------------------+
Even worse, inside #contents, there are other <div>s with the border-bottom property set, and the border passes right through #info too in the following fashion:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------|-|-------|
| | +-------+
| +---------+
| |
+---------------------------+
So, considering all this, how can I give #info a fixed width, have it float to the right of #contents, but keep the column-like design and have #contents occupy the whole screen when #info isn't there, all of this making sure there are no visual artifacts, and without resorting to more than one stylesheet?
This would be the desired result on a page where both #contents and #info are present:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------| | |
| | +-------+
|-----------------|
| |
+-----------------+
And this is the desired result on a page where only #contents is present:
+---------------------------+
| #contents |
|---------------------------|
| |
|---------------------------|
| |
+---------------------------+
I hope this wasn't too confusing. I'm out of brain power.
Float your #content div too, it stops it from leaking like you're having, and it will fill the entire page when #info is gone. If when you dont have #info you can change #content somehow, #content could have a position relative and some right padding, with a position absolute in #info to fill its place.
I emailed my web teacher about it, and the answer is quite simple. It doesn't work with Internet Explorer (at least version 6), but it degrades nicely for my case.
With #info set to float:right, it suffices to have #contents set with the property overflow:hidden. And voilà.