I'm working on achieving a specific layout design with CSS:
- Gray Rectangle = Container
- Blue Rectangle = Image
- White Rectangle = Content
However, my current progress is as follows:
I'm facing two issues with the content div:
- How can I position the content next to the image without specifying a fixed width?
- How do I make the content div expand vertically to fill the container?
If there are similar questions already asked, I apologize. I have done some research but most of the questions were about different 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;
}