webForumDet fria alternativet
Logga in / Bli medlem

Placera en div på höger sida av en annan div i en div?

HTML & CSS

6 svar · 519 visningar · startad av xtreme

xtremes avatarxtremeMedlem sedan juli 20002 056 inlägg
Frågan#1

Har en vit (nästan i alla fall) ruta där texten finns men på höger sida om den vill jag ha en vit div-spalt där nyheter kommer synas (dvs en större vit textruta och till höger om den en smalare vit ruta med nyheter och lite mellanrum mellan dem). Hur sätter jag dit den? Den hamnar underst. Den som heter "box1" är den jag provat men då hamnar den som sagt under den andra.

HTML:

<div id="content-wrap"><div id="content">	
	  <div id="main">		
			<div class="box">
			  <p>
			  <h1>V&auml;lkommen</h1>
			  </p>
			  <p> ffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf 	        </div>

            <div class="box1">
            test test test
            </div>
 
	  </div>
	</div>
	</div>

CSS:

/* content */
#content-wrap {
	clear: both;
	float: left;
	background: #1183DA;		
	width: 100%;
}
#content {
	text-align: left;	
	padding: 0; 
	margin: 0 auto;		
}

/* main */
#main {
	margin-top: 10px;
	margin-bottom: 10px; 
	padding: 0;		
}
#main h1 { 
	font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif;
	color: #B1E100;
	letter-spacing: -2px;		
	padding-bottom: 0;	
}
#main h1 a {
	color: #B1E100;
	text-decoration: none;
}

/* box */
.box {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	
}

.box1 {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	
}
effataMedlem sedan apr. 2008137 inlägg
#2

Float: left; på #box gör det du vill, men kan skapa andra problem, främst i IE6.
Kombinera det med clearfixhacket brukar vara en bra idé.
http://www.positioniseverything.net/easyclearing.html

Fuels avatarFuelMedlem sedan okt. 20001 285 inlägg
#3

Synd att det ska hackas så mkt för IE. Personligen följer jag 7 år gammal css standard och funkar det inte i IE så.. otur för dom med IE - byt webläsare.

Såga att

<p><h1>V&auml;lkommen</h1></p>

Ska vara

<h1>V&auml;lkommen</h1>
xtremes avatarxtremeMedlem sedan juli 20002 056 inlägg
#4

effata skrev:

Float: left; på #box gör det du vill, men kan skapa andra problem, främst i IE6.
Kombinera det med clearfixhacket brukar vara en bra idé.
http://www.positioniseverything.net/easyclearing.html

Detta hjälpte inte så mycket, inget händer, även om jag sätter float: left på box1 med. ;)

.box {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	float: left;
	
}

.box1 {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
		
}

Dom flesta som använder IE väl skaffat version 7 som bör klara det bättre. Finns det inget annat sätt?

Fuel:
Eftersom jag inte vill rubriken ska vara uppe i kanten har jag <p> på den.

Fuels avatarFuelMedlem sedan okt. 20001 285 inlägg
#5

Det är felaktig kod .. <h1> kan inte vara inom <p> .. sätt exempelvis

h1 { margin-top:1em; }

test..

<!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>

		<style type="text/css" id="internalStyle"><!--/*--><![CDATA[/*><!--*/
		/* content */
		#content-wrap
		{
			background: #1183DA;
		}
		
		#content
		{
			text-align: left;	
			padding: 0; 
			margin: 0 auto;		
		}
		
		/* main */
		#main
		{
			margin-top: 10px;
			margin-bottom: 10px; 
			padding: 0;		
		}
		
		#main h1
		{ 
			font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif;
			color: #B1E100;
			letter-spacing: -2px;		
			padding-bottom: 0;	
			margin-top: 1em;
		}
		
		#main h1 a
		{
			color: #B1E100;
			text-decoration: none;
		}
		
		/* box */
		.box
		{
			border: 5px solid #1F8ADE;
			background-color: #F9F9F9;
			margin-right: 420px;

		}
		
		.box1
		{
			border: 5px solid #1F8ADE;
			background-color: #F9F9F9;
			width: 400px;
			float: right;
		}
		
		.cleaner
		{
			clear:both;
			line-height: 0;
			height: 0;
		}
		
		/*]]>*/--></style>
		
		<title>Float</title>
		
	</head>
	<body>

		<div id="content-wrap">
			<div id="content">	
				<div id="main">		
					
					<div class="box1">
		            	
		            	test test test
		            	
		            </div>
		            
					<div class="box">

						<h1>V&auml;lkommen</h1>
						
						<p>
						ffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf
						</p>
						
					</div>
					<p class="cleaner"></p>
				</div>
			</div>
		</div>
	</body>
</html>
xtremes avatarxtremeMedlem sedan juli 20002 056 inlägg
#6

Fuel skrev:

Det är felaktig kod .. <h1> kan inte vara inom <p> .. sätt exempelvis

h1 { margin-top:1em; }

OK, tack för det! Hur ska jag nu få till mina två div ;)

tantenMedlem sedan nov. 20051 596 inlägg
#7
.box {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	width: 80%;
	float: left;
	
}

Kanske räcker...

251 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
118 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
116 ms — ändringar (db)