Mon, 2008-03-03 13:27
Hello everyone,
I have a question redarding positioning two divs in a parent div.
To describe the scheme attached:
:: div 'A'
- is a fixed width and height div
:: div 'B'
- has a fixed width
- it's height is calculated depending on it's contents width
- should always be in div's 'A' center (not really obvious from the picture)
:: div 'C'
- is a fixed width and height div
- should always be positioned on the right of div 'B'
I don't have any more idea how to solve this problem (all of them were no good). Any hint would be priceless.
Thanks in advance.
Tue, 2008-03-04 06:29
#1
You've left off a few specs,
You've left off a few specs, but try something like this:
Float Test Document
/**/
B
more
more
C
cheers,
gary
Thu, 2008-03-13 11:55
#2
theres a number of ways you
theres a number of ways you could do this though. If you looking to float both the divs, then your code would look something like this:
css:
#a
{
width:200px;
height:200px;
}
#b
{
float:left;
width:150px;
height:auto;
}
#c
{
float:left;
width:50px;
height:50px; /*If needed this could be set to auto also to allow it to resize */
}
.clear
{
clear:both;
}
HTML:
This is div "B"
This is div "C"
Now what this does is floats the divs next to each other, but if div "B" grows, it should force the outer div (div "A") to grow respectively. alternatively you could position everything relatively and then use your margins to place them at specific points on the screen. but this gets messy once you start adding borders to divs, as IE and FF both Interpret that differently.
I personally use foating to do this kind of stuff.