MetaChat - HTML / CSS problem

MetaChat is an informal place for MeFites to touch base and post, discuss and chatter about topics that may not belong on MetaFilter. Questions? Check the FAQ. Please note: This is important.

15 November 2008

HTML / CSS problem →[More:]OK, say you are trying to set up a fixed width page. So you set a main page container 900px wide, with margins auto to center it.

Now within the main container you want three other areas "stacked" - header, content, footer.

So within the header, how the hell do you get something to float onto the extreme bottom right of its section?

I am going mental, I have tried a million things and am going mental, I am going mental to the extent I repeat myself and am jittery and pulling out my hair and have lost all perspective... If anyone is up to the challenge, the specific problem is here:

http://www.themoderninstitute.eu/demo/basics.htm

and css:
http://www.themoderninstitute.eu/demo/basics.css

Basically I want that google search box to be in the bottom right of the yellow outlined div.

If you save me I will let you have your way with me, and you can be as rough as you like.

post by: Meatbomb at: 15:04 | 4 comments

The simple method is:

#search {
float: right
}

to right align it, then do what you are doing and use padding-top to take care of the vertical alignment.

The other thing you can do would be:

#toplogo {
position: relative;
}
#search {
position: absolute;
bottom: 0;
right: 0;
}

That explicitly aligns the bottom right of the search div with that of the toplogo div, though you have to piss about a bit to get the items within the search div down to the bottom corner also, something like:

#search {
margin: 0;
padding: 0;
}

#search form {
margin: 0;
padding: 0;
text-align: right;
}

Ought to do it

posted by cillit bang 15 November | 15:49

Damn-it! Cillit bang beat me to the reward!
*kicks at dirt and leaves thread*

posted by MonkeyButter 15 November | 19:01

cillit bang, these are things I also tried, and made me crazy...

As you see here, with the float:right command, the search box is positioned properly but there is a frigging line feed that separates the next main div.

No amount of screwing around with padding or margins seems to cure this, and I can not figure out why...

As to the relative/absolute thing, that doiesn't do it at all. The absolute command sends that search box down to the bottom of the page, not the bottom of the div it is nested in. Or am I totally misunderstanding something and missing a basic step?

posted by Meatbomb 17 November | 06:37

the search box is positioned properly but there is a frigging line feed that separates the next main div.

The p tag for the slogan comes with some bonus top margin by default. This actually pokes out the top of the botlogo div, pushing the div down. So just set margin-top: 0 for that p tag, or switch it for a div.

(It took a lot of fiddling to figure this one out, but the Web Inspector in Safari or Firebug in Firefox will help you discover where these default margins are happening)

In Safari, you also need to set margin-bottom on the form tag to 0, again to stop it repelling the botlogo div downwards.

absolute command sends that search box down to the bottom of the page, not the bottom of the div it is nested in

You need to set "position: relative" on the parent div that you're trying to line up the absolute positioned div with. Otherwise it just lines the div up with the page.

posted by cillit bang 17 November | 10:16

← Christmas Music! || all the life has been leached out of barack obama's oratory. →

HOME || REGISTER || LOGIN