Solved

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

Posted on 2009-04-07
6
295 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Send email using HTML and PHP in separate file 5 36
Asp response.write to clients 6 32
Html split(text) Part2 6 20
Table doesn't show the lines! 3 23
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

685 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