2 Column Layout problems - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

2 Column Layout problems

jd78

5:01 pm on Aug 2, 2007 (gmt 0)

10+ Year Member

Hi, I've spent all day trying to get a 2 column layout in place!

I have a main #wrapper that has the repeated background within it set at 100% height so that it reaches the bottom of the page.

html, body {
margin: 0;
padding: 0;
background: #000000;
height: 100%;
}

#wrapper {
background: #ffffff;
color: #000000;
width: 884px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-image: url('i/background.png');
background-repeat: repeat-y;
}

I also have my #header section that seems fine. The problems start with the main content, i've split this down into:

#container {
width: 550px;
float: left;
margin-right: -200px;
}

#sidebar {
width: 300px;
float: right;
}

#footer {
clear: both;
background: #ffffff;
height: 0;
}

I'm struggling to get the content so it displays correctly on the page, and i also have a large gap at the bottom where the repeated image from my wrapper is no longer appearing? I think that is to do with the float, or possibly the clear property?

Can anyone help please?

Xapti

5:13 pm on Aug 2, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

We need your HTML code as well to be useful. One can only do guessing without it.
One thing that's strange though, is the margin-right -200px. Normally This is done due do relative widths minus fixed widths, for fluid layout. The thing is not only do you not have width:100% on the div, but your sidebar isn't 200px wide either anyways.
Removing that may fix part of your problem.

[edited by: Xapti at 5:28 pm (utc) on Aug. 2, 2007]

Tastatura

5:18 pm on Aug 2, 2007 (gmt 0)

10+ Year Member

Hi jd78 and welcome to WebmasterWorld!

as pervious poster pointed out, post relevant snip of your html code (no urls per TOS [webmasterworld.com] )
You also might want to take a look at this forum's library [webmasterworld.com] to find your answer

jd78

5:23 pm on Aug 2, 2007 (gmt 0)

10+ Year Member

Sorry! The HTML is:

<body>
<div id="wrapper">
<div id="header">
<p>TITLE and MENU<p>
<div>

<div id="container">
<p>Text is here</p>

<p>More text<p>

<p>More text<p>
</div>
<div id="sidebar">
This is either text or an image depending the page </div>
<p> </p>
<div id="footer">
<img src="i/home.png" alt="#*$!" /></div>
</div>
</body>

Does this help?

Xapti

5:34 pm on Aug 2, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

After title and menu you have a <div> when I think it should be </div>

I don't think you need that "<p> </p>" before the footer...

I noticed your footer has height:0, even though you have an image in it; I guess that's intentional?

And like I mentioned in my first post, you shouldn't need the margin-right:-200px, it is probably messing up your page.

[edited by: Xapti at 5:39 pm (utc) on Aug. 2, 2007]

jd78

5:45 pm on Aug 2, 2007 (gmt 0)

10+ Year Member

I've updated the CSS to the following:

#container {
width: 500px;
float: left;
margin-left: 62px;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: justify;
line-height: 140%;
font-weight: normal;
}

#sidebar {
width: 300px;
float: right;
}

#footer {
clear: both;
background: #ffffff;
width: 739px;
margin-left: 80px;
}

This seems to have columns in the right place although there is still a huge gap at the bottom where the #wrapper isn't showing as 100% although I can't work out what's causing it...