Come fare a mettere due div uno a sinistra ed uno a destra?

**AndreaNobili** · 20-06-2009, 19:08

Ciao,
alora stò avendo un problema con questo layout:

http://www.siatec.net/andrea/templat...idWidthLayout/

Praticamente se vedete questa versione c'è una colonna di sinistra che sarà usata per il menu ed una colonna di destra più grande per i contenuti. Se nel CSS gli dico di tratteggiare il bordo destro dell'area di sinistra, il tratteggio arriverà solo fino alla fine dei contenuti di tale area.

Se invece faccio una modifica e gli dico di tratteggiare il bordo sinistro dell'area di destra per il contenuto succede di questo:

http://www.siatec.net/andrea/templat...dWidthLayout2/

E' come se il main-content contenesse anche la side-bar nel rendering....

In pratica io vorrei 2 blocchi distinti fatti con i div: uno a sinistra per il menu ed uno a destra per il content, si può fare?

Il codice è questo:

codice:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>The Perfect Fluid Width Layout</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
</head>

<body>

	<div id="page-wrap">
		<div id="inside">
			
			<div id="header">
				
			</div>
		
			<div id="left-sidebar">
				

Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>

			</div>
	
			<div id="main-content">
						
				<h2>Why is this layout "perfect"?</h2>
				<ul>
					[*]Works in all major browsers
					[*]Shrinks to 780px
This accomodates users with 800x600 resolution, with no horizontal scroll!
					[*]Grows to 1260px
This accomodates users with 1280x768 resolution and everything in between.
					[*]This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.
					[*]The left sidebar is of "equal height" to the main content
				[/list]
				
				


				
				


				Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. 
				</p>
				
				


				Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. 
				</p>
				
				


				In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. 
				</p>
				
				


				Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. 
				</p>
				
				


				Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.
				</p>
			
			</div>
			
			<div style="clear: both;"></div>
			
			<div id="footer">
				

Footer stuff.</p>
			</div>
		
		</div>
		
		<div style="clear: both;"></div>
	
	</div>

</body>

</html>

codice:

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	background: url(images/stripe.png) repeat;
}

p, li {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-bottom: 10px;
}

h1 {
	font: 2.0em Tahoma, sans-serif;
	color: white;
	height: 0px;
}

h2 {
	font: 1.8em Tahoma, sans-serif;
	color: green;
	margin-bottom: 10px;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	background: white;
	min-width: 780px;
	max-width: 1260px;
	margin: 1px auto;
	}
	#page-wrap #inside {
		margin: 0px 4px 0px 4px;
		padding-bottom: 10px;
	}
	
#main-content {
	padding-left: 230px;
	padding-top: 20px;
	border-left : 1px dashed #333;
}
	
#header {
	background : #f7f7f7 url(images/header.jpg) no-repeat;
	height : 175px;
	text-align: center;
}

#header img{
	height: 120px;
}
	
#left-sidebar {
	width: 190px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
	
	height: 100%;
}

#footer {
	background: #267f23;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
}

Potete darmi una mano?

Grazie
Andrea

**fcaldera** · 20-06-2009, 20:49

niente "urgente" et simila, grazie

Discussione: Come fare a mettere due div uno a sinistra ed uno a destra?

Strumenti discussione

Ricerca discussione

Visualizza

[Urgente] Come fare a mettere due div uno a sinistra ed uno a destra?

Permessi di invio