1. Home
  2. Forums Index
  3. Browser Side / CSS 8:32 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Help aligning 2 columns

         

BassTeQ2

5:11 am on Jul 22, 2009 (gmt 0)

10+ Year Member



Hi all, I'm trying to have 2 colums side by side, but when I float the "right-col" it falls outside of its parent.
If I dont float it, then it will just appear underneath the "left-col"

Any help is greatly appreciated.

Thank you 


<!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" />
<style type="text/css">
body {
background: #999999;
text-align: center;
margin: 0px;
padding: 0px;
font-family: Verdana;
font-size: 76%;
background-image:url(images/bg.gif);
background-repeat:repeat;
}
a {
text-decoration: none;
color:#FF0000;
outline: none;
}
a:hover {
text-decoration: underline;
color: #0B2A4C;
outline: none;
}
img {
border: none;
}
div, p {
font-size: 1em;
color: #2c2c2c;
}
h1 {
margin-bottom: .1em;
margin-left:15px;
 }
 
p {
margin-bottom: 1em;
}
h3 {
text-align:center;
}
h2 {
font-size: 1.60em;
margin-top: 20px;
letter-spacing: 0.012em;
}
img.brands {
border:1px solid black;
margin-top:20px;
padding: 4px;
}
.page {
width: 100%;
/*border:2px solid red;*/
background-image:url(images/BW_text.png);
background-repeat:repeat-y;
background-position:center;
height:auto;
}
.page-wrapper{
width:960px;
margin-left: auto ;
 margin-right: auto ;
border:2px solid red;
height:100%;
background-color:#999999;
}
.page-header {
width:100%;
background:#FF0000;
background-image:url(images/header_bg.png);
background-repeat:repeat-x;
}
.container-shadow {
background: url("./images/container-shadow.png") repeat-y;
/*float: left;*/
width: 1040px;
margin: 0; 
margin-left: -40px;
padding: 0;
height:100%;
}
.header-container {
width: 960px;
height:150px;
margin: 0; 
padding: 0;
margin-left: auto ;
 margin-right: auto ;
text-align:left;
background-image:url(images/header_container_bg.png);
background-repeat:no-repeat;
}
.header-left {
/*border:4px solid orange;*/
width:350px;
float:left;
z-index:10;
position:relative;
}
.header-right {
/*border:2px solid orange;*/
margin-top:10px;
float:left;
margin-left:20px;
}
.header-nav {
margin-top:33px;
/*border: 2px solid blue;*/
height:35px;
width:440px;
float:right;
margin-left:20px;
}
.container {
background: #FFFFFF;
margin: 0 40px; 
height:100%;
width: 940px;
padding-left:10px;
padding-right:10px;
font-size:14ptpx;
}
.left-col {
border: 2px solid red;
width:500px;
/*float:left;*/
}
.right-col {
border: 2px solid red;
/*float:right;*/
text-align:center;
width:200px;
}
.footer {
height:45px;
background-color:#666666;
margin-left: auto ;
 margin-right: auto ;
width:100%;
text-align:center;
padding-top:10px;
background-image:url(images/footer_bg.png);
background-repeat:repeat-x;
color:#999999;
}
.footer a {
color:#999999;
}
#navigation li {
display: inline;
list-style: none;
height: 30px;
}
.vis-clear {
clear: both;
width: 100%;
height: 0px;
line-height: 0px;
font-size: 0px;
}
</style>
</head>
<body>
 <div class="page-header">
 <div class="header-container">
 <div class="header-left">
   header left
   </div>
   <div class="header-right">
   header right
   </div>
   <div class="header-nav">
nav bar   
    </div>
  </div><!--container-header-->
  
 </div>
 <div class="page"> 
  <div class="page-wrapper">
   <div class="container-shadow">
   <div class="container"> 
   <!-- start php body -->
   <div class="left-col">       
   LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL 
   LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL 
  LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL 
   </div>
<div id="vis-clear"></div>
<div class="right-col">   
   RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL 
   RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL 
  RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL 
   </div>
   <div id="vis-clear"></div>
<!-- END php body -->
   </div><!-- container -->
   
   </div><!-- container-shadow -->
  </div><!-- page wrappwer -->
  
  <!-- Footer -->
  <div class="footer">
<b>FOOTER</b>
</div><!-- end #footer -->
 </div><!--page-->
</body>
</html>

BassTeQ2

11:26 pm on Jul 22, 2009 (gmt 0)

10+ Year Member



Anyone?
Any help is greatly appreciated.

Thank you

swa66

10:05 am on Jul 23, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Think you messed up the way to clear it, but there's too much code to quickly spot it, hence some simpler code sample: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>test</title>
    <style type="text/css">
      * {
        margin:0;
        padding:0;
      }
      #content {
        float: left;
        width: 500px;
      }
      #menu {
        float: left;
        width: 200px;
      }
      #container {
        width: 770px;
        margin: 0 auto;
        background-color: orange;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="menu">
        <p>menu</p>
      </div>
      <div id="content">
        <p>hello<br />world</p>
      </div>
      <br class="clear" />
    </div>
  </body>
</html>

Not tested in IE, might need more help there.

Tip: if you want fast help, it pays to minimize the code samples you post, some members simply don't read overly long code dumps.

BassTeQ2

11:56 pm on Jul 23, 2009 (gmt 0)

10+ Year Member



Hi Swa66,
Thanks for your reply! I've tried your exmaple and it works well. Although still having problems with my code, I've simplfied it now so hopefully it will be easier for people to help.

If you try and float the right-col in my exmaple the parent div around it disappears, the height should be the same as the left-col & right-col nested divs. 


<!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>
<style type="text/css">
body {
background: #999999;
text-align: center;
margin: 0px;
padding: 0px;
}
.page {
width: 100%;
height:auto;
}
.page-wrapper{
width:960px;
margin-left: auto ;
 margin-right: auto ;
border:2px solid red;
height:100%;
background-color:#999999;
}
.container-shadow {
/*float: left;*/
width: 1040px;
margin: 0; 
padding: 0;
height:100%;
margin-left: -40px; 
}
.container {
background: #FFFFFF;
margin: 0 40px; 
height:100%;
width: 940px;
}
.left-col {
border: 2px solid red;
width:500px;
float:left;
}
.right-col {
border: 2px solid red;
/*float:left;*/
text-align:center;
width:200px;
}
.vis-clear {
clear: both;
}
</style>
</head>
<body>
  <div class="page">  
    <div class="page-wrapper">
     <div class="container-shadow">
      <div class="container"> 
      <div class="left-col">              
      LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL<br />
        LEFT COL LEFT COL LEFT COL LEFT COL LEFT COL<br />
      </div>
<div class="right-col">      
      RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL<br />
      RIGHT COL RIGHT COL RIGHT COL RIGHT COL RIGHT COL<br />        
      </div>
      <div id="vis-clear"></div>
      </div><!-- container -->      
     </div><!-- container-shadow -->
   </div><!-- page wrappwer --> 
  </div><!--page-->
</body>
</html>

BassTeQ2

11:19 pm on Jul 26, 2009 (gmt 0)

10+ Year Member



*bump* anyone?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:32 pm May 1, 2026