3 replies [Last post]
dterrie
Offline
newbie
Gold River, CA
Last seen: 18 years 3 days ago
Gold River, CA
Timezone: GMT+4
Joined: 2004-05-24
Posts: 2
Points: 0

I am working on a css design for pages that will be programmatically generated and styled/layed out according to a client-specific css dynamically linked at the time the page's html is generated. The layout is fairly simple (borrowed from Blue Robot): header, left nav, content, footer. All this works fine. However, we need to float boxes with charts and data relative to a DIV ID for a section of associated text . This works as well in testing with one key problem: when we move the floated box down by setting the top property the text wraps according to the original position of the box, not the position it has been moved to. Is there a trick to making this work I'm missing?

Here's the class for the box:

.dataright {float: right;
position:relative; top: 50px;
margin: 0px 0px 0px 5px;
border: solid 1px black;
height:auto;
width:auto;
background-color: gainsboro
}

Here's a snippet of the html:

<div id="Content">
<h1>Left Menu Layout</h1>
<p>This is a simple two column layout with a left menu box. By modifying the stylesheet, this layout can serve as the basis for many standard two column layouts. As is the case with most layouts in the Reservoir, the order of elements (header, content, menu) in the HTML source is friendly and accessible to mobile computers, text-based browsers, and alternative/accessible devices.</p>
<p>Much effort has been made to ensure that the layouts in the BlueRobot Layout Reservoir appear as intended in CSS2 compliant browsers. The content should be viewable, though unstyled, in other web browsers. If you encounter a problem that is not listed as a known issue, I am most likely not aware of it. <em>Please</em> <a href="mailto:[email protected]?subject=Layout Reservoir" title="Email BlueRobot about a layout issue">email me</a> a heads-up. Your help will benefit the other five or six people who visit this site.</p>

<div ID="ABC">
<h2>ABC Header</h2>
<div class="dataright">
<table class="tablefont">
<tr>
<td>Field Name 1</td>
<td>Field Name 2</td>
<td>Field Name 3</td>
<td>Field Name 4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>9</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>9</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>9</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>

<p> This is where we'd stick a small datagrid table or chart.
This box will expand both vertically
and horizontally to hold its contents.
We'll need to add table style classes to format the tables.
This is the text that wraps around the data.
This is the text that wraps around the data.
This is the text that wraps around the data.
This is the text that wraps around the data.
This is the text that wraps around the data.
This is the text that wraps around the data.
This is the text that wraps around the data.
This is the text that wraps around the data.
</p>
</div>

</div>

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 18 years 27 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

moving relative position div down causes text wrap problem

dterrie - would you mind providing a copy of the code you were actually using, so we can see it in action.

It is not a trick, and many get caught by it.

Although you can, You should not use Top, Right, Bottom, or Left when a box is positioned relatively (should only use for position: absolute unless you deliberately want the above type results).

Now many will say they have used it without a problem, but that is just lucky that their particular layout did not cause a problem.

Top, etc offsets a relatively positoned box, but maintains its SPACE, as if it was never moved.

Use a margin top instead.

Regards
Day

The only way to learn is to do it yourself

mme
Offline
newbie
Last seen: 18 years 1 week ago
Timezone: GMT+1
Joined: 2004-05-20
Posts: 2
Points: 0

relative positioning

using Top (so as Left, Right and Bottom) with relative positioning causes folowing results:
1. the relative positioned element is formated within the layout of the page ignoring Top/Left/Right/Bottom properties. It means the size, position and text wrapping of that element is calculated as it will stay in this position
2. after that, the element is moved from its position by the values in Top/Left/Right/Bottom properties without affecting the layout of the page and it keeps its size so as text wrapping...

the solution was mentioned in previous post, try to use margin-top

Miro

dterrie
Offline
newbie
Gold River, CA
Last seen: 18 years 3 days ago
Gold River, CA
Timezone: GMT+4
Joined: 2004-05-24
Posts: 2
Points: 0

moving floated box

Thanks to DayBreak_0 and mme for your help. The calculation of the page layout before the box is moved seems a serious flaw in css. We have decided just to go with the initial position, helped along a little by setting the width for the header above to 100%. This at least drops the box down flush with the first line of text. One note is that it seems the DIV containing the relatively positioned class/box contents must precede the text that wraps around it - not a biggie. Using the margin-top property is not a good solution for us, as it prevents the text that would normally flow above the box to wrap at the box margin - not the desired effect. We have many fish to fry in this project, so I'm going to put this issue on the back burner for now. I'd still like to know if moving the box is possible, and will report any new approaches I run across back to you. Again, thanks.