2 Column CSS layout -background colours

Axwell · 31-03-2008 5:33am #1

Hi guys, trying to get a 2 column layout with seperate background colours working. Trying to use a repeating background image in the right hand column for the background colour while just using the declared background colour for the main column. Any ideas why its not working? Ignore any comments they are just for myself at points where I was working on it. CSS below

Thanks.

#wrapper{margin:auto; width:819px; min-height: 200px;
}
#container {
 min-height: 200px;
 overflow: hidden;
 text-align: center;
 margin: 0px auto;
 padding: 0px;
 width: 819px;
 border:1px; /*border width for main container*/
 border-style: solid;
 border-color:#272377;
 background:#ffffff;
}
#header {
 margin: 0 0 0px 0; /*0px was 15 to add margin to header*/
 background: #b2c2db;
 padding: 0px 0px 0px 0px;
}
#main {
 min-height: 300px;
  float: left;
 width: 580px;
 margin: 0;
 padding: 0px 10px 20px 16px;
}
#right { 
 min-height: 200px;
 background: url("../images/bg.jpg") ;
 background-repeat: repeat-y;
 margin: 0;
 float: left;
 width: 213px;
 padding: 0px 0px 5px 0px; 
 height: 1% /*Hack for Peekaboo Bug */
}
#personal_left{
 /*width: 100;*/
 float: left;
 margin: 0;
 padding: 20px 60px 15px 100px;
}
#personal_right{
 /*width: 100;*/
 float: left;
 margin: 0;
 padding: 20px 100px 15px 60px;
}
#commercial_left{
 /*width: 100;*/
 float: left;
 margin: 0;
 padding: 20px 31px 0px 31px;
}
#commercial_right{
 /*width: 100;*/
 float: left;
 margin: 0;
 padding: 20px 60px 15px 60px;
}
#commercial_text_lower{
 width: 172px;
 float: left;
 margin: 0;
 padding: 0px 10px 0px 9px;
}
#commercial{
 width: 155px;
 float: left;
 margin: 0;
 padding: 0px 10px 0px 10px;
 /*padding: 0px 46px 20px 46px;*/
}
#footer {
 clear: both;
 width: 820px;
 height:15px;
 margin: 0;
 padding: 5px 0px 0px 0px; 
 background: #272377;
}
#footer2{
 float: left;
 margin:0;
 padding: 10px 0px 0px 0px; 
 background:#6d8eb9;
}
footer2_txt{
 float: left;
 margin:0;
 padding: 0px 30px 0px 0px; 
 width: 400px;
}
img.footer2{
 margin:0;
 padding: 0px 0px 0px 5px; 
 float: right;
}
#footer2 image {
 float: right;
}
#office{
 padding: 0px 0px 0px 0px;
 float: right;
 border:1px; /*border width for main container*/
 border-style: solid;
 border-color:#272377;
}
#profile{
 float:right;
 padding: 0px 0px 0px 10px;
}
#map {
 padding: 0px 0px 0px 0px;
 float: right;
 border:1px; /*border width for main container*/
 border-style: solid;
 border-color:#272377;
 height: 357 px;
}
#contacttext{
 width: 200 px;
 margin:0;
 padding: 0px 9px 0px 0px;
 float: left;
}
#contactform{
 float:left;
 border:1px;
 border-style: solid;
 border-color:#272377;
 background:#FFFF99;
 padding: 5px 5px 5px 5px; 
}
#headingsurround{float:left;
width: 500 px;
padding: 0 0 20px 0;
}
#headingdiv{float:left;
width: 500 px;
padding: 0 0 20px 0;
}
#back{
 float: right;
 width: 79px;
}
#maintext{
 float: left;
}

DonkeyStyle \o/ · 31-03-2008 5:50am

Any chance of some (basic skeletal) html to go with this? or boiling the CSS down to only the effected divs? It'd make things a lot easier for us.
I find it helps to start a seperate test-case html page with CSS in the <head> and build on it until you find the failure point.

Liam Byrne · 31-03-2008 11:56am

What does "not working" mean ? What's actually happening that's different from what you expect ?

remoteboy · 31-03-2008 12:14pm

If I understand correctly, you want two columns of equal height with two different background colours?

If that's the case, enclose them in a DIV and give the enclosing DIV the background image.

Adam · 31-03-2008 3:05pm

This very simply does what I understand you're looking for. When in doubt go back to the basics and work up fromt there.

[html]

<html>
<head>
<title>Testing Stuff Here!</title>

<style>

#left {
float: left;
width: 600px;
height: 300px;
background-color: red;
}

#right {
float: left;
width: 200px;
height: 300px;
background-image: url('bg.png');
;
}

</style>

</head>
<body>

<div id="left">left div</div>

<div id="right">right div</div>

</body>
</html>

[/html]

Axwell · 31-03-2008 3:38pm

Hi guys, thanks for the replies. I should have stated better what im hoping to achieve. I need a 2 column layout with header and footer, that parts fine.
I need the left hand column to have a white background for content, i need the right hand one to be smaller in width and have a blue background.
I need the right hand columns background colour to stay the same for any content in the left hand side. As i put more content in the left column i need the right column to keep the blue background colour.
Mirror your example was fine except that the colour doesnt follow down as you have the heights set in the css. I need it to follow down no matter what height the left hand coulmn is.

Thanks

Adam · 31-03-2008 3:48pm

Very well, as I've it basically done alraedy, but a simple Google would have given you many solutions for this.

[html]
<html>
<head>
<title>Testing Stuff Here!</title>

<style>

body, html {
text-align: center;
}

#wrapper {
width: 800px;
margin: auto;
}

#left {
float: left;
width: 600px;
min-height: 300px;
background-color: red;
}

#right {
float: left;
width: 800px;
min-height: 300px;
background-image: url('bg.png');
}

#footer {
clear: both;
height: 50px;
background-color: blue;
}

</style>

</head>
<body>

<div id="wrapper">

<div id="right">

<div id="left">left div</div>

right div</div>

<div id="footer">footer</div>

</div>

</body>
</html>
[/html]

Axwell · 31-03-2008 3:57pm

Does min height work in all browers tho? I thought it didnt in some IE versions

Adam · 31-03-2008 3:59pm

Does it really matter, if there's content in the divs then they will be stretched regardless.

Axwell · 31-03-2008 4:06pm

I would assume it matters if the right div has more content then the left as the red colour of the left div stops where the content does so under it you get the background colour of the right div as it has more content. Min height is fine cos you can set the min height to be the height of the right hand div but if min height cant be used then it doesnt work.

Adam · 31-03-2008 4:17pm

Yes, but you stated earlier that the content would be going in to the left div, so I assumed it wouldn't matter.

If you want to fix it, set the left div into another div with a fixed height and white background. Then if the right div is longer than the content of the left div, the background div can be set to the height of the right div, but if the left divs content is enough to stretch it the background div won't come in to play.

Axwell · 31-03-2008 4:43pm

Ill give that last one you mentioned a go but basically what i want is two divs that will keep their background colour and follow each other height wise so that no matter which one is bigger the other is the same height as it and keeps its own background colour.

2 Column CSS layout -background colours

Comments