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

Positioning of DIVs

P: n/a
To start off, I am trying to get a page to do this with divs.
http://commo.de/lotsadivs.png

There is a navigation bar at the top. Then there is a big DIV that contains
three other DIVs that contain text and/or pictures. textdiv1 is dropped from
the top maybe 50 pixels. All of the textdivs are centered and expand to fit the
size of the page. textdiv1 and 2 are of arbitrary height, but textdiv3 is
supposed to be right under whichever drops down further.

Right now I am using things like:

..textdiv1 {
position: absolute;
right: 51%;
top: 280px;
width: 40%;
}

This works fine except for when textdiv3 gets added in. If I set it for an
absolute position then it will overlap if the person increases the font size.

With this problem I can see that I am making a basic design error by using the
absolute positioning, but I was completely inept at getting the DIVs to position
otherwise. If there is a page that is already doing this type of layout that I
could look at I am sure I could figure it out. Or if there is some other
direction I should be taking here... I would appreciate any input.
Paul
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Pamel wrote:
To start off, I am trying to get a page to do this with divs.
http://commo.de/lotsadivs.png

There is a navigation bar at the top. Then there is a big DIV that contains
three other DIVs that contain text and/or pictures. textdiv1 is dropped from
the top maybe 50 pixels. All of the textdivs are centered and expand to fit the
size of the page. textdiv1 and 2 are of arbitrary height, but textdiv3 is
supposed to be right under whichever drops down further.

Right now I am using things like:

.textdiv1 {
position: absolute;
right: 51%;
top: 280px;
width: 40%;
}

This works fine except for when textdiv3 gets added in. If I set it for an
absolute position then it will overlap if the person increases the font size.

With this problem I can see that I am making a basic design error by using the
absolute positioning, but I was completely inept at getting the DIVs to position
otherwise. If there is a page that is already doing this type of layout that I
could look at I am sure I could figure it out. Or if there is some other
direction I should be taking here... I would appreciate any input.
Paul


Perhaps this will help:
http://www.sitepoint.com/article/1213

--
Gus
Jul 20 '05 #2

P: n/a
"Gus Richter" wrote...
Pamel wrote:
If there is a page that is already doing this type of layout that I
could look at I am sure I could figure it out. Or if there is some other
direction I should be taking here... I would appreciate any input.


Perhaps this will help:
http://www.sitepoint.com/article/1213

Muchos Gracias! That got me started on the right path. I changed them to
floats like Egon Pasztor did and it seemed to work. (Had to fiddle with getting
settings that looked the same in IE and FireFox, but it seems good.
Paul
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.