Welcome to WebmasterWorld Guest from 23.20.147.6

Forum Moderators: not2easy

Message Too Old, No Replies

Help aligning 2 columns

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

New User

5+ Year Member

joined:Oct 1, 2007
posts: 19
votes: 0


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>

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

New User

5+ Year Member

joined:Oct 1, 2007
posts:19
votes: 0


Anyone?
Any help is greatly appreciated.

Thank you

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

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


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.

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

New User

5+ Year Member

joined:Oct 1, 2007
posts:19
votes: 0


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>

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

New User

5+ Year Member

joined:Oct 1, 2007
posts:19
votes: 0


*bump* anyone?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members