Learn More






Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...CSS - How to float beneath an absolutely positioned DIV?CSS - How to float beneath an absolutely positioned DIV?
New Post
3/18/2008 4:09 PM

Hey Folks,

Ok, I'm betting this is a pretty simple issue for some of you.  That being the case, please feel free to answer...

I'm pretty new to CSS, (been stuck in the days of tables since the 90's), and now I've been told that I need to switch to CSS for all future development.  Ok, thats fine, but, man I didn't realize how much stuff had changed...

Anyway, I've been working on this skin pretty much all day, trying to change it from table based to Div\CSS based, and I've made some really good progress. 

The problem that I'm running into is that, what I'm working on, the designed (not inhouse) has come up with some layouts that look really sweet in photoshop, but are giving me fits here...

So, I pose the question.

I've got a basic layout, effectively 2 columns with a footer at the bottom.

Column A is on the left and has the MenuBar, some divider graphics and the logo up top (stacked vertically) with the main content window down below. 

Column B is on the right, and will have a container at the top in which I can put in image source code to have an image there.  Beneath the image is the option to put additional containers (possible, not required on every page).

Since the text is of variable length, and the images could be different sizes, I need to make things float up and down.  Also, the Column B image, there's a chance that the image could be designed to 'spill out' of the column, covering up part of the logo\menu bar.  I'm guessing on that one, I need to use the z-axis, have it either in front of or behind the menu and logo, as instructed, with the contents of the Div starting at top right for best effect. 

I'd like some verification and help on the whole floating thing, since I've the bulk of the CSS designed at this point using abosolute positioning. 


New Post
3/18/2008 4:57 PM

Just a heads up absolute positioning + DNN doesn't always mix as well as intended. One thing you will notice is the solpartmenu for the content panes will not show up correctly. You will have to use the dropdownaction token for your containers. Now for your main issue, is having the content panes auto shirnk / size appropriately as your content changes. This is where absolute positioning fails a bit, when in use with DNN. Since DNN has dynamic content its much harder to code a static skin. Your skin seems pretty simple, it might work a bit better to convert it to a relative positioned skin. This will also help fix the issue you will have with the module menus. If you email me what you have so far I can take a look at it a bit later tonight and try to provide some assitance for you. [email protected]


HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...CSS - How to float beneath an absolutely positioned DIV?CSS - How to float beneath an absolutely positioned DIV?

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?