SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Threaded View

  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


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
  •