Forum Moderators: not2easy
The right one is set to float: right and the left is set to float: left.
I've tried to set width of the left one to many options and left it out altogether. Again it works in IE7, but not in Firefox. I'm in the process of converting my CSS to be compliant for both and this is really stumping me.
Also with this, in IE, if I set the right margin on the left column to be 20px, that works fine, but then a HR after the columns are to appear ends up appearing in the 20px gap between the two columns -- very odd.
div.FrontPageLeft
{
display:block;
float:left;
color:#ffffff;
vertical-align:top;
margin: 0px auto 0px 0px;
}div.FrontPageRight
{
display:block;
width:220px;
float:right;
color:#ffffff;
vertical-align:top;
}
This is the current incarnation -- I've tried several different options.
The container is a table cell if that matters.
TIA!
Kevin
easiest way is to put your right floated content (or the div with the specific width) first in the source code. Then DO NOT float the left content at all, so it automagically stretches to fit, but do give it a right margin equal to or more than your right content if you don't want the left to wrap (assuming this when you speak of columns)
CSS:
#holder {width: 100%;}
#holder td {vertical-align: top;}
div.fpl {
color:#fff;
background: #777;
margin-right: 230px; /* >= 200px */
}div.fpr {
width:220px;
float:right;
color:#fff;
background: #abd;
}HTML:
<table summary="" id="holder">
<tr>
<td>
<div class="fpr">right content</div>
<div class="fpl">left content<br > add more lines</div>
</td>
</tr>
</table>
is that what you're after?
