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

float left with block to right leaves gap in IE6

Hey all, I've got a little problem... I imagine it should be pretty common
though I could not find an answer via google.

What I'm after is a static left nav with a fluid main content to the right
that expands to fill the remaining browser window.

Take a look at this page in both FF and IE6:
http://www.roagie.com/layout.php

in FF: sections 3 and 4 are butted right up against each other
In IE: there is a noticeable gap between sections 3 and 4

If I assign float:left to section 4, it butts up nicely, but then it doesn't
auto-expand to the take the remaining browser width.

Any help GREATLY appreciated... I've been beating my head against the desk
for a day on this.

P.S. There is also another variation of this problem on that page... the
sections butt up, but the image & text is not flush against the left side as
it is with FF.
Oct 28 '07 #1
5 4979
Rumba wrote:
Hey all, I've got a little problem...
<http://www.positioniseverything.net/explorer/threepxtest.html>

--
Gus
Oct 28 '07 #2
>Hey all, I've got a little problem...
>
<http://www.positioniseverything.net/explorer/threepxtest.html>
It doesnt' seem to be the 3px issue because the two divs have heights
assigned to them.

Oct 28 '07 #3
In article <1P******************@newsfe06.phx>,
"Roagie" <no*****@man.comwrote:
Hey all, I've got a little problem...
<http://www.positioniseverything.net/explorer/threepxtest.html>

It doesnt' seem to be the 3px issue because the two divs have heights
assigned to them.
I don't think this is a good reason to doubt it. You are perhaps
confusing it with another issue.

It is a pesky business assigning heights anyway in a real webpage
that has a left floating nav and right content. You will lose
flexibility.

There are a number of ways of tackling your problem. The simplest
and best is to stop worrying about the content butting up so
exactly. Give the left nav a width and the right (non-floated)
content div at least a left-margin as wide as the float. If you
design so it still looks nice with a bit more margin, then it
will not look so different in IE which does add the 3px gap.

But if you really insist on butting up, then one way to do it is
to tell IE that the the left margin to the static content is 3px
less than the width assigned to the float. And you can do this in
a number of ways, via a * hack in your css sheet, or a
conditional construction in your html that only IE notes. In the
case of the latter you can refer IE to a different stylesheet.

If you use a float, float construction (which is not for you
really because you want to let the content expand), there is a
way to cope with the gap in IE by giving the right float a neg
margin (for IE eyes only via css hacks or conditionals).

--
dorayme
Oct 28 '07 #4
There are a number of ways of tackling your problem. The simplest
and best is to stop worrying about the content butting up so
exactly.
It's a sliced up graphics kinda layout, so the images that serve as the div
background-images must butt up.
Give the left nav a width and the right (non-floated)
<helpful suggestions snipped>

Thanks for all your suggestions, but in the interest of cross-browser
compatibility and time I just created a skeleton using a table, and am using
css inside each table cell. To me it just didn't make sense to try all these
css hacks to get the browsers to agree... if you have to hack css so much
for complex layouts, then it's simply not ready for complex layouts (some
layouts may be ok, but for complex stuff like I'm trying to do... no dice).
I understand it's not css' fault, it's the browsers'. But it is what it is.
I solved my problem with a simple table layout in 1 minute, compared to the
3 hours I had already wasted trying to get it to work with divs, and
probably much more time had I attempted to slug it out with css hacks.

Oct 31 '07 #5
In article <1w*****************@newsfe07.phx>,
"Roagie" <no*****@man.comwrote:
There are a number of ways of tackling your problem. The simplest
and best is to stop worrying about the content butting up so
exactly.

It's a sliced up graphics kinda layout, so the images that serve as the div
background-images must butt up.
Give the left nav a width and the right (non-floated)
<helpful suggestions snipped>

Thanks for all your suggestions, but in the interest of cross-browser
compatibility and time I just created a skeleton using a table, and am using
css inside each table cell. To me it just didn't make sense to try all these
css hacks to get the browsers to agree... if you have to hack css so much
for complex layouts, then it's simply not ready for complex layouts (some
layouts may be ok, but for complex stuff like I'm trying to do... no dice).
I understand it's not css' fault, it's the browsers'. But it is what it is.
I solved my problem with a simple table layout in 1 minute, compared to the
3 hours I had already wasted trying to get it to work with divs, and
probably much more time had I attempted to slug it out with css hacks.
I understand and sympathise. Good luck.

--
dorayme
Oct 31 '07 #6

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

Similar topics

6
by: TJ | last post by:
I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when...
4
by: erikd | last post by:
I'm trying to set up a standard "footer" on my pages. I just discovered by reading this newsgroup that straight html is no good and I need to learn how to do it using css. So I while I'm learning...
0
by: The Bicycling Guitarist | last post by:
The home page as currently online has my <h1> floated right, mainly so that text will be at the top of the xhtml code. I have an alternate version with everything floated left. Any opinions on...
0
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600...
5
by: john_aspinall | last post by:
http://www.ainewmedia.co.uk/test.htm Im learning CSS based layout and Im pulling my hair out as to why wont my banner DIV float to the right of my login box? It works fine in IE. Any help...
5
by: OtisUsenet | last post by:
Hi, I'm killing myself trying to get a "horizontal nav bar" where some text is left aligned, and some is aligned to the right, kind of like this: LEFT ...
12
by: Michael7 | last post by:
Hi Everyone, I've been trying to get two blocks of text to be aligned, one left, one right, on the same line. What I'm trying to mimic is what I did with tables here: ...
4
by: erikirl | last post by:
http://www.hardwareforfree.com/ I'm trying to get the Consumer Gift Network image to be in the top right corner of the 800px area in the header. I have searched for hours and tried a lot of...
1
by: Chinsu | last post by:
<html> <head> <style> #ex { width: 700px; background: red; float: left; } a, span { display: block;
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
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
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.