Forum Moderators: not2easy

Message Too Old, No Replies

Having problems forcing width of a div

         

stepheng

10:47 pm on Apr 1, 2010 (gmt 0)

10+ Year Member



I'm having trouble forcing divs to be a certain width, so that the divs on the right side of them will be aligned properly with each other.

Here is the HTML:
 
<div id="active_project">
<div class="entry underline">
<a href="projects/example/"><h3>EXAMPLE PROJECT</h3></a>
<div class="project_info">
<div class="status">status</div><div class="info_content">Doing Something</div>
</div>
<div class="project_info">
<div class="updated">updated</div><div class="info_content">March 31, 2010</div>
</div>
</div>
</div>


And here is the CSS that I currently use:


#active_project {
margin-left: 2%;
width: 97%;
}

#active_project h3 {
margin: 0px;
padding: 0px;
}
#active_project a {
margin: 0px;
padding: 0px;
text-decoration: none;
}
.project_info {
margin-left: 20px;
padding-left: 5px;
padding-top: 0px;
margin-top: 0px;
line-height: 1.65;
font-size: 12px;
}

.info_content {
display:inline;
margin-left: 5px;
}
.updated {
border-left: 3px solid #ff0000;
display: inline;
padding-left: 5px;
font-size:10px;
}
.status {
border-left: 3px solid #0000ff;
display: inline;
padding-left: 5px;
font-size:10px;
margin-right: 12px;
}


I want to have the div info_content to align with each other. (appear like tabular data) Now, it appears to work properly because I've set the margin-right of status to 12px. However, when I want to display more/different project_info information (aside from updated or status), I'm going to have to modify the margin-right of all the possibilities aside from the lengthiest. I've tried setting the widths of both status and updated, but it doesn't work.

I hope the above made sense.

Any insight?

stepheng

3:08 am on Apr 6, 2010 (gmt 0)

10+ Year Member



Quick bump, as I still haven't been able to figure this one out. Any insight would be hugely appreciated.

tangor

5:50 am on Apr 6, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



This looks like tabular data. I would suggest using a table for this, particularly if there will be additional rows of information. Setting widths in tables, and aligning text in each cell, is much easier for datasets.