21 replies [Last post]
Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

Is there a simple way to create the attached layout without using negative margins on the left div? I want the center div to be fixed and to STAY centered, and the left (nav) div to keep to the left of it, as in the picture.

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 16 years 15 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

2 Column fixed-width

I don't think that's do-able. I tried it, and it didn't work. See www.texassportsweekly.com for the results. That'll be replaced soon, so no worries for, me, but not by a similar layout. Try resizing the window to see how it breaks. Unless you make the content vairbale width, you can't center it with things beside it.

You could make it, say, width 60% or something and give it left and right margins of 20%, then float your nav left and give it a width of 20%, if you like. But that's not, I think, what you're looking for either.

->Day<-

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 Column fixed-width

It's possible. Wrap the two divs in a container that is as wide as the content plus two widths of the nav. Float the nav left and put a left and right margin on the content equal to the nav width. Then put auto margins on the container.

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 16 years 15 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

2 Column fixed-width

Hah! I am proved wrong. That's fairly elegant, too, in my opinion. Learn something new every day, here. Which is, really, the point of my being here.

->Day<-

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

I took your advice wolfcry..

http://medio-core.com/2column.html

It seems to work (almost) as intended in IE.. although it's not exactly centered - looks to be a bit off to the right.

However, in Firefox, the nav divs float over the top of the top-left of the content div.

Any ideas?

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

2 Column fixed-width

Your left & right margins on #content need to be equal to (or greater than) the width of #nav, not half the width.

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

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

Tyssen wrote:
Your left & right margins on #content need to be equal to (or greater than) the width of #nav, not half the width.

Ahh.

I did that and now it looks great in FF, but in IE the content div is pushed down below the nav divs.

http://medio-core.com/2column.html

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

2 Column fixed-width

Make your #container wider.

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

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

http://medio-core.com/2column.html

I've added a background colour to the container div so you can see what I'm saying easier.

I made the left and right margins on the content div 174px, as the content div = 402px (including the 2px border on both sides). The container div = 750px wide.

750 = 174*2 + 402

This should make the content div dead center within the container, as the margins plus the width of the div itself add up to be. (Making the left/right margins of the content div made it center in Firefox, but made it center between the right border of the nav div and the right border of the container div in IE)

HOWEVER, when I had the margins set to 174px, it would push the content div down as it did before (when you told me to make the container div wider)

So I set the margins to 173. This makes it look essentially as I want it to in both browsers.

The problem is, the nav divs are in slightly different positions in both browsers. In IE there is a bigger margin between the floated nav divs and the content div, whilst in FF they are closer.

Is there any way to make them display identically in both browsers?

It sounds like the two browsers are interpreting widths differently.

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

Just a little bump - I edited my last post.

ALSO NOTE: I have had the doctype undefined this entire time. If I set it to transitional, it pushes the CONTENT div downwards so it is below the floated nav divs.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 Column fixed-width

put the #container back to the original width. It's an IE float bug. IE is adding a 3px margin to the float. You can remove it like this:

* html #nav {
    margin-right: -3px;
    }

Try this out. If it still doesn't work in IE you may have to reduce the #content left margin by 3 px as well (for IE only with * html hack again).

Also note, in your example page you've used the #nav id twice - you can't. IDs are a once per page use only. Switch to classes or use better semantic markup (a list perhaps).

Edit: AND YOU NEED A DOCTYPE! IE is in quirks mode...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 Column fixed-width

Do all your work in standards mode and test against Firefox. Then when that is working, hack for IE.

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

Without a doctype, the hack worked perfectly.

With a doctype, the hack worked to some extent - however there is still a noticable difference in the way the two display. Any idea why?

I changed the margins on the content div back to 174px so that it equals the width of the container again. I also removed that duplicate nav div - oops.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 Column fixed-width

I don't have IE here so I can't see what you're referring to. Can you post pics?

re: the doctype - it doesn't matter whether you use transitional or strict, html or xhtml, just that it's a full doctype complete with url.

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

Sure Smile

Also, if I change the left/right margins to AUTO, it stays excactly the same in Firefox, but in IE, the content div is pushed left, so the right margin of the floated div and the left margin of the content div are touching.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 Column fixed-width

Don't use the auto margins on the #content - just the container. Reset the #content margins to 174px. Eliminate the second IE hack - it looks like it's not needed and thats whats causing the smaller space.

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

Yeah, the margins were at 174px when I took those screens. I just wanted to see what happened.

Removing the second hack pushes the content div down below the floated div.

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

2 Column fixed-width

Just for grins, here's a version that uses AP for the sidebar. Using % sizing gives you a nice fluid layout, but you specified fixed, so fixed it is.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>xxx</title>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
<style type="text/css">
/*<![CDATA[*/
html, body {
    margin: 0;
    padding: 0;
    }

body {
    background-color: white;
    color: black;
    font: 100% verdana, helvetica, sans-serif;
    }

p {
    font-size: 1em;
    }

h1, h2, h3 {
    background-color: #ddd;
    border-bottom: 1px solid black;
    color: black;
    font-family: georgia, geneva, serif;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    letter-spacing: .1em;
    }

#bigbox {
    width: 500px;
    border-right: 130px solid transparent;
    border-left: 130px solid transparent;
    position: relative;
    margin: 20px auto;
    }

#sidebar {
    position: absolute;
    left: -130px;
    top: 0;
    border: 1px solid black;
    width: 120px;
    }

#main {
    position: relative;
    border: 1px solid black;
    }

#footer {
    background-color: #ddd;
    border-top: 1px solid black;
    color: black;
    line-height: 3em;
    margin: 0;
    text-align: center;
    }

/*]]>*/
</style>
</head>

<body>
  <div id="bigbox">

    <div id="main">
      <h1>Generic Header</h1>

      <p>Main content context is here.</p>

      <p id="footer">&copy; 2005</p>
    </div><!-- end main -->

    <div id="sidebar">
      <h2>Nav Column</h2>

      <p>Sidebar context is here</p>
    </div><!-- end sidebar -->
  </div><!-- end bigbox -->
</body>
</html>

One of the few times that AP placement doesn't make for a fragile layout.

cheers,

gary

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

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

Tongue Damnit, that works perfectly hehe.

So no chance of fixing the way I was originally doing it?

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

2 Column fixed-width

Jayphen wrote:
Tongue Damnit, that works perfectly hehe.

So no chance of fixing the way I was originally doing it?
Of course it works perfectly. Would a graying, fat, bearded guru provide anything less? Tongue

I didn't really follow all the posts, beyond seeing that floats were in issue. So I decided to play in a different direction. There are several methods that will give you what you want. All involve more or fewer problems to solve.

If you've followed many of my posts, you'll know I generally advise against AP layouts. This case is a good example of their proper use.

cheers,

gary

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

Jayphen
Offline
Regular
Last seen: 16 years 24 weeks ago
Joined: 2005-08-09
Posts: 21
Points: 0

2 Column fixed-width

I just whipped up a 3-column layout using the same idea. I like it Wink

Thanks for your help! I give up on floats for now Tongue

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 16 years 15 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

2 Column fixed-width

kk5st wrote:
All involve more or fewer problems to solve.

Hah! Indeed. So all you've ruled out is the possibility that some other way involves the same number of problems to solve. Hee hee hee. Wink

->Day<-