|
Posted by Wizumwalt on 11/04/26 11:39
I have a problem w/ the CSS below. I'm trying to make the columns show
up side by side. The columns are placed correctly horizontaly, but I
can't get them on the same row.
Can anyone take a look as see what I'm doing wrong? Any help much
appreciated.
---
<html>
<head>
<style type="text/css">
#title { position: relative; width:100%; top:0px; background:#ff0000;
}
#header { position: relative; width:100%; background:#00ff00;
border-bottom: thin solid #000000; }
#col1 { position: relative; margin-left:10%; width:10%;
background:#ffff22; }
#col2 { position: relative; margin-left:20%; width:10%;
background:#ffff55; }
#col3 { position: relative; margin-left:30%; width:10%;
background:#ffff88; }
#col4 { position: relative; margin-left:40%; width:10%;
background:#ffffaa; }
#col5 { position: relative; margin-left:50%; width:10%;
background:#ffffdd; }
</style>
</head>
<body>
<div id="title">My Title</div>
<div id="header">(header 1)</div>
<div id="col1">1 blah</div>
<div id="header">(header 2)</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>
<div id="header">(header 3)</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
<div id="col4">col4</div>
<div id="col5">col5</div>
</body>
</html>
[Back to original message]
|