SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    4 columns CSS.HTML

    Can anyone help please? Im having trouble getting 4 columns of text, individually ID'd to align horizontally. Im trying to layout 4 columns, using HTML and CSS:

    Im a beginner coder. the gifs are small camera icons and there's a layout attached. Any help would be appreciated.


    My current HTML is:


    <!--Start of footer text-->

    <div id="footer_text">

    <div id="1of4"><h3>New car review:Mazda CX-5 Akera</h3>
    <img src="images/4_stars.gif">

    Bigger engine gives class leading compact SUV the grunt its chassis the grunt it deserves.
    <h4>Read more</h4>
    <img src="images/camera_col_1.gif" alt="pics" width="25" height="24">
    </div>


    <div id="2of4"> <h3>Volkswagen Passat Alltrack V Subaru Outback</h3>
    High-riding desel wagons out to the test.
    <h4>Read more</h4>
    <img src="images/camera_col_1.gif" alt="pics" width="25" height="24">

    </div>


    <div id="3of4"><h3>Used car review: Nissan 370Z 2009-2012</h3><img src="../Bushfire_article/images/3_stars.gif" alt="3 stars">
    High-riding diesel wagons out to the test.
    <h4>Read more</h4>
    <img src="images/camera_col_1.gif" alt="pics" width="25" height="24"> </div>

    <div id="4of4"><h3>Quick Spin: Subaru Forester XT Premium</h3>
    Subaru loads all of its best gear into the range-topiing Forester, pushing into the price league of European rivals
    <h4>Read more</h4>
    <img src="images/camera_col_1.gif" width="25" height="24"> </div>
    </div>
    <!--End of footer text-->

    My CSS;


    #1of4 {
    width:25%;
    float:left;
    }

    #2of4 {
    width:25%;
    float:left;
    }

    #3of4 {
    width:25%;
    float:left;
    }

    #4of4 {
    width:25%;
    float:right;
    }

    #footer_text {
    font-family: Arial, Helvetica, sans-serif;
    font-weight:normal;
    width:100%;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive just had a breakthrough here - naming my Id;s differently, using text before the numerals so, id is now named div id="col1of4"..everything jumped into place..If anyone has other suggestion ,please let me know.

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Correct, naming ids starting with numbers will cause most browsers to ignore them.

    Other comments:
    1. Where should you use ids and where should you use classes?
    2. Don't forget to clear floats.....
    Last edited by DaveMaxwell; Apr 30, 2013 at 06:01. Reason: typo....grrr
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  4. #4
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Max!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Dave alluded to above...

    This code:
    Code:
    #1of4 {
    width:25%;
    float:left;
    }
    
    #2of4 {
    width:25%;
    float:left;
    }
    
    #3of4 {
    width:25%;
    float:left;
    }
    
    #4of4 {
    width:25%;
    float:right;
    }
    Should really be this:
    Code:
    .column {
    width:25%;
    float:left;
    }
    As the styles are the same you can just use the same class for each of the columns.

    (Note that ie7 and under will probably round the percentage columns up causing one column to drop down. If you are supporting those old browsers then you would need to reduce the width of the last column slightly.)

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    As Dave alluded to above...

    As the styles are the same you can just use the same class for each of the columns.

    (Note that ie7 and under will probably round the percentage columns up causing one column to drop down. If you are supporting those old browsers then you would need to reduce the width of the last column slightly.)

    Don't do his homework for him! Make him sweat
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  7. #7
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, really appreciate the feedback, thankyou, asI thirsty for the knowledge right now.!

    I was going to group those column classes as you ve indicated, but I wanted control over each individual column width,
    so I classed them out separately. Is that the correct procedure?

    thanks,

    David







    Quote Originally Posted by Paul O'B View Post
    Hi,

    As Dave alluded to above...

    This code:
    Code:
    #1of4 {
    width:25%;
    float:left;
    }
    
    #2of4 {
    width:25%;
    float:left;
    }
    
    #3of4 {
    width:25%;
    float:left;
    }
    
    #4of4 {
    width:25%;
    float:right;
    }
    Should really be this:
    Code:
    .column {
    width:25%;
    float:left;
    }
    As the styles are the same you can just use the same class for each of the columns.

    (Note that ie7 and under will probably round the percentage columns up causing one column to drop down. If you are supporting those old browsers then you would need to reduce the width of the last column slightly.)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RaveyDavey View Post
    Hi Paul, really appreciate the feedback, thankyou, asI thirsty for the knowledge right now.!

    I was going to group those column classes as you ve indicated, but I wanted control over each individual column width,
    so I classed them out separately. Is that the correct procedure?

    thanks,

    David
    HI,

    It all depends on what rules you are applying and if they are all different then you have no choice but to use separate rules but its better to use classes rather than ids because ids are not reusable on the same page and should be used for more structural elements that are not likely to be repeated again on the same page or for hooks for javascript.

    If you have a series of common rules then you could do something like this instead with multiple classes.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .col {
    	float:left;
    	color:red;
    	background:blue;
    	margin:10px;
    }
    .col1 { width:100px }
    .col2 { width:200px }
    .col3 { width:300px }
    .col4 { width:400px }
    </style>
    </head>
    
    <body>
    <div class="col col1">Column1</div>
    <div class="col col2">Column2</div>
    <div class="col col3">Column3</div>
    <div class="col col4">Column4</div>
    </body>
    </html>
    Alternatively you could also do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .col1,.col2,.col3,.col4 {
    	float:left;
    	color:red;
    	background:blue;
    	margin:10px;
    }
    .col1 { width:100px }
    .col2 { width:200px }
    .col3 { width:300px }
    .col4 { width:400px }
    </style>
    </head>
    
    <body>
    <div class="col1">Column1</div>
    <div class="col2">Column2</div>
    <div class="col3">Column3</div>
    <div class="col4">Column4</div>
    </body>
    </html>
    Multiple classes give you the ability to modify the styles n that rule without having to create a whole new set of duplicate rules. It's best not to overdo it but they can be very useful for setting up exceptions or over-rides.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •