Support NeoGAF

[koam]

Here's an example of what my layout looks like:

id = main contains the left and right columns. (it's not the white part, it's the green and red part)

Here's the code i have for the left and right columns:

#main {   
    margin: 0 auto;
    width: 788px;
    text-align: left;
    background-image: url(/img/blackandwhite.gif);
    background-repeat: repeat-y;
    border: 2px solid #202020;  
}

#left {
    width: 262px;
    color: #fff;
    float: left;
    min-height: 400px ;
}

#right {
    width: 512px ;
    text-align: left;
    float: right;
    min-height: 400px;
}

As you can see, my left and right are aligned to the center of the user's screen. What i'm trying to do is place the logo left of the red part so that there's a gap of 20px between the left column and the logo (so since the logo is 100px, it's basically left: -120px).

I'm trying to do something like this

#logo {
float: left;
left: -120px;
postion: absolute;
z-index: 1
}

It works but the text in the left column seems to think that #logo is in that column and it just wraps around the invisible div. How do i place the image there, and have the text in the left column not assume that the image is taking it's spot.

 

[kaizoku]

when showing CSS like this you should really show your HTML as well as it'd prevent us assuming how you've structured it.

use firefox, install firebug and web developer toolbar add ons for it, essential tools for any web developer - and you can play around with the css and html direct in the browser and try out different things without affecting your actual code. you can use inspect function to check what space each element is taking up, which may help identify why your text is being pushed down.

my intitial impression is you may need to reconsider how you've done it from the ground up.

personally? I dont like the margin auto to center the main col. you don't really want to use float left as well as position absolute on the logo div, and negative margin on the logo to float it on top of the main col margin is abit hacky as well.

have you tested this in multiple browsers? sorry I couldnt be more helpful, I'm ill and there's every chance I'm totally off the mark.

 

[koam]

How else can you center the main column without margin : 0 auto?

 

[Koshiro]

How else can you center the main column without margin : 0 auto?

I'd assume he's talking about setting display:inline on the main column and text-align: center on the parent. Could be wrong tho.

 

[Baker]

Give your main div a position: relative. Then you should be able to position: absolute your logo wherever you want.

 

[Koshiro]

Give your main div a position: relative. Then you should be able to position: absolute your logo wherever you want.

Yeah we need to see the html before we can give advice on this really. And are you stuck with the current html? Are you redesigning an existing website or something?

 

[koam]

Give your main div a position: relative. Then you should be able to position: absolute your logo wherever you want.

Such a simple answer.. and it worked. God i spend over an hour trying to figure this out, many thanks.