I need help creating a flexible content area using only HTML/CSS.
The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size.
I have two items that need to be positioned next to the red item, each with a fixed width of 100px.
If the window size is less than 200px, only the fixed items should be visible.
Here is an example of what I'm trying to achieve:
The problem is that the blue and green items are staying on the right side, but I want them to stay to the right of the red item as a group (with green on the right of blue).
Here is the HTML code:
<div id="content">
<div id="item2"></div>
<div id="item3"></div>
<div id="item1">
<form>
<input type="text" />
<br />
<input type="text" />
</form>
</div>
</div>
And here is the CSS code:
div {
height: 50px;
}
#content {
width: 100%;
}
#content #item1 {
background: #f00;
width: 50%;
}
#content #item1 input {
width: 80%;
}
#content #item2 {
background: #0f0;
width: 100px;
float: right;
}
#content #item3 {
background: #00f;
width: 100px;
float: right;
}
Below is an image for reference:
Thank you for your assistance.