ayuda con columnas

peru · #1 (**permalink**) 15/08/2008, 06:04

buenas, el siguiente codigo css lo saque de unos templates que encontre.

ahora la cuestion es que no se bien como editarlo. queria ponerle otra columna a la derecha, pero como que no me esta saliendo bien.

pueden mirarlo y ver donde podria corregirlo?

gracias!

http://www.geocities.com/p_surber/new_style.html

Código HTML:

<style>

/* standard elements */
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}


body {
	background: #E7E7E2 url('img/body.JPG') no-repeat center top;
	color: #444;
	font: normal 62.5% Tahoma,sans-serif;
	padding-top: 0px;
}



form,input {margin: 0; padding: 0; display: inline;}


h1,h2,h3 {padding-top: 6px; color: #553; margin-bottom: 4px;}

/* misc */
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.right {float: right;}

/* structure */
.inner-container {
	border: 2px solid #D7D7D2;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0px;
	width: 1100px;
	background-color:#FFFFFF;
}

.outer-container {

	padding-bottom: 64px;
}

/* headere & title */
.header {
	background: #222 url('img/header.jpg') no-repeat;
	height: 160px;
	margin-bottom: 5px;
	text-align: center;
}


}

/* path */
.path {
	color: #000000;
	font: normal 1.1em Verdana,sans-serif;
	padding: 0px;
	margin-top:0px;
	background-color:#003399;
	
}


/* main */
.main {
	background: url(img/main.gif) repeat-y;
	/*padding: 0px 12px 0 0;*/
	padding: 0px 12px 0 0;	
	background-color:#009999;
}

/* content */
.content {
	float:inherit;
	width: 600px;
	margin-top:0px;
	background-color:#999900;
	
}


/* navigation */
.navigation {
	float: left;
	width: 210px;
	min-height:600px;
	
	background-color:#33FF00;
}

.navigation_2 {
	float: right;
	width: 210px;
	min-height:600px;
	
	background-color:#33FF00;
}



/* footer */
.footer {
	background: #fff;
	color: #F7F7F2;
	font: bold 1em sans-serif;
	margin-top: 5px;
	padding: 10px 12px;
}


</style>

<body>

<div class="outer-container">

<div class="inner-container">


	<?php
		//$softub->get_banner();
    ?>



	<div class="path" align="center">
		HAHAHAHAHHHA
        <br />
        <br />
        <br />
        <br />
	</div>

	<div class="main">		
	
    		<div class="navigation">
		

                <UL>
                <LI>1</LI>
                <LI>2</LI>
                <LI>3</LI>
                <LI>44</LI>
                <LI>55</LI>
                </UL>
                
			</div>
    	
		<div class="content">

            dddd
                      
                        
        </div>

    		<div class="navigation_2">
		

                <UL>
                <LI>1</LI>
                <LI>2</LI>
                <LI>3</LI>
                <LI>44</LI>
                <LI>55</LI>
                </UL>
                
			</div>

		<div class="clearer">&nbsp;</div>

	</div>

	<div class="footer">

		<span class="left">


		</span>

		<span class="right">

		</span>

		<div class="clearer"></div>

	</div>

</div>

</div>

</body>

</html>

emiliodeg · #2 (**permalink**) 15/08/2008, 10:39

ojo con los atributos heredados estos aun tiene problemsa con los navegadores!

ahora para que la barra derecha llegue bien a la derecha tienes q cambiar aqui
.main {
background: url(img/main.gif) repeat-y;
/*padding: 0px 12px 0 0;*/
/*padding: 0px 12px 0 0; */
padding:0;
background-color:#009999;
}

y ahora para que se acomode hasta arriba
.content {
/*float:inherit;*/
float:left;
width: 600px;
margin-top:0px;
background-color:#999900;

}

no te vendria para nada mal un
ul {list-style:none}

saludos