CSS Layout Help Needed

Dev Shed Forums Sponsor:

August 5th, 2003, 11:54 AM

njc

Contributing User

Join Date: Jul 2003

Posts: 46

Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 10

CSS Layout Help Needed

( http://www.njcc.net/index2.html )

I need that right part to be moved up... like where the left nav-bar is. It scales how i want to, the bottom is right, the left has a static pixel width like i want, i just need that right bar to move up... here's the style sheet

Code:

body {
	font-family: verdana, sans-serif;
	font-size: 12px;
	background-color: #cccccc;
}

p {
	text-align: justify;
}

#top {
	margin: 20px 20px 0px 20px;
	padding: 10px;
	border: 5px solid #000;
	background: #ccc;
	height: 100px;
}

#nav-left {
	background: #ccc;
	top: 120px;
	left: 0px;
	border: 5px solid #000;
	margin: 20px;
	width: 250px;
}

#content-right {
	margin: 20px;
	margin-left: 290px;
	border: 5px solid #000;
	padding: 5px;
}

#bottom {
	margin: 20px;
	text-align: right;
	border: 5px solid #000;
	padding: 5px;
}

August 5th, 2003, 12:52 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

Code:


#nav-left {
	background: #ccc;
	float:	left;
	border: 5px solid #000;
	margin: 20px;
	width: 250px;
}

you can use float,

works in mozFB, opera7, konqueror
can't check it in ie here, but i assume it will work
there,

August 5th, 2003, 12:53 PM

njc

Contributing User

Join Date: Jul 2003

Posts: 46

Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 10

nice, thank you

August 5th, 2003, 01:03 PM

njc

Contributing User

Join Date: Jul 2003

Posts: 46

Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 10

Ok, it looks great here...

http://www.njcc.net/index2.html

but if there's only a little bit of text on the page, in the content-right div, it kind of collapses on itself

http://www.njcc.net/index3.html

updated style sheet

Code:

body {
	font-family: verdana, sans-serif;
	font-size: 12px;
	background-color: #cccccc;
}

p {
	text-align: justify;
}

ul {
	list-style-image: url(bullet.jpg)
}

a:link {color: #000099}     /* unvisited link */
a:visited {color: #000099}  /* visited link */
a:hover {color: blue}   /* mouse over link */
a:active {color: blue}   /* selected link */
a.current {font-weight: bold}

.noCSS { display: none; }

#top {
	margin: 0px;
	margin-left: 20px;
	margin-right: 20px;
	padding: 0px;
	padding-left: 15px;
	background: #ccc;
	height: 100px;
}

#nav-left {
	background: #ccc;
	top: 120px;
	padding-top: 15px;
	left: 0px;
	float:left;
	border-top: 1px solid #000099;
	margin: 20px;
	margin-right: 0px;
	width: 200px;
}

#content-right {
	margin: 20px;
	margin-left: 240px;
	padding-left:5px;
	padding-top: 0px;
	border-left: 1px solid #000099;
}

#bottom {
	margin: 20px;
	margin-top: 5px;
	text-align: right;
	border: 1px solid #000099;
	padding: 5px;
}