Problem with how to set the height to adjust to the content

[andersdrage]

I´m making my first custom theme, you can check it out at http://www.robertpost.no/new. But I have a big problem with setting the css to adjust to the content..

This is the code in the pages.. Just the divs..

The main div is the one with the opacity on, and then it´s the one with the content which is mainContent, and then theres one with the text in it..

Code:

`
`
#main {
clear: both;
overflow: hidden;
background: #daa6c0;opacity:.90;
width: 960px;
height: 1500px;
position:absolute;
top:246px;
}
#mainContent {
clear: both;
overflow: hidden;
background: url(img/bgmaincontent.jpg);
width: 884px;
height: 1500px;
position:absolute;
top:79px;
left: 38px;
margin: auto;
}

I want the pages to adjust to the content, now I have set the hight, but I what should I do to make it adjustable?

Thanks so much,
Anders

[TheDoc]

Don’t set a height on that div. The div will automatically adjust to the height of the content. Just make sure to clear your floats at the end!

[andersdrage]

What do you mean with the floats? I have tried to remove the height attribute, but then nothing showes…

[TheDoc]

Well, either my internet is acting up, or you have some code going on that I just can’t decipher right now. I can’t for the life of me get your opac background to automatically adjust to the content, regardless of where I try putting the clearing div. Hopefully somebody else can have a look at it.

[andersdrage]

Actually, I just got it.. If you go to the page, http://www.robertpost.no/new the pages are adjustable!

I removed the absolute position, and it did the trick! Got it from a dude on the wordpress forum…

But now I have a problem because the "main" div was overlapping the "logo-illustration" at upper left corner, that´s why it has opacity on it.. But now I cant make them overlap, what do to?

[andersdrage]

"ikthius" wrote:

"andersdrage" wrote:

Actually, I just got it.. If you go to the page, http://www.robertpost.no/new the pages are adjustable!

I removed the absolute position, and it did the trick! Got it from a dude on the wordpress forum…

But now I have a problem because the "main" div was overlapping the "logo-illustration" at upper left corner, that´s why it has opacity on it.. But now I cant make them overlap, what do to?

do you want them to over lap?

if so, although you might be using position:relative; try using top:-??px; and if you want to go into left corner left:-??px;
thats negative pixels

Worked like a charm! But now I have this empty space in the bottom,… How can I remove that?
http://www.robertpost.no/new

[andersdrage]

"ikthius" wrote:

that pink bit???

I would say keep it, it seems to make is fit a lot better… it seems to be about half of your top part from the outer opaque pink to the top of the browser and seems to work.
if you killed that space off to be just to end of outer opaque pink, I think it would kill the page… in saying that I would add more opaque outer pink to be same padding as the top…

I hope that makes sense

while your at it, I need to say that I don’t like your navigation, I can’t tell what is a word and what is a pipe.

try and clarify it with a change in colour maybe

Thank you so much for the feedback :-) Because I´ve made the contentpart overlap with the "header" then the same amount of pixels that the content overlaps with on the header become "space" at the end if you understand? Now it seems like the content is just a rectangular box, but I would like to get the page to feel more like a "whole" page, and then I think it would look better if the page would end right after the content..

But you would the space as it is on the pages right now?

I´m doing this page for a friend and the pipes is a branding thing he does and always have done so that´s why it`s there.. But you can cleary navigate, the pipes isn´t there for any other reason than to seperate the links.. Does this make sense?

[andersdrage]

"ikthius" wrote:

ok, but remember if the site is to get visitors to stay, your visitors will move about.

well I don’t think the content area actually fits as part of the page, I see it more as a content bubble sitting on the page, thats why you have the opaque pink.

but if it was me I would make the outer opaque content box have padding all round the main more lighter pink content box, keep it kind of uniform.

it cuts off too straight to the bottom of the lighter inner content box.

edit: the main background looks like it has a gradient then a solid colour, but they are different and has a clear seperate difference and does not toally blend in, is that meant?

Of course he wants the visitors to stay :-) But what do you mean? I didnt get the thing about the menu..

THe background has a gradient and then a solid color at the bottom yes… The gradient goes from one color to another one, and the last one is the same as the solid color..

[andersdrage]

"ikthius" wrote:

i find it difficult to read the nav, I was a visitor, but I would not stay or navigate as I was confused, I though one or 2 pipes were spelling of some words. e.g. ||home could be better like either || home – (notice spacing) or ||home differing colour (hard to recreate without the actual fonts and colours)

but remember I am only giving you what I think I would do with it, you don’t have to take my opinions on

If I didnt want to hear what you said I would have said that.. I love feedback! Maybe I´ll lover the opacity on the pipes then, the y compete sort of a little with the actual menu.. Thanks!

[Author]

Posts