473,327 Members | 1,952 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,327 software developers and data experts.

Problem aligning DIVs

I seem to be missing something in my understanding. If I leave off absolute
positioning, shouldn't nested DIV/SPAN be displayed inside the parent, and
ones outside that display separately?

Here is some sample code:
----------------------------------------------------------
<div id='header' style='border:red solid medium'>
<p>This is the Header</p>
</div>

<div id='container' style='border:green solid meduim'>
<span style='border:red dashed medium; float:left;'>
<p>This is the left column</p>
</span>
<span style='border:blue dashed medium; float:right;'>
<p>This is the right column</p>
</span>
</div>

<div id='footer' style='border:green dashed medium;'>
<p>This is the footer</p>
</div>

<div id='lost' style='background:yellow'>
<p>Where is this one</p>
</div>
--------------------------------------------------------

The borders are there just to see how things display.

The INTENT is to have a header across the full page, two columns below that,
and a footer underneath all of it. Like:

+---------------------+
| HEADER |
+---------------------+
| l-col | r-col |
+---------------------+
| FOOTER |
+---------------------+

The code above works in IE & Opera, but the footer overlaps the left & right
columns in Firefox & Netscape. The "container" division is practically
nonexistent.

Eliminating the container division results in the same display - with the
columns appearing to be inside the footer.

What am I missing - to make the footer display UNDER the container DIV,
without using absolute positioning?
Jul 21 '05 #1
5 3954
Tony:
<span style='border:red dashed medium; float:left;'>
<p>This is the left column</p>
</span>


Look closely at this. Let an HTML validator help you if you don't see it
yourself.

PS: I guess that's the source of your problem, but I didn't bother to
verify.
Jul 21 '05 #2

"Christoph Päper" <ch**************@nurfuerspam.de> wrote in message
news:d8***********@ariadne.rz.tu-clausthal.de...
Tony:
<span style='border:red dashed medium; float:left;'>
<p>This is the left column</p>
</span>


Look closely at this. Let an HTML validator help you if you don't see it
yourself.

PS: I guess that's the source of your problem, but I didn't bother to
verify.


The W3C validator didn't like the <p> tags.

Removing them did nothing to change the formatting, but the page did
validate
Jul 21 '05 #3
Tony wrote:
"Christoph Päper" <ch**************@nurfuerspam.de> wrote in message
news:d8***********@ariadne.rz.tu-clausthal.de...
Tony:
<span style='border:red dashed medium; float:left;'>
<p>This is the left column</p>
</span>


Look closely at this. Let an HTML validator help you if you don't see it
yourself.

PS: I guess that's the source of your problem, but I didn't bother to
verify.

The W3C validator didn't like the <p> tags.

Removing them did nothing to change the formatting, but the page did
validate


The item pointed out is that you are placing a block (p) inside an
inline element (span), which is not legal.

The item pointed out is not your problem, however. The problem of your
footer overlapping the columns is because you are floating your columns.
Any floated item is taken out of the normal flow. This means that the
vertical space that it occupies is not accounted for (no height);
similar to an absolutely positioned item.

--
Gus
Jul 21 '05 #4
"Gus Richter" <gu********@netscape.net> wrote in message
news:Xc********************@golden.net...
Tony wrote:
"Christoph Päper" <ch**************@nurfuerspam.de> wrote in message
news:d8***********@ariadne.rz.tu-clausthal.de...
Tony:

<span style='border:red dashed medium; float:left;'>
<p>This is the left column</p>
</span>

Look closely at this. Let an HTML validator help you if you don't see it
yourself.

PS: I guess that's the source of your problem, but I didn't bother to
verify.

The W3C validator didn't like the <p> tags.

Removing them did nothing to change the formatting, but the page did
validate


The item pointed out is that you are placing a block (p) inside an inline
element (span), which is not legal.

The item pointed out is not your problem, however. The problem of your
footer overlapping the columns is because you are floating your columns.
Any floated item is taken out of the normal flow. This means that the
vertical space that it occupies is not accounted for (no height); similar
to an absolutely positioned item.


OK - I got that (Thanks for the clarification).

So what is the 'proper' method to do this, then?

I tried removing the "float" and setting both to "width:50%" - in IE, this
SOMETIMES does what I want, but as I resize the screen, the right-column
sometimes drops to the line below. Making one or the other "width:49%"
solves this, but leaves a gap at the right edge - I could live with this if
I could get the gap in the middle, instead, but it seems rather poor to
settle.

Jul 21 '05 #5
Tony wrote:

So what is the 'proper' method to do this [two columns with footer], then?


http://www.google.com/search?hl=en&l...er&btnG=Search

--
Gus
Jul 21 '05 #6

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

Similar topics

2
by: Iain Hallam | last post by:
Hi. I've got a few divs on a page that are positioned as "fixed". I now want my text to centre itself both horizontally and vertically. "text-align: center" on the body works for horizontal, but...
9
by: Dustin | last post by:
Here's what I am trying to do: (Names represent CSS classes.) I want to create a photo gallery. I want the entire gallery to be surrounded by a box named PhotoGallery. I want a fluid placement...
4
by: Mimo Zus | last post by:
I'm hoping that someone can explain what's going on; better yet provide a workaround. I'm designing a centered CSS site based on a 550 pixel wide vertical background image. Onto this background...
3
by: Mark Wiewel | last post by:
hi all, i am a newbie in ASP.NET and i couldn't find the solution to this one: i have a form with three datagrids on it. i would like to align them vertically with a space between each grid of...
0
by: friendlycoder | last post by:
Hi there, How do you align DIVS next to each other? I have 3 images, each image is assocated in the style sheet as background image. I want the images to align to each other like this...
4
by: O11Y | last post by:
Hello, I've read numerous posts & guides on this subject but i'm still having problems. I'm writing some HTML for the company intranet and all our browsers are currently (you guessed it) IE6. ...
0
by: nlindsay | last post by:
I am trying to center align 2 left floated divs within a % width background. I know that setting the wrapper div to a fixed width works, but can it be done with a fluid background? (basically I...
2
by: brixton | last post by:
Hello, I have an "accordion menu" where I want the structure to be like this for a menu item with "children" who are supposed to drop down when an "expand image" is clicked: <li> <span>some...
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: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
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: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
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
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.