I am currently developing a video-game web site. Everything has been going quite fine with some minor issues I have seemed to overcome, however, this one comes to a puzzle to me I just cannot solve.
I have attached the visual outcome of what I am talking about (Please refer to the bottom of this post for the attachment). In the first example you will notice that the menu blocks (blue rectangles) & the text (test) are within the wrapping div.
However, in Firefox and Opera you will notice that nether the Menu blocks or the text are within the wrapping div.
I am wondering why this is? Here is the code I have regarding those parts of the layout.
I was looking up the z-index property, I am wondering if this could help me out, however I do not how to really use it.
CSS: Wrapping Div
#contentwrapper {
background-color:#e4e6eb;
text-align:left;
width:780px;
height:auto;
overflow:visible;
border:1px solid #0a5ba1;
}
CSS: Menu Div (Left)
#leftmenu{
float:left;
position:relative;
left:12px;
background-color:#3300CC;
width:160px;
height:auto;
}
CSS: Wrapping Div (Right)
#rightmenu{
float:right;
position:relative;
right:12px;
background-color:#3300CC;
width:160px;
height:auto;
}
CSS: Content Div (Where the text is)
.content{
float:right;
width:440px;
height:auto;
}
HTML: How I placed the divs in the .xhtml page
<!-- Begin Right Menu -->
<div id="rightmenu">
fddfgfdg
</div>
<!-- End Right Menu -->
<!-- Begin Content Area -->
<div class="content">
test
</div>
<!-- End Content Area -->
<!-- Begin Left Menu -->
<div id="leftmenu">
fddfgfdg
</div>
I've tried several troubleshooting ideas, from changing position values, completely removing them, etc. Nothing I've tried to so far has came out to look like what I want it to.
Any insight on this is greatly appericated,
Thanks for your time!
- Nathan B.Follow your leftmenu div with a
<div style="clear:both"></div>It works in IE because IE gets it wrong.
Common problem. Floats inside a div, when the div has nothing else, the borders collapse. IE gets it wrong by containing the floats.
There are several ways to get around this and are listed many places, here and by googling but unfortunately I've gotta run. Sorry.<br style="clear:both;" /> right before the last </div> should fix it
I have attached the visual outcome of what I am talking about (Please refer to the bottom of this post for the attachment). In the first example you will notice that the menu blocks (blue rectangles) & the text (test) are within the wrapping div.
However, in Firefox and Opera you will notice that nether the Menu blocks or the text are within the wrapping div.
I am wondering why this is? Here is the code I have regarding those parts of the layout.
I was looking up the z-index property, I am wondering if this could help me out, however I do not how to really use it.
CSS: Wrapping Div
#contentwrapper {
background-color:#e4e6eb;
text-align:left;
width:780px;
height:auto;
overflow:visible;
border:1px solid #0a5ba1;
}
CSS: Menu Div (Left)
#leftmenu{
float:left;
position:relative;
left:12px;
background-color:#3300CC;
width:160px;
height:auto;
}
CSS: Wrapping Div (Right)
#rightmenu{
float:right;
position:relative;
right:12px;
background-color:#3300CC;
width:160px;
height:auto;
}
CSS: Content Div (Where the text is)
.content{
float:right;
width:440px;
height:auto;
}
HTML: How I placed the divs in the .xhtml page
<!-- Begin Right Menu -->
<div id="rightmenu">
fddfgfdg
</div>
<!-- End Right Menu -->
<!-- Begin Content Area -->
<div class="content">
test
</div>
<!-- End Content Area -->
<!-- Begin Left Menu -->
<div id="leftmenu">
fddfgfdg
</div>
I've tried several troubleshooting ideas, from changing position values, completely removing them, etc. Nothing I've tried to so far has came out to look like what I want it to.
Any insight on this is greatly appericated,
Thanks for your time!
- Nathan B.Follow your leftmenu div with a
<div style="clear:both"></div>It works in IE because IE gets it wrong.
Common problem. Floats inside a div, when the div has nothing else, the borders collapse. IE gets it wrong by containing the floats.
There are several ways to get around this and are listed many places, here and by googling but unfortunately I've gotta run. Sorry.<br style="clear:both;" /> right before the last </div> should fix it