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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS layout issue 1

Status
Not open for further replies.
GUJUm0deL

GUJUm0deL

Programmer
Jan 16, 2001
3,676
US
Hi, all. I'm having some issue with layout style. It looks different in IE and FF. I want to be able to have the width of the left and right sections to be the same height no matter if one of the sections is smaller then the other.

Does that make sense?


Thanks.

_____________________________
Just Imagine.
 
Sort by date Sort by votes
You probably need to start by giving the page a full and complete doctype, which will prevent the browsers going into quirks mode. Then do a search on this forum for 'faux columns'. You will get several suggestions from there.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints
 
Upvote 0 Downvote
johnwm, thanks for the tip. I thought I had added that.

kellan4459, nice link. I'll review it and see how it can help.

I'll keep you guys posted, :)


_____________________________
Just Imagine.
 
Upvote 0 Downvote
Looks good in IE, but fails in FF. You would need to remove the absolute positioning from the #rightcolumn and adjust the width/padding of that column to make it fit side-to-side with the menu.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Upvote 0 Downvote
Is that screenshot from in FF2 or FF3? I'm asking cause I don't know if the "FF2" in the link name refers to the browser version or just noting that its a 2nd screenshot in FF.

Can you clear your cache and see if it resolves the issue?

_____________________________
Just Imagine.
 
Upvote 0 Downvote
It's a screenshot from FF2. Maybe this particular issue is being handled in another fashion in FF3, but given the popularity of FF2 and how FF3 is still very new, I would try and address the issue. What I mentioned should work for FF2 and FF3 and any other potential browser you might not have checked in (usually I found that other browsers would render the same as FF2).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
The thing is I did make the change locally but the alignment of the left and right cell did not work.

I just made some changes and this is what I get in FF3:
Code: 
#rightcolumn { float: left; color: #333; margin-top: -300px; padding: 0px 15px 5px 225px; width: 520px; min-height: 300px; height:auto !important; height: 300px; }

_____________________________
Just Imagine.
 
Upvote 0 Downvote
Sorry, my mistake. My browser was accessing an old cache of the CSS file. Can you check now in your FF and IE and see how it looks? Do you mind click some of the links at top to see how the page looks when a sub-category is available vs when one is not?



_____________________________
Just Imagine.
 
Upvote 0 Downvote
No, don't overcomplicate things. Let me try and explain:

Your initial issue was that the right column and the left column could not be floated side to side, because altogether they were too wide to fit the space. Thus the right column fell off below the left one. This was counteracted by the absolute position on the right column, which made it move away from the document flow and stay up. However, FF2 understood up as up and left, while FF3 (and IE7) still floated the element to the right of the left column.

In order to fix this issue for every browser to understand, you needed to do remove the positioning and adjust the size/margins/padding to make the two elements fit. This can be achieved by doing:
Code: 
#rightcolumn {
  color: #333333;
  float: left;
  height: auto !important;
  min-height: 300px;
  padding: 20px 15px 5px 0px;
  width: 490px;
}
This adjusts the size of the right column to make it fit, the positioning is removed and since now the styling for this element is relatively simple, it should work in all browsers.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Vragabond, ahhh now I see what you mean. I updated the style-sheet and it looks good in FF3 and IE6. Can you tell me how it looks in FF2?

_____________________________
Just Imagine.
 
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
2K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
907
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
744
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
326
tyutghf
tyutghf
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
857
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top