Trying to achieve this css layout

I am trying to achieve this layout:

Can someone tell me the best way to do it?

The text on the blue box reads “outer parent div.” (it’s hard to read.)

Of course I can use more divs (or other hooks) if needed, the image is meant to illustrate the layout I want, not the code I use.

Here’s my attempt, without any of my css attempts:

<div id="parent">

<div id="left_side">
  <div id="div1"></div>
  <div id="div2"></div>

<div id="right_side">
  <p id="vertically-centered-text">vertically centered text</p>


Hi there ShinVe,

here is one possible solution…


untitled document body { background-color:#f0f0f0; } #parent { display:table; width:90%; margin:auto; border:1px solid #999; border-spacing:10px; background-color:#ccc; box-shadow:5px 5px 5px #999; color:#666; } #left_side,#right_side { display:table-cell; width:50%; } #right_side { padding:4% 0 4% 4%; border:1px solid #999; vertical-align:middle; background-color:#fff; box-shadow:inset 0 0 20px #999; } #right_side p { max-height:310px; margin:0 4% 0 0; overflow:auto; } #div1,#div2 { height:150px; padding:4%; border:1px solid #999; background-color:#fff; box-shadow:inset 0 0 20px #999; } #div1 { margin-bottom:10px; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat.



Perfect, thank you coothead!
(Pretty fancy demo, too!)

No problem, you’re very welcome. :sunglasses:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.