<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>About</title>
<style>
body {
background:#000 ;
color: #FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
margin:0;
}
#container {
float:left;
width:700px;
overflow:hidden ;
margin:0 auto;
}
.yellowtext {
color:#FF0;
}
.fancyyellowtex t {
color:#FF0;
font-size:20px;
}
#Bullets
{
float:right;
margin-right:50;
width:400;
}
#Bullets ul {
margin: 0;
list-style:none;
}
#Bullets ul ul
{
margin-left: 20px;
list-style:outside;
list-style:square;
}
#Bullets ul ul ul
{
margin-left: 40px;
list-style:outside;
list-style:square;
}
</style>
</head>
<body>
<div id="container" >
<div>
<p class="fancyyel lowtext" style="text-align:center; font-size:22px; margin:0;"><i>
Title/Heading</i></p>
<img src="Descriptio n.png" width="700" height="250"></img>
</div>
<div style="margin-left:50; float:left;">
<img src="1stPic.png " width="200" height="200"></img><br/>
<img src="2ndPic.png " width="200" height="200"></img><br/>
<img src="3rdPic.png " width="200" height="200"></img>
</div>
<div id="Bullets">
<ul>
<li><p class="yellowte xt">Heading<i>I talics</i></p>
<ul>
<li>Bullet1</li>
<li>Bullet2</li>
</ul></li>
<li><p class="yellowte xt">2ndHeading< i>Italics</i></p>
<ul>
<li>Bullet1</li>
<li>Bullet2:
<ul>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet...(T his one is going to be a long one just to show you what happens...)</li>
</ul></li>
</ul></li>
</ul>
</div>
</div>
</body>
</html>
<!--When The bullets have enough content to make the text wrap around, the entire div is pushed below the first div. If they're all short enough (they won't be realistically), the list will be pushed too far to the right of the screen. The strange thing is that if I switch the DOCTYPE and the <html> tag, everything is fixed. I know that I shouldn't do something like that - is there any other way to solve the problem? You can copy and paste the code into the Tryit HTML Editor right here:
http://www.w3schools.c om/html/tryit.asp?filen ame=tryhtml_bas ic
Thanks in advance.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>About</title>
<style>
body {
background:#000 ;
color: #FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
margin:0;
}
#container {
float:left;
width:700px;
overflow:hidden ;
margin:0 auto;
}
.yellowtext {
color:#FF0;
}
.fancyyellowtex t {
color:#FF0;
font-size:20px;
}
#Bullets
{
float:right;
margin-right:50;
width:400;
}
#Bullets ul {
margin: 0;
list-style:none;
}
#Bullets ul ul
{
margin-left: 20px;
list-style:outside;
list-style:square;
}
#Bullets ul ul ul
{
margin-left: 40px;
list-style:outside;
list-style:square;
}
</style>
</head>
<body>
<div id="container" >
<div>
<p class="fancyyel lowtext" style="text-align:center; font-size:22px; margin:0;"><i>
Title/Heading</i></p>
<img src="Descriptio n.png" width="700" height="250"></img>
</div>
<div style="margin-left:50; float:left;">
<img src="1stPic.png " width="200" height="200"></img><br/>
<img src="2ndPic.png " width="200" height="200"></img><br/>
<img src="3rdPic.png " width="200" height="200"></img>
</div>
<div id="Bullets">
<ul>
<li><p class="yellowte xt">Heading<i>I talics</i></p>
<ul>
<li>Bullet1</li>
<li>Bullet2</li>
</ul></li>
<li><p class="yellowte xt">2ndHeading< i>Italics</i></p>
<ul>
<li>Bullet1</li>
<li>Bullet2:
<ul>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet... </li>
<li>Bullet...(T his one is going to be a long one just to show you what happens...)</li>
</ul></li>
</ul></li>
</ul>
</div>
</div>
</body>
</html>
<!--When The bullets have enough content to make the text wrap around, the entire div is pushed below the first div. If they're all short enough (they won't be realistically), the list will be pushed too far to the right of the screen. The strange thing is that if I switch the DOCTYPE and the <html> tag, everything is fixed. I know that I shouldn't do something like that - is there any other way to solve the problem? You can copy and paste the code into the Tryit HTML Editor right here:
http://www.w3schools.c om/html/tryit.asp?filen ame=tryhtml_bas ic
Thanks in advance.
Comment