Vertically Align the text and Image in a DIV box

Question

I have a requirement to create a layout (Layout Image Link below)

Layout Image Link

I want to have DIV boxes vertically aligned along with the space for image and text.

Top portion i want the DIV Box to have the text field in the left and the image on the left.

I want the side bar to be split into 2. Top portion and bottom portion

Bottom portion i want to have 2 div boxes side by side vertically aligned with the image on the left side and text on the right hand side

Height of the DIV boxes should expand based on the text input, if there are more text lines (Ex: in the top part DIV box) then the 2 Side by Side DIVs should be pushed down.

And same with the 2x2 side by side div boxes.

Also i should be able to add the 2x2 div boxes in the bottom portion based on my requirement

Please help me in getting this layout created.

Answer 1

This will help you on your way ( http://jsfiddle.net/h7funt7k/2/ ):

HTML:

  <p><span style="font-size: 10pt; font-family: verdana, sans-serif">Sample Text</span>
  </p>
  <p><span style="font-size: 10pt; font-family: verdana, sans-serif"></span>&#160;&#160;</p>

  <div class="sidebar" style="background-color: #f00">
    <center>
      <h3 style="color: #0066CC">sidebar1 </h3>
    </center>
  </div>
  <div class="sidebar" style="background-color: #f00">
    <center>
      <h3 style="color: #0066CC">sidebar2 </h3>
    </center>
  </div>
<div class="topbox" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Top box</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Service Governance</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Change Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">People Board</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Software Asset Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Finance Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Vendor Governance</h3>
    </center>
  </div>


</body>

</html>

Css:

DIV.box {
  HEIGHT: 150px;
  WIDTH: 40%;
  FLOAT: right;
  MARGIN: 0px 1% 1% 0px
}
.topbox {
  HEIGHT: 150px;
  WIDTH: 81%;
  FLOAT: right;
  MARGIN: 0px 1% 1% 0px

}
.sidebar {
  float: right;
  display: block;
  width: 10%;
  height: 300px;
  margin: 1% 0 0 0;
}

Answer 2

I've only worked on the first row but the rest should be the same idea.

http://jsfiddle.net/h7funt7k/3/

CSS

.imageDiv  {
  width: 30%;
  height: 100%;
  float: left;
  vertical-align: middle;
}

.image {
  width: 100%;
  height: 100%;
}

.text {
  width: 70%;
  float:left;
}
DIV.box {
      BORDER-TOP: #e3f7fa 0px solid;
      HEIGHT: 150px;
      BORDER-RIGHT: #e3f7fa 0px solid;
      WIDTH: 40%;
      BORDER-BOTTOM: #e3f7fa 0px solid;
      FLOAT: right;
      CLEAR: none;
      BORDER-LEFT: #e3f7fa 0px solid;
      MARGIN: 0px 1% 1% 0px
    }

HTML

  <p><span style="font-size: 10pt; font-family: verdana, sans-serif">Sample Text</span>
  </p>
  <p><span style="font-size: 10pt; font-family: verdana, sans-serif"></span>&#160;&#160;</p>

  <div class="box" style="background-color: #EBEBEB">
    <div class="imageDiv">
      <img class="image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </div>
    <div class="text">
      <center>
        <h3 style="color: #0066CC">Service Governance</h3>
      </center>
    </div>    
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <div class="imageDiv">
      <img class="image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </div>
    <div class="text">
      <center>
        <h3 style="color: #0066CC">Change Managemen</h3>
      </center>
    </div>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">People Board</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Software Asset Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Finance Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Vendor Governance</h3>
    </center>
  </div>

Answer 3

This could help you ( https://jsfiddle.net/g0cbeaga/ )

HTML

 <div class="boxes">
        <div class="top-box">
            <img src=""/>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebar-top">
            <img src="" />
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
        </div>
        <div class="sidebar-bottom">
            <img src="" />
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
        </div>
    </div>

CSS

.boxes {
  float: left;
  width: 580px;
  height: 600px;
}
.top-box {
  padding: 20px;
  width: 540px;
  height: 255px;
  background-color: #800000;
}
.top-box img {
  float: right;
  width: 150px;
  height: 150px;
  background-color: #808080;
}
.sidebar {
  float: right;
  width: 200px;
  height: 600px;
  text-align: center;
}
.sidebar-top {
  padding: 20px;
  width: 160px;
  height: 255px;
  background-color: #800000;
}
.sidebar-bottom {
  margin-top: 10px;
  padding: 20px;
  width: 160px;
  height: 255px;
  background-color: #800000;
}
.sidebar-top img , .sidebar-bottom img {
  width: 150px;
  height: 150px;
  background-color: #808080;
}