Hej..
Har ett problem.. Vill ha två columner med text (page_1 och page_2), och tyckte att en float:right på en av div;en skulle vara nog. men då fick jag problemet i mozilla att om texten blev för lång gick den över kontainern..
Det jag vill är att få dom bredvid varandra och att dom ska hålla sig i kontainern oavsett hur mycket text som skrivs i den.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>---</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="homepage__.css" />
</head>
<body>
<div id='container'>
<div id='top'>
<div id='header'>
<h1>This is the header!</h1>
</div>
</div>
<div id='middle'>
<div id='nav'>
<ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
<div id='content'>
<div id='page_1'>
<h3>This is where the content comes!</h3>
<p>
A smurf ran ower another smurf A smurf ran ower another smurf A smurf ran ower another smurf A smurf ran ower another smurf A smurf ran
</p>
</div>
<div id='page_2'>
<h3>numbers</h3>
<p>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
</p>
<h3>What happend to the smurf that ran ower the other smurf?</h3>
<p>
The smurf that ran ower the smurf tripped and broked a leg! The smurf that ran ower the smurf tripped and broked a leg! The smurf that ran ower the smurf tripped and broked a leg! The smurf that ran ower the smurf tripped and broked a leg! The smurf that ran
</p>
</div>
</div>
</div>
<div id='bottom'>
<div id='footer'>the footer</div>
</div>
</div>
</body>
</html>
CSS:
*
{
margin:0;
padding:0;
}
body, html
{
height:100%;
background-color:white;
}
#container
{
margin:auto;
padding:0;
width:600px;
background-color:red;
}
#header h1
{
background-color:yellow;
color:blue;
}
#wc3
{
position:absolute;
left:-1px;
top:10px;
}
/*navigation*/
#nav
{
text-align:center;
background-color:blue;
}
#nav a:active, #nav a:link,
#nav a:link, #nav a:visited
{
color:black;
text-decoration:none;
}
#nav a:hover
{
}
#middle #nav li
{
display : inline;
list-style-type: none;
}
#middle
{
background-color:yellow;
width:100%;
height:100%;
margin-top:-;
}
#content
{
margin:auto;
width:500px;
background-color:red;
}
#content p, #content h3
{
}
#bottom #footer
{
background-color:blue;
}