am trying to make a page with 2 columns and on each side there are multiple boxes kind of like a news box any way it looks like it works some times but depending on the length of the text it might get messed up. i cant really upload a live example because it pulls the info from a database but i took 2 screen shots to show what it is doing.
css
*note i changed the background color of col-one to help me see whats going on
CODE
#col-one {
float: left;
background-color: red;
width: 47%;
margin: 10px 0 0px 10px;
}
#col-two {
float: right;
width: 47%;
margin: 10px 10px 0px 0;
}
.content {
padding: 15px 15px 15px 15px;
background-color: #FFFFFF;
border: 1px solid #528489;
}
.title {
height: 20px;
padding: 10px 0 0 10px;
background-color: #0a328c;
letter-spacing: 1px;
font-size: 11px;
color: #FFFFFF;
}
.date {
float: right;
position: relative;
top: -15px;
margin-right: 10px;
font-size: 12px;
}
.options{
float: right;
border: 1px solid #528489;
border-top-width: 0px;
letter-spacing: 1px;
padding: 0 10px 0 10px;
}
php that prints out the info, col-two is the same code
CODE
echo "<div id=col-one>
<div class=title>$title
<div class=date>$date</div>
</div>
<div class=content>$message</div>
<div class=options> edit | delete</div></div>";
- the way it should look
- bad
| 