By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,016 Members | 2,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,016 IT Pros & Developers. It's quick & easy.

Positioning DIVs within DIVs (need hack)

P: n/a

I have a problem with the positioning of two divisions.

They are containined within a content division in which all the page content happens
(ie not the menus, etc.).

The behavior I would like (and the behavior that happens in IE) is for the content
division (from now on 'ConDiv') to resize with the content of either of the sub divisions
(MainDiv and NewsDiv).

I am trying to get the divisions to position directly next to each other. The fix I first
came up with is using float:left and float:right. Dreamweaver and IE both claim that this
should do as I require but Firefox just floats the divisions plain over the entire document
(with the top aligned to the top of ConDiv but the actual content floating over the footer
of the page and heading on down to nowhere.

http://www.bfwd.co.uk/clients/shiningstar/taffhousing

Load this page in firefox to see what I mean - and in IE to see what I actually want.

Help :S
------------------------------------

Another unchecked rambeling brought to you by:

Oddball
joshua@bf#N0SP4M#wd.co.uk
Jul 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Wed, 20 Jul 2005, Oddball wrote:
I have a problem with the positioning of two divisions.
They are containined within a content division in which all the page content happens
(ie not the menus, etc.).
[...]


One wonders what's the use of all these HTML elements.
It seems that DIV and SPAN are enough. There should be something
like "Compact HTML 4.01", which has only DIV and SPAN.

Jul 21 '05 #2

P: n/a


Andreas Prilop <nh******@rrzn-user.uni-hannover.de> wrote:
On Wed, 20 Jul 2005, Oddball wrote:
I have a problem with the positioning of two divisions.
They are containined within a content division in which all the page content happens (ie not the menus, etc.).
[...]


One wonders what's the use of all these HTML elements.
It seems that DIV and SPAN are enough. There should be something
like "Compact HTML 4.01", which has only DIV and SPAN.

Does that help me? :S If I'm missing something please tell me :'(
------------------------------------

Another unchecked rambeling brought to you by:

Oddball
joshua@bf#N0SP4M#wd.co.uk
Jul 21 '05 #3

P: n/a
Oddball wrote:
I have a problem with the positioning of two divisions.

They are containined within a content division in which all the page
content happens (ie not the menus, etc.).

The behavior I would like (and the behavior that happens in IE) is
for the content division (from now on 'ConDiv') to resize with the
content of either of the sub divisions (MainDiv and NewsDiv).

I am trying to get the divisions to position directly next to each
other. The fix I first came up with is using float:left and
float:right. Dreamweaver and IE both claim that this should do as I
require but Firefox just floats the divisions plain over the entire
document (with the top aligned to the top of ConDiv but the actual
content floating over the footer of the page and heading on down to
nowhere.


It looks to me like you're doing a 2-column layout with header & footer -
would that be correct?

One question about that - do you WANT the "Latest News" div to be lined up
BELOW the "Welcome" div, or right next to it?

Take a look at my site: http://www.webrightdevelopment.com and see if that
seems to be what you want. I have a header, a middle portion with two
columns, and a footer. If that's what you're trying to achieve, here are a
couple tips:

First off, to get the placement of the footer where you want it, after using
float for the two columns, you need to add 'clear:both'.

To get the layout you want, you will need a container div for everything.
Then the header, then the middle section with its two columns, and finally
the footer. It should come out something like this:

<div id='wholepage' style='background-color:white; width:80%;'>
<div id='header' style='background-color:white; width:100%;'>
--Header Stuff Here--
</div>
<div id='middle' style='background-color:white; width:100%;'>
<div id='leftcolumn' style='background-color:white; width:50%;
float:left;'>
--Left Column Stuff Here--
</div>
<div id='rightcolumn' style='background-color:red; width:49%;
float:right;'>
--Right Column Stuff Here--
</div>
</div>
<div id='footer' style='background-color:blue; width:100%; clear:both;'>
--Footer Stuff Here--
</div>
</div>

BTW, you'll see that the two columns only add up to 99%. I did this because
I've noticed that in some browsers, putting two 50% width divs next to each
other sometimes causes them to move vertically while resizing the browser
window.

Also note that with this design, the LEFT column will visually appear to
match the full height of the middle div, but the right column won't - this
assumes that the right column is the one that will take up the most space,
and therefore the left column will have to adjust to the right. What really
happens is that the left column div cuts off at the bottom of its contents,
but since the wholepage div has the same background color, it APPEARS to
fill all the way to the footer. If you were to put a border around it, or
change the background color, you would see this.

Hope that helps - I remember when I was just learning CSS and trying to do
this (not all that long ago, actually) - it was a pain...

--
Tony Garcia
Web Right! Development
Riverside, CA
www.WebRightDevelopment.com
Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.