Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS HELP!!! i've tried to do the right thing!!! 1

Status
Not open for further replies.
MasterKaos

MasterKaos

Programmer
Jan 17, 2004
107
GB
Ok. I'm not asking for much. I just want a simple two column layout centred in the middle of browsers of different resolutions.

What i want is a 'page' that appears in the middle of your browser. If you are looking at this at 800 x 600 it will pretty much take up the whole screen. If you are looking at this with 1024 x 768 it will have grey spaces on the right and left filling out the extra space. Same goes for 1280 x 1024 only more so. I want to have a top 'title' bar and a left 'nav bar'.

Look at this with IE 6 or any other browser that conforms to W3C CSS:


Now look at it with IE 5 or NN4 or any other broswer that supports CSS but not enitrely....

How can i get this to look correct in IE6 AND IE5 ????

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.
 
Sort by date Sort by votes
Wrap your content in a DIV and center the div.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
tviman:

I don't understand, could you be a bit more specific?

I thought i was wrapping my content in a DIV and centering the DIV:

Code: 
<body>
<div align="center">
<div class="main">

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.
 
Upvote 0 Downvote
IE thinks differently to other browsers on how to interpret this sort of thing. It treats "text-align" as referring to the element's box where as other browsers correctly interpret that to mean the contents of the box.

You need to do something like this to cover all browsers and keep your content left aligned in each column.

Code: 
body {
  text-align: center;
  }

#container {
  width: 500px;
  margin: 0 auto;
}

#left, #right{
  width: 50%;
  text-align: left;
}

#left {
	float: left;
	}

#right {
	float: right;
}

Code: 
<div id="container">
  <div id="left">
    blah blah
  </div>
  
  <div id="right">
    blah blah
  </div>
</div>
 
Upvote 0 Downvote
I think my question wasn't very clear. My problem is not so much getting the centred "page" to work, but rather what's going on inside it. I want to a have left nav bar column that has a navber image a the top, then simply runs white down to the bottom of the page, ie where the content of the right column runs out of text.

But the problem is that the nav bar image is obviously shorter than the text content, so the area below the image ends up being grey like the background.

The only way i have found to get around this is to pad the left side of the right content column to the width of the left nav bar column, and layer it underneath the nav bar using z-indexes. This fills the area below the left column with white.

So basically i have a centred container inside which is a top title bar, left nav bar and a right content bar. Add to this a bunch of "sandbag divs" in the right content column for fancy text wrapping and you have one messy css file!

Now all this renders beautifully in IE6 and FireFox etc, but it's MESS in IE5.

I would really appreciate it if someone could look at the CSS and HTML


In a CSS conformant browser and then in IE5 and suggest how i could get the desired effect in IE5.

Thanks!!!!

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.
 
Upvote 0 Downvote
I'd try something like this:

Code: 
<div id="centerDiv">
<table id="mainTable">
<tr>
<td><div id="navDiv">...</div></td>
<td><div id="bodyDiv">...</div></td>
</tr>
</table>
</div>

I haven't dropped any styles in, but you could set the background colour of the <td> that encloses the navDiv to the same color as the navDiv... and the colour would continue to the bottom of the page content.

I'm proposing the use of a table for layout. Bad me? Nope. Not at all. You mention IE 5... and that particular browser variant is riddled with CSS bugs. If you want a solution that will span multiple older browsers... then this is perfectly viable.

Tables can still pass W3C strict XHTML 1.1 checks too (but I do understand your willingness to avoid them). Sometimes it's smarter to go with an inferior solution to get something "out" there - and work on a better solution for "version 2".

Jeff
 
Upvote 0 Downvote
Yes Jeff you are right about tables. Actually before you even posted i gave up on being a good CSS boy and decided to use tables. The table handles the centred top bar, left column and right content column layout nicely. I then use CSS divs inside the right content column to do my sanbag text-wrapping tricks.

It now looks correct in IE5, IE6 and FireFox 0.8. YaY!

Oh how i wish IE5 never existed, but the fact is it does and us developers have to find ways to live with it. Sigh.

Thanks for your help guys!

----------------------------------------------------------------------------
The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.
 
Upvote 0 Downvote
MasterKaos said:
Oh how i wish IE5 never existed...
Click to expand...
I had to laugh painfully at this, because I feel your pain. Rewind three years ago and we were saying this exact thing about Netscape 4. Fast forward three years ahead and we will be saying it about IE 6. It will never end.

News and views of some obscure guy
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
769
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
651
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
233
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top