I've recently started coding in XHTML and CSS2 to make my sites faster and up-to-date. In the past I have developed all of my pages with tables trying to move to strictly CSS but having problems that seemed only solvable with tables. Below you will find some code for a "No Tables Test Page". If you make the clips into an .HTML and .CSS file, you will see three boxes. I want the bottom two boxes to be on the same line, which they are, but be able to append a 50% width to them so they fill up the entire line. (Minus the margins of course, I DO want them to appear. ) In other forums they told me to float them to the left and right and use a number like 48% to make them side by side. It works but seems... unorthodox in the least. Is there a way, possibly, to maybe "wrap" the two sections and be able to set them to 50% like I used to do with table cells? Any help or ideas would be appreciated:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="title">Test Text One</div>
<div class="menu">Test Text Two</div>
<div class="content">Test Text Three</div>
</body>
</html>
CSS:
.title
{
background-color: black;
color: #ffffff;
padding: 5px;
margin: 10px;
}
.menu
{
background-color: black;
color: #ffffff;
padding: 5px;
margin: 10px;
float: left;
}
.content
{
background-color: black;
color: #ffffff;
padding: 5px;
margin: 10px;
float: left;
}
__________________
And to believe this is what I wanted to do as a profession.
Now it's just a hobby and I still get frustrated like I did then.
Something is definitely not right here...
|
