4 columns CSS.HTML

HTML & CSS
1

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–>

                   &lt;div id="footer_text"&gt;

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

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


                        &lt;div id="2of4"&gt; &lt;h3&gt;Volkswagen Passat Alltrack V Subaru Outback&lt;/h3&gt;
                        High-riding  desel wagons out to the test.
                        &lt;h4&gt;Read more&lt;/h4&gt;

<img src=“images/camera_col_1.gif” alt=“pics” width=“25” height=“24”>

                        &lt;/div&gt;	


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

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

</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%;
}

2

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

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…
4

Thanks so much Max!

5

Hi,

As Dave alluded to above…

This 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:


.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

Don’t do his homework for him! Make him sweat :smiley:

7

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

8

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.


<!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:


<!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.