Closed Thread Icon

Preserved Topic: div's and style sheets Pages that link to <a href="https://ozoneasylum.com/backlink?for=18508" title="Pages that link to Preserved Topic: div&amp;#039;s and style sheets" rel="nofollow" >Preserved Topic: div&#039;s and style sheets\
 
Author Thread
JakeB
Paranoid (IV) Inmate

From: us
Insane since: Oct 2000

 posted posted 10-29-2001 03:03

I'm trying to make a page with 2 columns centered on the page. The text should have 10px to the border on each side. I'm trying to use div's, and kinda got it working but it doesn't work if the content on the left column is shorter. It should look like this if it was written using tables.

code:
<html><head><title>jakeB</title>

<style>

a{

color:#FF9933;

font-weight:normal;

text-decoration:none;

}



a:hover{

color:#3399FF;

}



body{

background:#cecece;

color:#000000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

}



td{

background:#cecece;

color:#000000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

border-width:0px;

vertical-align:top;

background:#336699;

}



table{

border:0px;

}



p{

margin:10px 10px 10px 10px;

}



</style>

</head>

<body>



<table border="1" width="70%" align="middle">

<tr><td class="menu" align="middle">



<p><a href="#">page 1</a>

<br><a href="#">page 2</a>

<br><a href="#">page 3</a>

<br><a href="#">page 4</a>

</p>

</td><td align="middle">



<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>



</td></tr>

</table>



</body>

</html>
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 10-29-2001 03:11

JakeB: That isn't a problem:
http://glish.com/css/9.asp

and if that isn't what you want then go from the main page and look through the links there (its all gold).

Sticking that all in a DIV and then centring that is a little tricky (as IE messes up) - I'd use the negative margin trick:
http://bluerobot.com/web/css/center2.html

but see:
http://bluerobot.com/web/css/center1.html

Emps


You're my wife now Dave
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-29-2001 03:33

http://glish.com/css/9.asp

You may want to check this too...
LaSun
Bipolar (III) Inmate

From: the oceanic antipodes
Insane since: Sep 2001

 posted posted 10-31-2001 11:55

wow, thanks Daniel ..

SUN
//giggles at wakkos//



oh, how'd you get on, Jake? i have the same question ... hhhmmmm

[This message has been edited by LaSun (edited 10-31-2001).]
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-31-2001 15:00

Hey hey hey!!

Don't reveal my real identity, do you know that there are a lot of maniacs here????

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 10-31-2001 16:36

Wakkos: Being another Daniel I suspect you are trying to steal my praise (or was ir directed towards WarMage?).

~gives Wakkos a wedgie~

LaSun: if you are having a similar problem pots the code or a link and we'll have a look. It is easy enough to do.

Emps


You're my wife now Dave
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 10-31-2001 23:24

Do you know what is funny? Now I see that the URL that I posted, was the same than Emps Posted before!! hehehe
twItch^
Maniac (V) Mad Scientist

From: the west wing
Insane since: Aug 2000

 posted posted 10-31-2001 23:48

Why do you have tables intersperced with stylesheet divs? And why do you declare table { border: 0px } then declare <table border="1"> later? And same with <td> CSS and HTML declarations... you're confusing me.

No wonder it doesn't work. Check out glish.


s t e p h e n
JakeB
Paranoid (IV) Inmate

From: us
Insane since: Oct 2000

 posted posted 11-11-2001 19:53

I was using http://glish.com/css/9.asp but it doesn't work right if there is more content on the right than the left. The right will move left once it's below the left content.

quote:
Why do you have tables intersperced with stylesheet divs?


where?

quote:
And why do you declare table { border: 0px } then declare <table border="1"> later? And same with <td> CSS and HTML declarations... you're confusing me.

I was just changing border sizes to see what it does. Using the stylesheet makes a different border than in the table tag.
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 11-12-2001 14:15

JakeB: You said:

quote:
I was using http://glish.com/css/9.asp but it doesn't work right if there is more content on the right than the left. The right will move left once it's below the left content.



Could you give us a link to the page you are working on? It sounds like what I call the Fluid Float problem. I'm writing up common CSS-only layout problems (the ones that can really screw your page not just the ones that prevent pixel perfect layout) and this must be number one. It seems to affect most browsers and happens when you try to mix absolute widths (for margins, padding and borders) with a relative width for the floating element. I largely dealt with this here (specifically 09-16-2001 04:16 PM and 09-21-2001 02:58 AM point 3):
www.ozoneasylum.com/Forum6/HTML/000611.html

