Home/ Questions/Q 6882627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:16:38+00:00

I’m trying to create the following layout using CSS: Gray Rectangle = Container Blue

  • 0

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

Desired Layout

  • Gray Rectangle = Container
  • Blue Rectangle = Image
  • White Rectangle = Content

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0