14 replies [Last post]
RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

I'm trying to create a website that would render in Mozilla and IE. I can get it to work in IE, but it doesn't seem to come out right in Mozilla. Essentially, this is what I want:

+---++---------+
|   ||         |
+---++---------+
+---++---------+
|   ||         |
|   ||         |
+---+|         |
     |         |
     |         |
     +---------+

The left side would be a fixed width of 200px (with the obvious fixed height), and the right side would take up the rest of the page, depending on the window size (with also a fixed height depending on the content).

My problem is getting the part that takes up the rest of the page. I don't know how to do that. Any suggestions?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Automatic resizing divs

#left { 
float: left;
width: 200px;
}
#right { margin-left: 210px; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

Automatic resizing divs

Well that was quick and simple - thanks!

RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

Automatic resizing divs

I know they say that this one is solved, but I still have a question regarding the layout.

Whenever I set the height property, the margin on the left side widens. This only happens in IE. Why is this so, and how can I remedy the problem?

I think I acurately demonstrate the problem for IE at this url:

http://www.kaginweb.com/rhk/layout/test.html

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Automatic resizing divs

Does it double?

Could be the infamous IE left float bug, where (iirc) floated elements in IE have their margins expanded.

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Automatic resizing divs

Otherwise known as the double margin bug. Wink The solution is to add display: inline to the float as well.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

Automatic resizing divs

Maybe I'm missing something fundamental here.

I have left the old layout alone, and created a new page that has the same html content, but uses a different style sheet. The urls are:

http://www.kaginweb.com/rhk/layout/test.html
http://www.kaginweb.com/rhk/layout/test2.html

As mentioned before, the first one has the "double margin" bug known in IE. However, I tried the display: inline; part in the upper right-hand float and changed the margin-left to 5px instead of 180px (175 was the original width, and 5 for the spacing). In IE, it still has the same error (double margin). In Mozilla, it eliminated the height characteristic, making it one line of text's height, and the second column sliding up under the first (and consequently next to the first row first column box). In both, it eliminated the full length width with auto-resizing that I had before (and is exhibited in the second row second column's box).

Maybe pointing me to a page that would help solve the problem rather than tackle the specific problem would be easier. I just am not sure which properties are causing the difficulty.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Automatic resizing divs

Was there a specific reason that you're posting up layouts without a DTD?

Quote:
Maybe I'm missing something fundamental here.

Yes there seems to be, if you're not familiar with why Doctypes are needed then read the link in my sig or google on 'Doctypes'

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

Automatic resizing divs

I apologize for that. I have fixed the doctypes so that they are at the top of each document. However, I'm still running into the same or similar errors.

In IE, I'm running into a seemingly different yet related margin - that now the 5px margin-left characteristic doesn't seem to be working on the bottom right box (the border seems to overlap with the color whereas it doesn't in the rest of the boxes). I'm not sure what to make of this.

Now I still believe there is something fundamental I'm missing. Any help would be greatly appreciated.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Automatic resizing divs

The second example does not want display:inline thats just for the float bug and only on the extreme float left or right butting the parent box I would stop playing with those proprietary mozilla properties and work the browsers with the same styles try margin-left:183px which will take into account the border widths you're using

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

Automatic resizing divs

Alright, I have eliminated the proprietary mozilla properties, and have altered the margin-left to 184px. However, I'm still getting the extra margin for the height-altered box. Sorry to beat around the bush. Is this a display problem, a margin problem, a padding problem, a doctype problem, or something else that I'm missing? The url for the third version, consequently, is

http://www.kaginweb.com/rhk/layout/test3.html

RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

Automatic resizing divs

Well I've tried most things that I know (clearly I don't know all of CSS then), and I can't get anything to work. Will I have to deal with the extra margin in IE or is there another way to fix this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Automatic resizing divs

I don't see anything obvious that should cause the anomoly. And, the only difference is that one box has a height, triggering hasLayout, and the other doesn't.

Test by giving the lr box {zoom: 1;}, and alternatively remove the height property from the tr box. If these changes affect the margin, the culprit is IE's hasLayout bug[1], and we know where to research for a fix.

It happens that that is exactly the culprit, in the form of the 3 pixel jog bug. When the box next to the float has layout, the whole box is shoved over. Notice the text in the lr box is offset within the box, and aligns with the text in tr.

cheers,

gary

[1] I consider this a design bug. I'm sure the MSFT programmers have good reason for it, but … .

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

RyanK
Offline
Regular
Last seen: 13 years 18 weeks ago
Timezone: GMT-5
Joined: 2006-06-15
Posts: 17
Points: 0

Automatic resizing divs

So essentially I'll have to deal with the bug then - I can't seem to find a resolution. Maybe I'll just have to fill up the content of a div with line breaks, etc., and see how that renders (better or worse). Either that, or deal with the extra gap from left to right and set the bottom right box to height: 1px;.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Automatic resizing divs

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.