Hi there. I'm tryin gto build 3 boxes - one next to each other.
This is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html,body {
margin: 0px;
padding: 0px;
background-color: #dde6ed;
text-align: center;
}
#contentTop {
margin: 0px auto 0px auto;
height: 100px;
width: 700px;
}
#leftSection {
background-color: #9a887c;
width: 300px;
text-align: left;
}
#centerSection {
background-color: #ad713b;
width: 300px;
text-align: left;
}
#rightSection {
background-color: #602900;
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<div id="contentTop">
<div id="leftSection">
dsad
</div>
<div id="centerSection">
dads
</div>
<div id="rightSection">
dsds
</div>
</div>
</body>
</html>
What's wrong with it? What am I missing?
Thanks!<div> is a block-level element. As such, it takes up the whole line. One method for getting multiple block level elements next to each other is the Float Property (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">http://www.w3.org/TR/REC-CSS2/visuren.html#floats</a><!-- m -->)
Also, check this page which I made for another forum member:
<!-- m --><a class="postlink" href="http://www.wdhaven.com/CSS3col.phpIt's">http://www.wdhaven.com/CSS3col.phpIt's</a><!-- m --> not workin'. What can I do with the script?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body{margin:0;padding:0;font-size:1em; font-family:Georgia, Arial, sans-serif;}
#leftCol{
background: #9a887c;
width: 250px;
height: 100px;
}
#centerCol{
position:absolute;
background: #ad713b;
width: 250px;
height: 100px;
margin: 0px 0px 0px 250px;
}
#rightCol{
background: #602900;
width: 200px;
height: 100px;
margin: 0px 0px 0px 250px;
}
</style>
</head>
<body>
<div id="leftCol">
</div>
<div id="centerCol">
</div>
<div id="rightCol">
</div>
</body>
</html>You don't have the necessary CSS copied. If you want the expanding middle column, you can use what I showed you. However, if you just want to float three already sized columns, do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
font-size:1em;
font-family:Georgia, Arial, sans-serif;
}
*{
margin:0;
padding:0;
}
#leftCol{
background: #9a887c;
width: 250px;
height: 100px;
float:left;
}
#centerCol{
float:left;
background: #ad713b;
width: 250px;
height: 100px;
}
#rightCol{
float:left;
background: #602900;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="leftCol">
</div>
<div id="centerCol">
</div>
<div id="rightCol">
</div>
</body>
</html>
This is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html,body {
margin: 0px;
padding: 0px;
background-color: #dde6ed;
text-align: center;
}
#contentTop {
margin: 0px auto 0px auto;
height: 100px;
width: 700px;
}
#leftSection {
background-color: #9a887c;
width: 300px;
text-align: left;
}
#centerSection {
background-color: #ad713b;
width: 300px;
text-align: left;
}
#rightSection {
background-color: #602900;
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<div id="contentTop">
<div id="leftSection">
dsad
</div>
<div id="centerSection">
dads
</div>
<div id="rightSection">
dsds
</div>
</div>
</body>
</html>
What's wrong with it? What am I missing?
Thanks!<div> is a block-level element. As such, it takes up the whole line. One method for getting multiple block level elements next to each other is the Float Property (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">http://www.w3.org/TR/REC-CSS2/visuren.html#floats</a><!-- m -->)
Also, check this page which I made for another forum member:
<!-- m --><a class="postlink" href="http://www.wdhaven.com/CSS3col.phpIt's">http://www.wdhaven.com/CSS3col.phpIt's</a><!-- m --> not workin'. What can I do with the script?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body{margin:0;padding:0;font-size:1em; font-family:Georgia, Arial, sans-serif;}
#leftCol{
background: #9a887c;
width: 250px;
height: 100px;
}
#centerCol{
position:absolute;
background: #ad713b;
width: 250px;
height: 100px;
margin: 0px 0px 0px 250px;
}
#rightCol{
background: #602900;
width: 200px;
height: 100px;
margin: 0px 0px 0px 250px;
}
</style>
</head>
<body>
<div id="leftCol">
</div>
<div id="centerCol">
</div>
<div id="rightCol">
</div>
</body>
</html>You don't have the necessary CSS copied. If you want the expanding middle column, you can use what I showed you. However, if you just want to float three already sized columns, do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
font-size:1em;
font-family:Georgia, Arial, sans-serif;
}
*{
margin:0;
padding:0;
}
#leftCol{
background: #9a887c;
width: 250px;
height: 100px;
float:left;
}
#centerCol{
float:left;
background: #ad713b;
width: 250px;
height: 100px;
}
#rightCol{
float:left;
background: #602900;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="leftCol">
</div>
<div id="centerCol">
</div>
<div id="rightCol">
</div>
</body>
</html>