On the following site the main content is contained in 2 columns:
<!-- m --><a class="postlink" href="http://dev.property-description.com/">http://dev.property-description.com/</a><!-- m -->
The column headed "Home" contains the navigation links and the column "A Room Template Example". The second column contains a large jpg image.
The problem is that when the page is viewed in an 800 by 600 screen via Explorer, the column structure collapses. Is there any way of stopping this happen.
There is no problem with Firefox.
The html for the columns is:
<div class="content_cms">
<div class="content_cms_navigation">
</div>
<div class="content_cms_content">
</div>
<div class="clearer"> </div>
</div>
The Css is:
.content_cms {
}
.content_cms_navigation {
margin-left: 5px 0px 0px 0px;
float:left;
width: 25%;
}
.content_cms_content {
float:left;
width: 65%;
border-left: 1pt dashed gray;
}
Hope this is clear. THanks in advance for any helpCan you explain what you mean by "collapses"? You've used %'s to specifiy column width, but you have difinitively-sized elements in them (including a big image) - so that's not going to degrade very gracefully. If I were you I'd figure out actual px sizes I want those columns to be and make them that, instead...Change your inner <div> to a <table>, try below:
<div class="content_cms">
<table width=100%>
<tr>
<td class="content_cms_navigation">
</td>
<td class="content_cms_content">
</td>
</tr>
</table>
<div class="clearer"> </div>
</div>You shouldn't be encouraging people to use tables...
You could give your .content_cms a fixed width but I don't see the current behavior as all bad. Also I think you expect your page background to be white but you haven't set it so it's pink on my browser.Thanks ray326.
Re the page background, would you set this via the <body> tag?yes
body {
background-color: #fff;
}As bathurst_guy indicated, it's best to set all your global style information like the page background and default font-family in a body selector.
<!-- m --><a class="postlink" href="http://dev.property-description.com/">http://dev.property-description.com/</a><!-- m -->
The column headed "Home" contains the navigation links and the column "A Room Template Example". The second column contains a large jpg image.
The problem is that when the page is viewed in an 800 by 600 screen via Explorer, the column structure collapses. Is there any way of stopping this happen.
There is no problem with Firefox.
The html for the columns is:
<div class="content_cms">
<div class="content_cms_navigation">
</div>
<div class="content_cms_content">
</div>
<div class="clearer"> </div>
</div>
The Css is:
.content_cms {
}
.content_cms_navigation {
margin-left: 5px 0px 0px 0px;
float:left;
width: 25%;
}
.content_cms_content {
float:left;
width: 65%;
border-left: 1pt dashed gray;
}
Hope this is clear. THanks in advance for any helpCan you explain what you mean by "collapses"? You've used %'s to specifiy column width, but you have difinitively-sized elements in them (including a big image) - so that's not going to degrade very gracefully. If I were you I'd figure out actual px sizes I want those columns to be and make them that, instead...Change your inner <div> to a <table>, try below:
<div class="content_cms">
<table width=100%>
<tr>
<td class="content_cms_navigation">
</td>
<td class="content_cms_content">
</td>
</tr>
</table>
<div class="clearer"> </div>
</div>You shouldn't be encouraging people to use tables...
You could give your .content_cms a fixed width but I don't see the current behavior as all bad. Also I think you expect your page background to be white but you haven't set it so it's pink on my browser.Thanks ray326.Re the page background, would you set this via the <body> tag?yes
body {
background-color: #fff;
}As bathurst_guy indicated, it's best to set all your global style information like the page background and default font-family in a body selector.