2 Columns... 1 Problem

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Greetings all, still fairly new to CSS and all the great layout issues
that come with different browsers. Quick question. I have a
"container" <div> that is 980px wide. Inside it are 2 other <div>. One
is 660px wide and the other is 300px. They are floated left and right
respectively. Logically this should leave 20px between them. They have
no borders, padding, or margins. Problem is, in IE the one floated
right is on the right side, but doesn't begin until after the one on
the left... almost like it had it. I am not using any clears
however. I have several other <div> and <span> inside these two
columns, again none of which use and none whos properties
exceed the column width. Any ideas? Site can be viewed here: http://

Thank you

Re: 2 Columns... 1 Problem

1995 Cobra wrote:
Quoted text here. Click to load it
the div slot1 is 660px but is positioned with 135px left.

Re: 2 Columns... 1 Problem

Scripsit 1995 Cobra:

Quoted text here. Click to load it

We can see that from the following:

Quoted text here. Click to load it

Learn CSS from some good textbook or tutorial. Hint: Material that teaches
you to use px for anything but directly image-related issues isn't good.

You'll just get farther in a wrong direction if you proceed now. Return to
the starting point and get a fresh start.

Jukka K. Korpela ("Yucca")

Re: 2 Columns... 1 Problem

Quoted text here. Click to load it

Do you have recommendations?
Plenty of bad ones out there, good ones are worth knowing about.

Re: 2 Columns... 1 Problem

Andy Dingley wrote:
Quoted text here. Click to load it
So far the ones at www.htmldog.com are the best I've seen

Take care,


Re: 2 Columns... 1 Problem

In article

Quoted text here. Click to load it

I have!

Read "Head First HTML & CSS" (readable tutorial, encourages the
right mindset, not a good reference)

Read Lie & Bos (readable, accurate, good reference afterwards)

Read <brainjar.com>  (best and most readable text I know of on
CSS positioning and especially float)

Code valid HTML. Getting CSS to work is hard enough with valid
code, trying to do it without is crazy.

Validate your HTML, so that it actually _is_ valid

Write well-structured HTML. Less is more. A minimal HTML page is
usually better than one with excess taggage all over the place.

Write detailed HTML. HTML should be minimalised as much as
possible, but no further!  If you _need_ that extra <div> or
<br>, then use it. Don't play gymnastics with CSS selectors when
a slight addition to the HTML gives a simpler solution overall.

Don't pander to browser errors. If you can't fix it neatly in 5
minutes, either don't use that feature or just let the IE users
suffer until they learn bettter. _Don't_ write crap code just
because it works in this Tuesday's IE patch. You have to live
with this stuff long-term afterwards.


Site Timeline