There are two solutions:

1. Do quite a bit of fiddling and use the IE/Win hack (I don't really like this).

2. Put your columns into containers with a relative width and margin, padding and border set to 0% (which is my preferred solution).

If you post an example I can have a look at it but I suspect the above solutions should fix it.

Emps


You're my wife now Dave
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 11-12-2001 17:04

See if this is something like you are looking for:

code:
<html>

<head>

<title>jakeB</title>



<style>

a{

	color:#FF9933;

	font-weight:normal;

	font-size: 10px;

	text-decoration:none;

	}



a:hover{

		color:#3399FF;

		font-weight:normal;

		font-size: 10px;

		}



body{

		background-color:#cecece;

     	color:#000000;

     	font-family:Verdana, Arial, Helvetica, sans-serif;

		font-size:12px;

		}



div.content {

	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */

	margin:0px 20px 20px 170px;

	height: 96%;

	border:3px solid black;

	background-color:#336699;

	padding:10px;

	z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */

	}



div.content p{

	font:11px/20px verdana, arial, helvetica, sans-serif;

	margin:0px 0px 16px 0px;

	padding:0px;

	font-weight: bold;

	color:#000000;

}

	

#menu {

	color:#000000;

	position:absolute;

	width:150px;

	top: auto;

	left:0px;

	height:90%;

	margin: 0px 0px 20px 0px;

	border:3px solid black;

	background-color:#336699;

	padding:10px;

	voice-family: "\"}\"";

	voice-family:inherit;

	width:128px;

	}



</style>

</head>



<body>

<div id="menu">

	<p>

	<a href="#">page 1</a>

	<br><a href="#">page 2</a>

	<br><a href="#">page 3</a>

	<br><a href="#">page 4</a>

	</p>

</div>

<div class="content">

	<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

	<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

	<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

	<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

	<p>text blah blah blah blah jsda hbjas dsj fal jkashf sadjhf ljkasdhfdhassjf</p>

</div>

</body>

</html>




In your original script you have some mistakes:

1. the background property for div's is background-color: not background:
this may get confusing for the browser.

2. Don't use td and table as class' for CSS, it kind of defeats the purpose. I know that you were doing it for an example but...

~Hope this helps

C:\
Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

 posted posted 11-12-2001 19:39

Try this:

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html><head><title>Jake B</title>



<style type="text/css">

	

	body {

		margin:0px 0px 0px 0px;

		}

	

	.leftcontent {

text-align: left;

		padding:10px;

		}



	.rightcontent {

text-align: left;

		padding:10px;

		}	

		

	h1 {

		font-size:14px;

		}

	

	.rightcontent p {

		font-size:10px;

		}



/* The Emperor's extra code: */



body {

  text-align:center; 

}



#mainContainer {

  width: 70%;

  padding: 0%;

  border: 0%;

    margin: auto;

}



#leftContainer {

  float: left;

  width: 75%;

  margin: 0%;

  padding: 0%;

  border: 0%;

  background: #c0c0c0;

}



#rightContainer {

  float: left;

  width: 20%;

  margin: 0%;

  padding: 0%;

  border: 0%;

  background: #b0b0b0;

}

	

</style>

</head><body>



<div id="mainContainer">



<div id="leftContainer">

<div class="leftcontent">

	<h1>Left content 1</h1>

      <p>Some left content</p>

      <p>Some left content</p>

      <p>Some left content</p>

      <p>Some left content</p>

      <p>Some left content</p>

</div>

<div class="leftcontent">

	<h1>Left content 2</h1>

      <p>Some left content</p>

      <p>Some left content</p>

      <p>Some left content</p>

      <p>Some left content</p>

      <p>Some left content</p>

</div>

</div>



<div id="rightContainer">

<div class="rightcontent">

	<h1>rightcontent 1</h1>

		<p>Some content</p>

	

</div>

<div class="rightcontent">

	<h1>rightcontent 2</h1>

		<p>Some more content</p>

	

</div>

<div class="rightcontent">

	<h1>rightcontent 3</h1>

		<p>Even more content</p>

	

</div>

</div>



</div>



</body>

</html>



It has 2 centred columns 10px from the side of the box - its largely adapted from the Glish link I gave above and should suit what you want (I think) with a bit of fiddling.

Emps


You're my wife now Dave

« Backwards — Onwards »

Show Forum Drop Down Menu