asked on

Having trouble lining up columns. I'm using CSS not tables.

Using the CSS and HTML code shown below I am trying to display two rows with for left-justified columns. However its not working for me. The display looks like this:

Item One Item Two Item Three Item Four
Item Five Item Six Item Seven Item Eight

Does anyone have words of wisdom that might help me fix this problem?

Thanks.

<style>
span.col2 {
	margin-left: 20em;
}
 
span.col3 {
	margin-left: 30em;
}
 
span.col4 {
	margin-left: 50em;
}
 
 
div.row {
font-weight: bold;
width: 60%;
float: left;
padding-top: 5px;
padding-left: 0px;
padding-bottom: 5px;
padding-right: 0px
}
</style>
 
<div class="row">			
Item One			
<span class="col2">
Item Two
</span>
<span class="col3">
Item Three
</span>
<span class="col4">				
Item Four
</span>
</div>
			
<div class="row">
Item Five			
<span class="col2">			
Item Six						
</span>
<span class="col3">
Item Seven
</span>
<span  class="col4">			
Item Eight
</span>
</div>

Using floating is another way to go her also:

HTML:
<div class="row">
<div class="colsLeft">
<div class="col1">
<h1>Col1</h1>
</div>
<div class="col2">
<h1>Col2</h1>
</div>
</div>
<div class="colsRight">
<div class="col3">
<h1>Col3</h1>
</div>
<div class="col4">
<h1>Col4</h1>
</div>
</div>
</div>
<div class="row">
<div class="colsLeft">
<div class="col1">
<h1>Col5</h1>
</div>
<div class="col2">
<h1>Col6</h1>
</div>
</div>
<div class="colsRight">
<div class="col3">
<h1>Col7</h1>
</div>
<div class="col4">
<h1>Col8</h1>
</div>
</div>
</div>

CSS:

.row {
clear:both;
width: 60%;
float: left;
padding-bottom: 10px;
}

.colsLeft {
width: 48%;
float: left;
}

.colsRight {
width: 48%;
float: right;
}

.col1, .col3 {
width: 48%;
float: left;
background: #ddd;
}

.col2, .col4 {
width: 48%;
float: right;
background: #bbb;
}

jwright9

ASKER

Hi iDeej, I think your solution would work for two column layout but I need a four column layout. Might you know how to do that?

ASKER CERTIFIED SOLUTION

iDeej

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jwright9

ASKER

Daniel, Thanks so much for your help. Your solution works awesomely! J.