16 replies [Last post]
jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 11 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

This is just a simple 2 column layout. Only 2 columns. No header nor footer. This is because the 2 column layout page is included into a php file that has a header and footer.

Anyways, on with the problem. In IE7 the entire div(side) is way at the bottom. In Firefox2, only the border of the div(right) is at the bottom. The actual content of the div(side) is in the correct position. The div(content) however is lining up just fine.

Here is the code.

layouts.css

#content {
background-color : #fff;
width: 510px;
float: left;
marin-top:0px;
margin-left: 1px;
padding: 5px;
clear: left;
}

#side {
background-color : #fff;
border-left: 1px solid #f6f;
width: 240px;
marin-top:0px;
margin-left: 508px;
padding: 5px;
}

html

TEST

Test

Test

Test

SIDE

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

We will help you , but we do

We will help you , but we do tire of having to ask people to post up all their code! snippets like this don't help us in knowing what else might be effecting things, such as is there a DTD in that header that has been omitted.

In this instance try removing the width from #side and matching the margin to width.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Oioi jeff, you should know

Oioi jeff, you should know better than to cross-post, specially with me on both forums Laughing out loud

http://www.cdg.net/forums/viewtopic.php?t=44062

I answered your topic on CDG.

My, I have been busy Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Great another one! thanks

Great another one! thanks for wasting the time of one of us. I posted this morning, TPH this afternoom GMT and I notice no reply to either Smile nice one!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Don't panic Hugo, I was the

Don't panic Hugo, I was the one who suggested this site to Jeff - I just wish he hadn't posted to both Tongue

but he'll be back, don't worry.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Oh Ok, sorry then Jeff it's

Oh Ok, sorry then Jeff it's just that cross posting bugs the hell out of some of us (well me Smile ) and I'm getting a little peeved with the amount of people never bothering to reply back, taking forum help for granted. So I was probably hasty in my response here.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 11 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

Whooops. My bad guys. Well

Whooops. My bad guys. Well that won't happen again. None the less thank-you very much for your help.

I'll let you know if I have any further problems with my css layout.

PS: That was all my code, minus the doc type. But next time I will be sure to post ALL of the code.

PS2: I don't take it for granted. I just haven't been on the internet in a bit. I've been somewhat busy. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Is the initial problem

Is the initial problem sorted though Jeff?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 11 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

I don't really know how to

I don't really know how to tackle this. I am a CSS noob. I started really getting into CSS and understanding it well. Then I disappeared from the scene for awhile and now I am trying to get back into it. But if I remove the width from #side won't I lose the ability to control how width it goes. Because in total everything can only be 765px.

If it helps. I used this as a reference.

http://realworldstyle.com/2col.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No if you have these two

No if you have these two elemnts ina fixed width parent then simply floating one with fixed width and leaving the other to take the remaining space while using margin to pull it away from behind the float will work , the parent taking care of your overall width. Adding width to elements following floats is highly problematical in IE6 due to it's buggy float model which gets confused as to where it should consider that width is to be placed and start from.

Anyway try it and see what results you get.
Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

My original point was that

My original point was that your left column is 510 px (plus any borders and padding) yet your left-margin on the other element is only 508 pixels, so it's not going to work?

Verschwindende wrote:
  • CSS doesn't make pies

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 11 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

Grr. I did everything

Grr. I did everything basically the same as the example I was using and it still doesn't work. This is annoying.

Here is mine:
http://www.insuranceagencywebsite.com/DIV_CSS_LAYOUT/about.php

Here is example:
http://realworldstyle.com/2col.html

Here is the CSS:

body {
background-color : #ccc;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #1a1a1a;
}

/* 2 Column Standerd Layout */
#content {
background-color:#fff;
width: 220px;
float: left;
margin-left: -1px;
padding: 10px;
}

#side {
background-color:#fff;
padding: 10px;
margin-left: 230px;
border-left: 1px solid #006;
}

.spacer {clear: both;}

Here is the PHP file that includes the HTML file:

<?php include "about.html" ?>

And the HTML:

x
 

y
 

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

What's the problem? Works

What's the problem? Works fine for me in FF?

Verschwindende wrote:
  • CSS doesn't make pies

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 11 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

thepineapplehead

thepineapplehead wrote:
What's the problem? Works fine for me in FF?

IE it dies. All the right hand side content finds its way sitting at the bottom all the time.

In Firefox the border stays at the bottom but then content is where it should be. Its hard to tell thought because I don't have much content in it. If I put like 10 lines of stuff you'd see that the border is way down at the bottom.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I suspect, because you

Hi

I suspect, because you are using floats, IE may be adding the 3 pixel jog, which is forcing the center content down because the left float intrudes into the center. Can't remember how to fix it. Check www.positioniseverything.net for ideas. If you put a colored backgorund for the two divs, it would be more obvious.

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 11 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

I've moved passed the

I've moved passed the troubles of dealing with that particular 2 column layout. I haven't came across anything that doesn't have problems with it though.

The latest problem I run into is that if the RIGHT column contains more content than the MAIN (left) column than the RIGHT column will wrap underneath the MAIN column with it's extra content.

Example:

--HEADER
--MAIN |--RIGHT
--MAIN |--RIGHT
--MAIN |--RIGHT
--
--RIGHT
--RIGHT
--FOOTER

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
http://www.glish.com/css/9.asp

Both of these look great from the example, but once you fill that right hand side content with more than whats in the left side it gets all screwed up. Is there a quick fix for this?

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 11 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

Well, I've figured out a

Well, I've figured out a fix.

http://www.neuroticweb.com/recursos/2-columns-layout/index.php

It works nicely except the only feature I can't seem to get working correctly is having a divider of some sort in between column A and B. It would be nice to just set a border property to one of either side's but that doesn't seem to work correctly. :\