CODEWITHSUNDEEP
csshtml
Karle
Karle

Reputation: 888

Expanding div vertically to fit parent container

I'm trying to create the following layout using CSS:

Desired Layout

Unfortunately the best I've been able to manage is this:

Achieved Layout

I have two problems with the content div:

  1. How to make the content div sit to the right of the image without hard coding the width.
  2. How to make the content div expand vertically to fill the container.

Apologies if a similar question has already been asked. I've read similar questions here but they all seem to relate to other layout concerns.

HTML:

<html>
  <head>
    <title>Test</title>
    <link href="test.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div class="solid">
      <img id="snapshot" src="page.jpg">
      <div class="content" style="margin-left: 165px;">
        Test
      </div>
      <br style="clear:both"/>
    </div>
  </body>
</html>

CSS:

#snapshot {
  float: left;
}

div.solid {
  padding: 5px;
  border: 1px solid black;
  background-color: #E8E8FF;
}

div.content {
  border: 1px solid black;
  background-color: #FFFFFF;
}

Upvotes: 3

Views: 4180

Answers (2)

Andrew
Andrew

Reputation: 1559

Equal height columns are always a pain. If the image width is fixed, perhaps the easiest way is to put the image inside the content div and then push it back to the left with a negative margin:

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="solid">
      <div class="content" style="margin-left: 165px">
      <img id="snapshot" src="page.jpg" style="margin-left: -165px;">
        Test
        <div style="clear:both"></div>
      </div>
      <div style="clear:both"></div>
    </div>
  </body>
</html>

Upvotes: 3

Ry-
Ry-

Reputation: 224877

If you know the width of the image, you can do something like this: http://jsfiddle.net/EeLjd/

Use position: absolute on the content, and set the left to the width of the image, plus the padding. Use float: left on the image.

Upvotes: 3

Related Questions