2 replies [Last post]
wakum
Offline
newbie
Last seen: 14 years 48 weeks ago
Joined: 2008-03-03
Posts: 1
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

PeterPan
PeterPan's picture
Offline
Enthusiast
London
Last seen: 13 years 7 weeks ago
London
Joined: 2008-03-13
Posts: 51
Points: 11

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.