Solved

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

Posted on 2009-04-07
6
286 Views
Last Modified: 2012-05-06
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>

Open in new window

0
Comment
Question by:jwright9
  • 2
  • 2
  • 2
6 Comments
 
LVL 9

Expert Comment

by:Ramanhp
ID: 24092262
<style>
span.col2 {
        margin-left: 10em;
 width:100px;
}
 
span.col3 {
        margin-left: 10em; width:100px;
 
}
 
span.col4 {
        margin-left: 10em; width:100px;
 
}
 
 
div.row {
overflow: auto;
font-weight: bold;
width: 100%;
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>
0
 
LVL 9

Expert Comment

by:Ramanhp
ID: 24092300
<style>
span.col2 {
        margin-left: 10em; width:120px;
}
 
span.col3 {
        margin-left: 10em; width:120px;
 
}
 
span.col4 {
        margin-left: 10em; width:120px;
 
}
 
 
div.row {
overflow: auto;
font-weight: bold;
width: 100%;
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>
0
 
LVL 4

Expert Comment

by:iDeej
ID: 24092391
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;
}
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:jwright9
ID: 24092434
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?
0
 
LVL 4

Accepted Solution

by:
iDeej earned 500 total points
ID: 24092571
hello jwright,

this code creates two columns which each contain two more columns essentially giving you 4 columns.

I often use this for 3 column layouts where the left column will contain one column of navigation and the right column will contain the main content column and the right column.

I have tested the code and get two rows of 4 columns. If you test the code you should see that I have set background colors to make this clearer.

hope it helps,

Daniel.
0
 

Author Closing Comment

by:jwright9
ID: 31567770
Daniel,  Thanks so much for your help.  Your solution works awesomely!  J.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now