Issue with Aligning Right Column in 3 Column Layout

HTML & CSS
1

I have the following code where I am having issue with aligning the right column next to the Center column in a 3 column layout. The right column is getting displayed below the middle column to the right. Not sure what am I doing wrong here. There is enough width available for the right column next to the Center column but don’t know why it is being pushed down.

Here is my HTML and CSS.

HTML code:


    <div class="container">
      <div class="header">
		This is text in the header section.<br />
        This is text in the header section.<br />
        This is text in the header section.<br />
      </div>
      <div class="content">
        <div class="leftContentColumn">
          This is text in the left column of the content area.<br />
          This is text in the left column of the content area.<br />
          This is text in the left column of the content area.<br />
        </div>
        <div class="centerContentColumn">
          This is text in the center column of the content area.<br />
          This is text in the center column of the content area.<br /> 
          This is text in the center column of the content area.<br /> 
          This is text in the center column of the content area.<br /> 
          This is text in the center column of the content area.<br /> 
          This is text in the center column of the content area.<br />
          This is text in the center column of the content area.<br /> 
          This is text in the center column of the content area.<br /> 
          This is text in the center column of the content area.<br /> 
          This is text in the center column of the content area.<br />
          This is text in the center column of the content area.<br />
          This is text in the center column of the content area.<br />                                     
        </div>
        <div class="rightContentColumn">
          This is text in the right column of the content area.<br />
          This is text in the right column of the content area.<br />
          This is text in the right column of the content area.<br />
          This is text in the right column of the content area.<br />
          This is text in the right column of the content area.<br />
          This is text in the right column of the content area.<br />          
        </div>
      </div>
      <div class="footer">
		This is text in the footer section.<br />
        This is text in the footer section.<br />
        This is text in the footer section.<br />
      </div>
    </div>

CSS Code:


.container {
	background-color:#CCCCCC;
	border:1px solid black;
	margin:10px;
	padding:5px;
	position:relative;
	width:1000px;
}
.header {
	background-color:#FFFFFF;
	border:1px solid black;
	clear:both;
	margin:5px;
	padding:5px;
	text-align:center;
	width:978px;
}
.content {
	border:0px;
	clear:both;
	margin:0px;
	padding:0px;
	width:978px;
}
.leftContentColumn {
	background-color:#FFFFFF;
	border:1px solid black;
	float:left;
	margin:5px;
	padding:5px;
	text-align:right;
	width:200px;
}
.centerContentColumn {
	background-color:#FFFFFF;
	border:1px solid black;
	margin:5px;
	padding:5px;
	text-align:justify;
	width:534px;
}
.rightContentColumn {
	background-color:#FFFFFF;
	border:1px solid black;
	float:right;
	margin:5px;
	padding:5px;
	text-align:left;
	width:200px;
}
.footer {
	background-color:#FFFFFF;
	border:1px solid black;
	clear:both;
	margin:5px;
	padding:5px;
	text-align:center;
	width:978px;
}
2

Hi,

Your middle column is static so the float that follows in the html will start after that static elements bottom margin. Floats must come first (where block elements are concerned) and so the centre column html would need to follow the right floats html.

However you would have to lose the width because that would slide under the left float. You would just need to use margin-left and margin-right to steer clear of the left and right floats or if you need a width then also apply overflow:hidden which will create a rectangular block to the side of the float and not slide under it.

However in a fixed width layout just float all three columns and then you can keep html order. BTW your width is over-constrained so shorten it.


.centerContentColumn {
	background-color:#FFFFFF;
	border:1px solid black;
	margin:5px;
	padding:5px;
	text-align:justify;
	width:504px;
	float:left
}
3

Thanks. That helped.