Trying to convert to CSS - newbie question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Trying to convert to CSS - newbie question

Post by Toneboy »

Trying to go from this to something more like this.

Am trying to put the "insert smart comment here" right alongside the logo though, and can't get it to go there without using an absolute value. Is that the only way to put two divs right adjacent to one another?

Here's the code for my CSS thus far:

Code: Select all

body {
	margin:0px;
	padding:0px;
	font-family:helvetica, verdana, arial, sans-serif;
	color:#000000;
	background-color:white;
	}
p {
	font:11px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
#Content>p {margin:0px;}

a {
	color:#09c;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font-family:verdana, arial, helvetica, sans-serif;
	}
a:link {color:#FF0000;}
a:visited {color:#FF0000;}
a:hover {background-color:#FFFFFF;}


#content {
	margin:0px 0px 0px 0px;
	padding:10px;
	}

#quote {
	position:absolute;
	top:0px;
	left:500px;
	margin:0px 0px 0px 0px;
	padding:10px;
	}

#logo {
	margin:0px 0px 0px 0px;
	padding:10px;
	}

#navbar {
	margin:0px 10px 10px 10px;
	padding:0px;
	background-color:#FFFF00;
	}
The section in question is the #quote section.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

in the past, I've done something like the following to get two div's side-by-side:

Code: Select all

<html>
<style>
.container
{
	width: 100%;
	height: 50px;
}

.core
{
  width: 100%;
  height: 100%;
  background-color: orange;
}

.left
{
  float: left;
  width: 50%;
  height: 100%;
  background-color: yellowgreen;
  margin-right: -1px;
}

.right
{
  float: right;
  width: 50%;
  height: 100%;
  background-color: red;
  margin-left: -1px;
}

.clear
{
  clear: both;
}
</style>
<body>
<div class="container">
	<div class="core">
		<div class="right">Right Column</div>
		<div class="left">Left Column</div>
		<!--<div class="clear"></div>-->
	</div>
</body>
</html>
quickly tested in IE 6.0.2900 SP2 and Firefox 1.0.6
User avatar
hopfateam
Forum Newbie
Posts: 12
Joined: Sun May 29, 2005 6:30 pm
Location: Germany
Contact:

Post by hopfateam »

Or try it like this this:

Code: Select all

.div1{float:left;width:500px;}
.div2{float:left;width:100px;}
This should place those to divs next to each other, if up-level div/table has minimum width of 600px, otherwise just fix the numbers
User avatar
Devnull
Forum Commoner
Posts: 52
Joined: Fri Oct 22, 2004 2:19 pm

Post by Devnull »

If you're a newbie at this CSS thing I can reccomend you a really good site; HTML Dog.
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Post by Toneboy »

Very useful, thanks everyone.

The HTML Dog link is especially useful. I'm especially pleased that the answers I'm looking for are in the "advanced" section*. :lol:

(Yes, I should have put a reference to css layouts in the thread title.)
theda
Forum Contributor
Posts: 332
Joined: Sat Feb 19, 2005 8:35 am
Location: USA

Post by theda »

It's nice to see you convert to CSS layouts, although confusing as it is... I use it, makes my site look snazzy... Then again, if the CSS layouts don't load, then... Oops. garbled page! (But content still readable...)
Post Reply