View topic - Absolute Positioning (HELP!)

Stylegala Forums » Forums list » Problem solving

Absolute Positioning (HELP!)

Goto page 1, 2 Next Post new topic Reply to topic

Author	Message
Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Jan 29, 2006 20:19 Hey Guys, I have a couple of questions on absolute positioning. I have recently decided to try moving from float based layouts to positioned ones. I am starting to catch on but could use a couple of pointers. Based on a design I am currently working on here are my questions/problems: 1) I find myself creating a 'wrapper div(position:relative)' then the wrapper-content divs (position:absolute) for every element I need. ex: #wrapper { position:relative; } #content {position: absolute; } 2) I have to add a height to every 'wrapper' div or it doesn't display it's contents. This seems buggy to me, especially if I have say a content column and do not want a height. Fine for one column I could just do relative but if I have 2+ and don't want to float them, any ideas? ex: #wrapper-for-text {position: relative} /NEEDS height? / #content {position:absolute} I will leave it at that for now, I hope these make sense. I am having trouble mostly with text/long columns of content and absolute positioning without a height added to a wrapper div. Any advice is appreciated, Thanks. Last edited by Lost_User on Sun Jan 29, 2006 23:21; edited 1 time in total

Sponsor

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Jan 29, 2006 20:39 Buddy Bradley wrote: absolutely positioned elements are removed from the document flow (i.e. they don't take up any space within their parent element), the intrinsic dimension of your wrapper DIV will be zero - 29Digital Forums I think the quote should explain it.

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Jan 29, 2006 23:11 I kinda gathered as much after experimentation. That being said it makes sense that I would have to use heights on says a header image, navigation bar etc, but what about columns of text? There has to be a way to deal with this it seems like a fairly common thing. Included is a link to the design concept. The CSS references below mimick the image. http://www.graphicalwonder.com/concept.gif Simple Example of what I want to accomplish: 800px wrapper around the works (positioned relative) Row 1 - Tabbed menu Row 2 - Header Image Row 3 - Content Area (3 Columns - no fixed height) Row 4 - Footer I end up w/ this css: #row1-wrap { position: relative; height:30px; } #row1-menu { position:absolute; right:0px; } #row2-wrap { position: relative; height:250px; } #row2-header { position:absolute;} #row3-wrap { position:relative } /* No Height!! */ #row3-col1 { position:absolute; width:200px;} #row3-col2 { position:absolute; width:400px; left: 200px;} #row3-col3 { position:absolute; width:200px; left:600px;} #row4-wrap { position:relative height:30px; } #row4-footer { position:absolute;}

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Mon Jan 30, 2006 17:27 noone? :( This seems like it should be a simple issue. I'm sure some of you CSS gurus must have answers? :)

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Mon Jan 30, 2006 18:07 * {margin:0;padding:0;} body {margin:0 auto; width:800px;} #row1-wrap { position: relative; } #row1-menu { position:absolute; height:30px;right:0px; } #row2-wrap { position: relative; } #row2-header { position:absolute;height:250px;} #row3-wrap { position:relative } #row3-col1 { position:absolute; width:200px;} #row3-col2 { position:absolute; width:400px; margin-left: 200px;} #row3-col3 { position:absolute; width:200px; margin-left:600px;} #row4-wrap { position:relative height:30px; } #row4-footer { position:absolute;bottom:0;width:100%;} `/* IE5.x support / / support IE 5.x WIN, overrrule on wrapperdiv ?? / /\/ html body {text-align /*/:center;} html div { text-align //:left; } // /* -- -- END HACK -- -- */`

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Mon Jan 30, 2006 19:03 I am 99.9% certain I tried this and it also didnt work. The footer div stays at the start of the content wrapper unless I give the content wrapper a height :/

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Tue Jan 31, 2006 01:31 I can't believe this issue is still unresolved. With all these CSS people certainly someone has to have had this problem, or knows why I am having it. I have written it into a single easy-to-read HTML file so you can see exactly my problem. It's still based on the same scenario, I am using just 1 content column so it's easier to look at. The red border I put around the footer shows where it starts and ends. With no height property on the content-wrapper selector the footer seems to just ignore the content-wrapper/content divs. Here is a link: http://www.graphicalwonder.com/problem.htm C'mon, someone has to have seen this before. If I am being stupid by all means let me know I just want to fix this issue. Thanks! :)

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Tue Jan 31, 2006 03:22 Well Shanep i think you are having this issue of few helpers because my assumption is that most of us use float based designs, because they just work. in fact its my belief that designing using absolute positioning for this type of layout is a step backwards. you are doing something things that would more aptly lend themselves to float design. I'm not saying that positioning doesnt have its place but looking at this situation and reviewing the code i hardly think the time and effort are worth it. and that i believe is why few people have stepped up to the plate. I for my part dont have any other solution to this problem than that stated. if you are using this as a learning project fine, but if this is a work project you are doing, i would suggest you go back to using floats. it would seem the design calls for them.

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Tue Jan 31, 2006 13:53 Climaxdesigns That was my fear. It's unfortunate though that we're trying to design around a better standard using cleaner (X)HTML and CSS yet we're forced into using hacks to deal with rendering issues and a layout model that isn't meant for layout, or so I read. Im not trying to be cynical, I love the idea of CSS based design but I defnately don't think it's quite up to snuff in regard to layout. While tables cause bloated code they at the moment I'm very sad to say much more flexible to layout. My problem was basically I have been reading a lot lately about how floats were never meant for layout. I cannot help to think of tables, the same was said about tables. I just hope we're not going to spend the next 5+ years designing around a model that is incorrect. With the web as big as it is you would think there would be a much larger investment in the layout coding structure.

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Tue Jan 31, 2006 16:25 well for my part i have a form 'positioned' on this page [url=thoughts.climaxdesigns.com]thoughts.climaxdesigns.com[/url] i thought about your idea and decided that it was the best way to achieve what i was doing. basically the email a friend form is positioned with this `<div id="email_friend"> <div class="error_handler"></div> <form></form> </div>` and the css i use is similar to this `#email_friend{ font:.7em Verdana, Arial, Helvetica, sans-serif; position:absolute; right:10px; top:10px; width:490px; } .error_handler{ position:absolute; left:-208px; top:2px; width:200px; }`

Goto page 1, 2 NextPage 1 of 2

Post new topic Reply to topic