CSS Layout - want content to be higher in source code

**jag5311** · Sep 30, 2004 18:17

Ok, I have a layout that has the most common header, left column, center, and right column, including a footer

On my juicedthoughts.com website, I have the same layout, but my content is the last item in the source code.

I don't know how to accomplish getting my content to be either above one of the columns or above both of them, but still maintain the layout.

Any help is appreciated

http://www.juicedthoughts.com/images/layout.gif

Thanks

**bradles** · Sep 30, 2004 18:41

Hi Jag,

If you posted some code we might get a better idea of what you are trying to do.

If I'm correct in my thinking then you want your content to appear as high up in the page as possible. If you have a link to your stylesheet in the page then the only code you would be likely to have in your page would be something like:

Code:

<body>
<div id="header"> Header Content</div>
<div id="content"> Content </div>
<div id="footer"> Footer Content </div>
</body>

That's just a crude example but I'm not entirely sure of what you want.

Brad.

**jag5311** · Sep 30, 2004 19:20

Well, here is my code in a nutshell. Right now, with this layout, my right column appears BELOW the content area, but the left column and the content area look great with their position on my screen. I have left out the code up to the BODY and the ending of the body.

Code:

<div id="container">
	<div id="contentwrap">
		<div id="header">
			<div id="mainmenu">
				<ul>
					<li><a href="#">Why</a></li>
					<li><a href="#">Advertise</a></li>
					<li><a href="#">Rating System</a></li>
				</ul>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Rules</a></li>
					<li><a href="#">Terms</a></li>
				</ul>
				<br clear="all" />
				<div style="clear: both;"></div>
			</div>
		</div>
		
		<div id="menucontain">
			<ul id="leftmenu">
                               <li>Item1</li>
			</ul>
		</div>
		
		<div id="contentarea">
			<h2>Header</h2>
			<p>content goes here. This is what I want to be on top</p>
		</div>
		
		<div id="rightmenucontain">
			<p>Right content goes here.
		</div>
		
	</div>

Here is my current CSS

Code:

body {
	background-image: url(../images/lower-bg.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	margin: 0px;
	padding: 0px;
	font-size: 0.8em;

}
div#container {
	background-image: url(../images/upper-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	text-align: center;


}
div#header {
	background-image: url(../images/logo.gif);
	background-repeat: no-repeat;
	background-position: 15px 15px;
	height: 139px;
	width: 670px;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D3D9DE;
	margin-right: auto;
	margin-left: auto;




}
div#contentwrap {
	text-align: left;
	width: 720px;
	margin-right: auto;
	margin-left: auto;
}
div#mainmenu {
	margin: 35px 30px 0px 0px;
	padding: 0px;
	float: right;
}
div#mainmenu ul {
	float: right;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 10px;
	margin-left: 10px;
	padding: 0px;





}
div#mainmenu ul li {
	background-image: url(../images/arrow.gif);
	background-repeat: no-repeat;
	background-position: left 55%;
	margin: 2px 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	list-style-type: none;
}
div#mainmenu a:link, div#mainmenu a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: bold;
	color: #607089;
	text-decoration: none;

}
div#mainmenu a:hover {
	color: #6F020B;
	text-decoration: underline;
}
ul#leftmenu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
ul#leftmenu li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEFF0;

}
div#menucontain {
	margin: 30px 0px 0px 3px;
	padding: 0px;
	float: left;
	width: 120px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #EEEFF0;
	border-bottom-color: #EEEFF0;
	font-family: Arial, Helvetica, sans-serif;


}
ul#leftmenu a:link, ul#leftmenu a:visited {
	display: block;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #EEEFF0;
	margin: 0px;
	padding: 3px 0px 3px 3px;
	font-size: 90%;
	width: 99%;
	font-weight: bold;
	color: #607089;





}
ul#leftmenu a:hover {
	background-color: #EEEFF0;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #204D92;
}
ul#leftmenu li.noborder {
	border-bottom-style: none;
}
div#contentarea {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 95%;
	color: #596882;
	margin-left: 150px;
	margin-top: 25px;
	margin-right: 260px;



}
div#contentarea  h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 150%;
	font-weight: bold;
	color: #604854;
	margin-top: 10px;
	margin-bottom: 20px;
}
div#contentarea p {
	line-height: 19px;
	margin-top: 10px;
	margin-bottom: 10px;
}
img.homeimage {
	margin: 4px;
	float: right;
	border: 2px solid #66789A;
	padding: 0px;


}
div#rightmenucontain {
	margin: 0px 15px 0px 0px;
	padding: 0px;
	float: right;
	width: 220px;

}

**jag5311** · Sep 30, 2004 19:32

by the way, placing the right column underneath the left column in the code will achieve the effect I want, but that just pushes my content in the source even farther down.

**vgarcia** · Oct 1, 2004 05:31

I think you're going to have to switch from using floating to absolute positioning in order to do this sanely. You can use negative margins on floats if you wanted to change the source code ordering, but I always found it easier to just go with absolute positioning for your sidebar elements.

**jag5311** · Oct 1, 2004 07:16

well, I know I hate absolute positioning

, plus, is that going to make it harder to achieve consistency among browsers?

Not a huge deal. Problem with my juicedthoughts website is the amount of content that takes up the columns, so there is ALOT in the source code before my content would ever get read.

In the case of the new site I am doing, there is a series of about 15 links on the left and 3 main boxes on the right, so the amount of content is less , but still, my content ends up last in the code.

I wish there was a float middle

j/k

**Bravogolf** · Oct 1, 2004 08:39

Heh, so do I. We're getting there though. I like your website by the way

**jag5311** · Oct 1, 2004 08:47

Thanks Bravo, I appreciate it.

**vgarcia** · Oct 1, 2004 09:31

Originally Posted by jag5311

well, I know I hate absolute positioning

, plus, is that going to make it harder to achieve consistency among browsers?

I find absolute positioning a whole lot more consistent than floats, but that's based on personal experience and the layouts I design may be wildly different from yours. I guess it's all in how you use each layout method though.

User Tag List

Thread: CSS Layout - want content to be higher in source code

Thread Tools

Display

CSS Layout - want content to be higher in source code

Bookmarks

Bookmarks

Posting Permissions