1 more box to this css/xhtml

joemorris86

joemorris86

joemorris86

Suspended
Joined
30 Jan 2005
Posts
467
Is there a way i can add 1 box to the side of my css/xhtml so it looks like this:



at the moment it looks like this



thanks guys.

heres my code:

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

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>OCUK Example</title>

<style type="text/css">
body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-size: small;
}

#Container {
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	height: 333px;
	border: 1px #000000 solid;
	text-align: center;
	padding: 10px;
}
#FirstBox {
	text-align: left;
	width: 90%px;
	height: 84px;
	background-color: #C0C0C0;
	border: 1px #000000 solid;
}
#SecondBox {
	text-align: left;
	width: 95%px;
	height: 216px;
	border: 1px #000000 solid;
	background-color: #C0C0C0;
	margin-top: 7px;
}	
p {
	padding-left: 5px;
}
</style>
</head>

<body>
  <div id="Container">
    <div id="FirstBox">
      <p>text 1</p>
      <p>text 1</p>
    </div>
    <div id="SecondBox">
      <p>text 2</p>
    </div>
  </div>
</body>

</html>
 
Code: 
width: 90%px;

:confused:

Create a third box in your HTML for a start, and give it the float left property.

That should get the ball rolling, however a lot of this is simple stuff..maybe W3Schools for you is a better bet?
 
Going from how you've coded the current layout and CSS, the following will do what you want. There are various methods for this, but floating and left-margin is one of the simplest:

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

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>OCUK Example</title>

<style type="text/css">
body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-size: small;
}

#Container {
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	height: 333px;
	border: 1px #000000 solid;
	text-align: center;
	padding: 10px;
}
#FirstBox {
	text-align: left;
	width: 90%px;
	height: 84px;
	background-color: #C0C0C0;
	border: 1px #000000 solid;
}
#SecondBox {
	float: left;
	text-align: left;
	width: 150px;
	height: 216px;
	border: 1px #000000 solid;
	background-color: #C0C0C0;
	margin-top: 7px;
}
#ThirdBox {
	text-align: left;
	height: 216px;
	margin-top: 7px;
	margin-left: 160px;
	border: 1px solid #000;
	background-color: #C0C0C0;

}

p {
	padding-left: 5px;
}
</style>
</head>

<body>
  <div id="Container">
    <div id="FirstBox">
      <p>text 1</p>
      <p>text 1</p>
    </div>
    <div id="SecondBox">
      <p>text 2</p>
    </div>
    <div id="ThirdBox">
      <p>text 2</p>
    </div>
  </div>
</body>

</html>
 
You must log in or register to reply here.
Back
Top Bottom