homepage Welcome to WebmasterWorld Guest from 54.81.170.186
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Help aligning 2 columns
BassTeQ2




msg:3957034
 5:11 am on Jul 22, 2009 (gmt 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>


 

BassTeQ2




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

Anyone?
Any help is greatly appreciated.

Thank you

swa66




msg:3957960
 10:05 am on Jul 23, 2009 (gmt 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.

BassTeQ2




msg:3958520
 11:56 pm on Jul 23, 2009 (gmt 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>


BassTeQ2




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

*bump* anyone?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved