Page 1 of 1

Trying to convert to CSS - newbie question

Posted: Sun Aug 07, 2005 12:31 pm
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.

Posted: Sun Aug 07, 2005 2:45 pm
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

Posted: Sun Aug 07, 2005 4:53 pm
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

Posted: Mon Aug 08, 2005 5:02 am
by Devnull
If you're a newbie at this CSS thing I can reccomend you a really good site; HTML Dog.

Posted: Mon Aug 08, 2005 7:04 am
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.)

Posted: Mon Aug 08, 2005 7:45 am
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...)