Forum Moderators: not2easy
How can I have the main text on my site come before my top navigation and my left navigation menu? Easy with CSS?
My website is:.. ooops
thanks.
<No site specifics, thanks. See TOS #13 [WebmasterWorld.com]>
[edited by: SuzyUK at 1:36 pm (utc) on Dec. 30, 2005]
it's easy with 2 you just put the content div first and float the two columns in opposite directions whichever way round you want them to appear.. if you have a top menu you can put it last in the source and then position it absolutely as helenp says
with three columns it's still possible either using absolute positioning or some float wrap tricks.
one simple float wrap method works something like..
<style type="text/css" media="screen">
#container {
width: 780px;
margin: 0 auto;
background: #eee;
}#floatwrap {
float: right;
width: 600px;
}#content {
float: left;
width: 420px;
background: #fff;
}</style>
</head>
<body>
<div id="container"><div id="floatwrap">
<div id="content">main content in here<br />blah blah blah</div>
<div id="right-column">right column content</div>
<!-- close floatwrap --></div><div id="left-column">left column content</div>
<!-- close container --></div>
as in you put a wrapper div around the content and right columns and float it to the right which leaves the left column in place, then you float the actual content left inside the float wrapper div which corrects the display order of the right and content columns
Suzy
I don't use absolute positioning. I use 2 columns, where the left column is static and the right column can expand with the screen. Though I would like to force the 2nd column to only shrink to a set pix size of say 400 pix without wrapping horribly. I haven't been able to do this nicely yet. (I think the CSS is getting too messy)
My code is setup like this:
</head>
<body>
<div id="Layer1" style="position:absolute; left:504px; top:123px; width:198px; height:28px; z-index:1"><a href="http://www.<SomeWebsiteHere>.com/archives/" class="style2">Office Activate Web Blog</a> </div>
<div id="content">
<!-- InstanceBeginEditable name="header" -->
<!--#include virtual="/inc/header.inc" -->
<!-- InstanceEndEditable -->
<!-- START HORIZONTAL NAVIGATION -->
<!-- InstanceBeginEditable name="topnav" -->
<!--#include virtual="/inc/top-nav-home.inc" -->
<!-- InstanceEndEditable -->
<!-- END HORIZONTAL NAVIGATION -->
<div class="clear"></div>
<div id="dropshadow"></div>
<!-- START SIDE NAV -->
<!-- InstanceBeginEditable name="sidenav" -->
<!--#include virtual="/inc/home-nav.inc" -->
<!-- InstanceEndEditable -->
<!-- END SIDE NAV -->
<div id="maincontent">
<!-- START CONTENT -->
<br>
<!-- InstanceBeginEditable name="body" -->
thanks.