Forum Moderators: not2easy
I am trying to achieve the following:
Box 1 ¦
------
Box 2 ¦
** With a 3rd box to the right of box 1&2
I have got this far but cant work out how to do 'box2'
<div id="box2">
box 2
</div>
<div id="box3">
box 3
</div>
#box2 {
float: left;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box2 {
width: 100px;
/* ie5win fudge ends */
}
#box3 {
float: right;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box3 {
width: 100px;
/* ie5win fudge ends */
}
Can anyone possibly help?
I got it sorted using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>boxes</title>
<style type="text/css">
<!--
#boxcontainer {
width: 324px;
margin: 0 auto;
}
#box1, #box2, #box3 {
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid black;
float: left;
display: inline;
}
#box2 {
clear: left;
}
#box3 {
float: right;
}
-->
</style>
</head>
<body>
<div id="boxcontainer">
<div id="box1">Content for id "box1" Goes Here</div>
<div id="box3">Content for id "box3" Goes Here <br>This sits to the right of the other two boxes</div>
<div id="box2">Content for id "box2" Goes Here</div>
</div>
</body>
</html>
Make sure you test your code in a few browsers (mostly just IE, and some standards compliant one), because in the link I gave, float and clears don't work right in IE, a container div is needed.
