CODEWITHSUNDEEP
htmlcss
sova
sova

Reputation: 5650

right-align and left-align to the center column

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...

Upvotes: 1

Views: 785

Answers (2)

NicolaPasqui
NicolaPasqui

Reputation: 1120

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...

Upvotes: 1

Matt
Matt

Reputation: 3848

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>

Upvotes: 1

Related Questions