ShinVe
November 23, 2015, 10:25pm
1
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>
<div id="right_side">
<p id="vertically-centered-text">vertically centered text</p>
</div>
</div>
Hi there ShinVe,
here is one possible solution…
[code]
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.
[/code]
coothead
ShinVe
November 24, 2015, 12:08am
3
Perfect, thank you coothead!
No problem, you’re very welcome.
coothead
system
February 23, 2016, 7:42am
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
