Hey everyone if you check out
<!-- m --><a class="postlink" href="http://www.alabu.com/ibc/">http://www.alabu.com/ibc/</a><!-- m -->
it probably looks fine, but if you shrink the window horizontally, eventually all the "content here" gets pushed underneath the links on the left hand side. what i would like to happen is for the div to always stay on top of the page and not go underneath the links. I'm using a basic CSS layout from dreamweaver mx 2004 (which is organized horribly, i think). I found a fix in mozilla (set margin-left to 180px and margin-top to -170px) but that cause all kinds of problems in IE. Is there anyway to make the div stay where it is? thanks!!
~HalYou'll want to use source-ordered columns (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->) then.
In a nutshell, try this:
<html>
.
.
.
#mainContent {
float: right;
width: <MAIN CONTENT WIDTH>px;
}
#menu {
margin-right: <MAIN CONTENT WIDTH>px;
}
</style>
<body>
<div id="mainContent"></div>
<div id="menu"></div>ok this is what i have, what i would like is for column 1 to be 175 px wide, and on the left edge of the screen, and for column 3 to be 175px wide and on the right edge of the screen, and column 2 to be whatever size it needs to be to make up the difference. i've messed around with it quite a bit but i cant seem to figure it out, any help would be very much appreciated.
.float-wrapper {float: left; width: 66%;}
/*** This can be floated left or right ***/
.first-col {float: left; width: 50%}
/*** This can be floated left or right ***/
.second-col {margin-left: 50%;}
/*** This gets margined the same direction
as div.first-col gets floated ***/
.third-col { margin-left: 66%;}
/*** This gets margined the same direction
as div.float-wrapper gets floated ***/
.clearfooter {clear: both;}
p {padding: 10px;}
and the html:
<div class="float-wrapper">
<div class="first-col">
<p>One One One One One One One One One</p>
</div>
<div class="second-col">
<p>Two Two Two Two Two Two</p>
</div>
</div>
<div class="third-col">
<p>Three Three Three Three Three</p>
</div>
<p class="clearfooter">Clearing Footer</p>
EDIT: i see that on that page you gave me he says what i want is impossible with source ordered. can anyone give any guidance as to how i would approach doing this? left: 175px, right: 175px, center: 100%-350px. thanks!!That is correct that source-ordered columns don't have the flexibility, to have the middle column simply fill up the remaining space. What you need to do is place your main content last, give the left and right columns widths, then float them left and right respectively. Next, set the middle column's left and right margins to what the left and right columns widths are, respectively.
Having your main content first isn't written anywhere in stone. The only thing you need to remember is to place some basic page navigation before your three columns that allows 4.0 and older browser users and handheld users to jump to certain sections of a page: Navigation, Main Content, Other Info. Something like that.
EDIT: The page you linked-to the first time has the menu disappear when javascript is disabled.yeah I think I figured it out, I found some other examples that helped...
P.S. about the menu, thats why i have the other menu on the side... but is there a way to make the top menu not disappear when js is disabled?
<!-- m --><a class="postlink" href="http://www.alabu.com/ibc/">http://www.alabu.com/ibc/</a><!-- m -->
it probably looks fine, but if you shrink the window horizontally, eventually all the "content here" gets pushed underneath the links on the left hand side. what i would like to happen is for the div to always stay on top of the page and not go underneath the links. I'm using a basic CSS layout from dreamweaver mx 2004 (which is organized horribly, i think). I found a fix in mozilla (set margin-left to 180px and margin-top to -170px) but that cause all kinds of problems in IE. Is there anyway to make the div stay where it is? thanks!!
~HalYou'll want to use source-ordered columns (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->) then.
In a nutshell, try this:
<html>
.
.
.
#mainContent {
float: right;
width: <MAIN CONTENT WIDTH>px;
}
#menu {
margin-right: <MAIN CONTENT WIDTH>px;
}
</style>
<body>
<div id="mainContent"></div>
<div id="menu"></div>ok this is what i have, what i would like is for column 1 to be 175 px wide, and on the left edge of the screen, and for column 3 to be 175px wide and on the right edge of the screen, and column 2 to be whatever size it needs to be to make up the difference. i've messed around with it quite a bit but i cant seem to figure it out, any help would be very much appreciated.
.float-wrapper {float: left; width: 66%;}
/*** This can be floated left or right ***/
.first-col {float: left; width: 50%}
/*** This can be floated left or right ***/
.second-col {margin-left: 50%;}
/*** This gets margined the same direction
as div.first-col gets floated ***/
.third-col { margin-left: 66%;}
/*** This gets margined the same direction
as div.float-wrapper gets floated ***/
.clearfooter {clear: both;}
p {padding: 10px;}
and the html:
<div class="float-wrapper">
<div class="first-col">
<p>One One One One One One One One One</p>
</div>
<div class="second-col">
<p>Two Two Two Two Two Two</p>
</div>
</div>
<div class="third-col">
<p>Three Three Three Three Three</p>
</div>
<p class="clearfooter">Clearing Footer</p>
EDIT: i see that on that page you gave me he says what i want is impossible with source ordered. can anyone give any guidance as to how i would approach doing this? left: 175px, right: 175px, center: 100%-350px. thanks!!That is correct that source-ordered columns don't have the flexibility, to have the middle column simply fill up the remaining space. What you need to do is place your main content last, give the left and right columns widths, then float them left and right respectively. Next, set the middle column's left and right margins to what the left and right columns widths are, respectively.
Having your main content first isn't written anywhere in stone. The only thing you need to remember is to place some basic page navigation before your three columns that allows 4.0 and older browser users and handheld users to jump to certain sections of a page: Navigation, Main Content, Other Info. Something like that.
EDIT: The page you linked-to the first time has the menu disappear when javascript is disabled.yeah I think I figured it out, I found some other examples that helped...
P.S. about the menu, thats why i have the other menu on the side... but is there a way to make the top menu not disappear when js is disabled?