Question

I want to align two sidebars and one centered image in height.
Additionally the sidebars (which contain text) should be vertical aligned in the height from the outer container.

I made a fiddle which describes the problem:
http://jsfiddle.net/SW3DT/

When having this example on a fullscreen you see everything correct but when you look into the fiddle html preview (or any smaller view) it doesn’t work anymore.

So there are following problems:

1. Align aside and center-containers horizontal (position: absolute, left, right)
2. Align the child object from the asides (in this case the p’s) vertically (breaks the absolute)
3. Do this all dynamically so that it can be used on different screen sizes

How you can see all three points together make it hard to code this with css.

Does anyone have a solution?

Furthermore:
How could I define reusable css-classes for such tasks?

Best Regards,
bsus

Answer 1

If I did understand you question correctly, you kinda want a centered wrapper with three columns, having the left and right column occupying 200px of width. If this is the case:

See this Fiddle Example

HTML:

<div class="content">
    <aside class="column right">
        <p>
             text...
        </p>
    </aside>
    <aside class="column left">
        <p>
             text...
        </p>
    </aside>
    <div class="column center">
        <img class="home_image" src="path_to_image.png" />
    </div>
</div>

CSS:

/* the main wrapper */
.content {
  position: absolute; top: 50%; left: 50%;
  width: 800px; height: 500px;
  margin-left: -401px; margin-top: -251px;
  border: 1px solid #D9D9D9;
}

/* columns */
.column {
    position: absolute; top: 0; bottom: 0;
    width: 180px;
    padding: 10px;
}

.column.left{
    left: 0; background-color: #F2F2F2;
}
.column.right {
    right: 0; background-color: #F2F2F2;
}
.column.center {
    left: 200px; right: 200px;
    text-align: center;
    width: auto;
}

.column.center img {
    border: 1px solid #111; border-radius: 22px;
    width: 128px; height: 128px;
    margin: 0 auto;
}

Furthermore: How could I define reusable css-classes for such tasks?

You can see the .column class that is applied to the .left, .right and .center elements, thus being reused on all three.