Member Avatar for yussibaer

Hi all,
I created several div tags which are nested.
The code snippet looks like this:

<BODY class="layout" leftMargin="0" topMargin="0">
.
.
.
<DIV style="float:top; width:100%; height:50%;">
<DIV style="float:left; height:100%">
.
.
.
<DIV style="position : absolute ; width:100%; ">
<tiles:get name="body"/>
</DIV>
</DIV>

</DIV>

<DIV style="clear : both ; ">
<tiles:get name="footer"/>
</DIV>
</BODY>

I discovered one interesting thing: If I delete the expression "position : absolute ;" then it works well, i.e. the footer is allways below. But I need this expression, thus I can't remove it. I tried to place the footer below with "position : absolute", "bottom:0px; left:0px;" as well as with "clear : both ;". Unfortunately, non of them worked well.
Any help is highly appreciated :)

Greetz,
yussibaer

  • 2 Contributors
  • 1 Reply
  • 66 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for tgreer

The "position" CSS declaration is meaningless without setting the "top" and "left" style attributes of all relevant elements in the box model.

It isn't clear what behavior you're expecting by both nesting and floating the divs... I have a hard time visualizing how this layout would appear, which is usually a sign that something is wrong with the organization.

Can you draw a picture, or at least try to paint a word picture of the layout you're trying to achieve?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.