473,320 Members | 1,976 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

div tag positioning issues

Hi

I'm coding a page which has the following layout.

<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="content">
<div id="column one ">column one</div>
<div id="column two">column two</div>
<div id="column three ">column three</div>
</div>

The issue arises because the header of the site needs to grow and contract
with the content in it, so I can't give column's one two and three absolute
positions because these change with the height of the header, I have tried
giving each a relative position with a negative top value, which positions
everything in the right place and the content moves up and down with the
header, but this results on a lot of extra white space at the bottom of the
page.

If anyone has got any solution, ideas I would be indebted.

Cheers Jeff
Jul 20 '05 #1
3 5838
Jeff Butler wrote:
The issue arises because the header of the site needs to grow and contract
with the content in it, so I can't give column's one two and three
absolute positions because these change with the height of the header


Put them inside a container in normal flow (i.e. so it sits after the
header) and position them inside that (i.e. by utting position: relative on
the container).

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #2
On Wed, 8 Oct 2003 14:12:53 +1300, "Jeff Butler" <je****@itagain.co.nz>
wrote:
The issue arises because the header of the site needs to grow and contract
with the content in it, so I can't give column's one two and three absolute
positions because these change with the height of the header, I have tried
giving each a relative position with a negative top value, which positions
everything in the right place and the content moves up and down with the
header, but this results on a lot of extra white space at the bottom of the
page.

If anyone has got any solution, ideas I would be indebted.


Use floats. I have a couple of example layouts on my site (see sig) that
might offer some inspiration.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #3
Hey Stephen,

Thanks for your help, that worked perfectly.

Cheers Jeff
"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:bg********************************@4ax.com...
On Wed, 8 Oct 2003 14:12:53 +1300, "Jeff Butler" <je****@itagain.co.nz>
wrote:
The issue arises because the header of the site needs to grow and contractwith the content in it, so I can't give column's one two and three absolutepositions because these change with the height of the header, I have triedgiving each a relative position with a negative top value, which positionseverything in the right place and the content moves up and down with the
header, but this results on a lot of extra white space at the bottom of thepage.

If anyone has got any solution, ideas I would be indebted.


Use floats. I have a couple of example layouts on my site (see sig) that
might offer some inspiration.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

36
by: Jack Hughes | last post by:
This argument has come up two or three times lately. We have a web standards document at our company that say "Use valid HTML 4; We don't recommend switching to DIV-based CSS-P for layout just...
4
by: Amigo Boy | last post by:
I would like to create a page with four distinct areas. Similar to this: <tr><td colspan="2">My Heading stuff here</td></tr> <tr><td>My nav stuff here</td><td>My main stuff here</td></tr>...
2
by: Tim Charles | last post by:
Hello I am close to finishing my first properly css-friendly site (at least I hope it is), and am looking for some general feedback, plus a specific question answered, if possible. ...
11
by: NS | last post by:
I am relativly new to css positioning and have a question regarding the display of a DHTML pop-up Here is the basic HTML I am using: <html> <head> <script language="JavaScript"> <!--
17
by: George Hester | last post by:
http://tinyurl.com/5uj6w The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that? Also the navigation divs both top and bottom should follow the...
1
by: Charles Harrison Caudill | last post by:
with tables there is a clean and algorithmic way to organize things, but with css which is, once you get it working, much cleaner, I have to tweak and patch and hope and pray and curse before...
1
by: final farewell | last post by:
Hello, I am using Ekhau Location Tracking System for an assignment. It is a system that is able to track configured tags attached to people or objects. I am new to the Ekahau Location Tracking...
1
by: alice | last post by:
Can someone point me to a page that has good info on how the different browsers handle positioning? I'm finding that position:absolute works differently between Safari and IE7. Sort of ironic if...
3
by: LayneMitch | last post by:
Hello everyone. I'm designing a site for a friend of mine and I'm having a few issues. First off, I'm noticing that there is a difference between the default line- heights of IE and...
14
by: Fistro | last post by:
I'm trying to find a design that would allow me to build web pages without having to worry about compatibility issues (not too much, in any case,,,) I've came across this CSS layout technique:...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.