Trying to articulate what I require.
There are five Divs: a wrapper, div 1, div 2, div 3, and div 4.
HTML:
<div id="main">
<div id="one">1</div>
<div id="two">2
<div id="four">4</div>
</div>
<div id="three">3</div>
</div>
CSS:
#main{
height:200px;
border: 1px solid red;
float:left;
}
#one{
min-width:100px;
max-width:200px;
background-color:#cccccc;
height:100%;
float:left;
}
#two{
width:50px;
height: 50px;
background-color:#ccffff;
float:left;
}
#three{
min-width:100px;
max-width:200px;
background-color:orange;
height:100%;
float:left;
}
#four{
min-width:52px;
max-width:200px;
background-color:pink;
}
Div 4 is within div 2. Div 4 needs to always be centered within div 2, regardless of its size.
How can this be achieved? Currently, div 4 is always within div 2. I have tried playing around with floats, positioning, and margins, but the dynamically changing width of div 4 makes centering a challenge.
When text is added to div 4, it should look like this:
_______________
| 1 |2 | 3 |
| __|___|___ |
| |div4 txt| |
| |________| |
|____|___|_____|
If putting div 2 and div 4 in a new wrapper makes it easier, I'm open to it, but div 1 and div 3 should always be connected to div 2.
I have also attempted:
- Exploring this site :)
- Searching on Google
- margin: 0 -50%;
- position: relative;
- display: inline-block;
- display: table; (and cells)
- and more
Looking for assistance.
ps: div 1 and 3 may not always be displayed. Either can be hidden or both at the same time.