Three columns horizontal format - not below

HTML & CSS
1

Hi,

A simple query. In the below code I want all three columns to appear to the right of one-another. The problem is the last two columns appear to the right BUT THEY ARE BELOW THE FIRST ONE!

Why is this?

Can you advise me, please,

Matt.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="cssstyles/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="column1">
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
</div>
<div id="content">
  
<div  class="inner">
<div id="column2">
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
</div>
<div id="column3">
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
</div>
</div>
</div>
</body>
</html>



#column1, #column3 {
    clear:left;
	width:200px;
    float:left;
    background:white;
}
#column3 {
	clear:right;
	width:350px;
    float:right;
    background:white;
}
#column2 {
    float:left;
    width:350px;
    margin:0;
    background:white;
}
#content {
    background:white;
    clear:both;
    width:977px;
    margin: 0 5px;
}
.inner {
    width:740px;
    float:left;
}
2

The second and third columns are inside content which is not floated and set to clear:both so it starts underneath.

Float Content and don’t clear it:


#content {
/* clear:both */	
background:white;
width:977px;
margin: 0 5px;
float:left;
}

Of course you don’t need Content at all unless you are using it for styling or some other reason as the columns would float without it.

3

I deleted the clear coding.

Then used the float.

But still not working. I understand float chooses where to position the column (to the left or right, etc.)

But I do not understand what clear does…may be I can work out what is wrong if I understand what clear means/does?

Matt.

4

Yes it is and here’s the proof with only the changes mentioned.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="cssstyles/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#column1, #column3 {
    clear:left;
    width:200px;
    float:left;
    background:white;
}
#column3 {
    clear:right;
    width:350px;
    float:right;
    background:white;
}
#column2 {
    float:left;
    width:350px;
    margin:0;
    background:white;
}
#content {
    background:white;
    /*clear:both;*/
    width:977px;
    margin: 0 5px;
				float:left;
}
.inner {
    width:740px;
    float:left;
}  

</style>
</head>

<body>
<div id="column1"> This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </div>
<div id="content">
		<div  class="inner">
				<div id="column2"> This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </div>
				<div id="column3"> This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </div>
		</div>
</div>
</body>
</html>

I understand float chooses where to position the column (to the left or right, etc.)

But I do not understand what clear does…may be I can work out what is wrong if I understand what clear means/does?

Matt.

“Clear” does as its name suggests and stops content from being next to a float. If you say “clear:right” then the element will make sure that there are no floats to the right of it before it gets placed. “clear:left” does the same but for floats to the left.

“clear:both” ensures that the element has no floats to either the left or right.

By “clear” we mean that the element will be placed under any float on a new line.

5

Yes - alone - that works.

found the problem - another style had the same name!!!
Matt.

6

Glad you found it :slight_smile:

7

Hi there again Paul,

I have another question about this. The problem is, if you load it in your browser, it looks fine, as you explained. But if you then resize the window you’ll notice the two far left columns within the “content” div move below the 1st column. I want them to stay to the left of the first column.

If you could help that would be appreciated,

Matt.

8

Wrap all three columns in a page wrapper that is the width of all three columns and then they won’t break to a new line. :slight_smile: