Hi, I'm just starting out making a website but I'm not getting anywhere fast. My design requires that I have a div centered in the middle of the page, and inside that other divs positioned relatively (so that the other items I want to display don't stray outside the contents area). But I have no idea how to manage that. If anyone can let me in on the theory I'd be really greatful. thanks for reading this far.:)

PS I don't think there would be much of a point of showing you the code I have right now, I broke the only working feature (centered div) to try and get divs inside.

I don't understand your problem. You have created a <div> and styled it for centering etc... Until this <div> is closed any succeeding <divs> must inherit from that original and therefore can only "live inside its constraints" - such as "centered". Where is your problem?

That's the thing, when I'm writing something like

<div class="center">
<div class="brand"> something here
</div>
</div>

brand is behaving as if center isn't there at all.

Then you do something to make that happen. What do the rules .center and .brand contain?

--
http://yupapa.com

.centre {
text-align: center;
    min-width: 600px;

}
.corporate {
    position:absolute;
    float: left;
    top:0;

    }

If someone could give me an example of a <div> that should contain other <divs> in the center that'll probably help me out quite a lot. The effect I'm going for is something like this: http://www.mtv.com.au/shows/shows.php?view=VDM

Yes, that second DIV would "know" nothing about the first DIV.

Two things. text-align aligns inline content (text level), not other block level elements (even if IE6 in Quirks Mode and previous versions of IE think differently).

You may want to read up about what 'position: absolute' does, relative *what* it positions an element.
http://www.w3.org/TR/REC-CSS2/visure...opdef-position
http://www.w3.org/TR/REC-CSS2/visude...-block-details

In your case this is true "If there is no such ancestor, the content edge of the root element's box establishes the containing block." .corporate will be glued to the top of the browser window.

If you want to position it relative .centre you have to make .centre 'position: relative' first. But you don't have to do anything at all to keep ..corporate inside .centre. Just don't position anything at all.

--
http://yupapa.com

Yeah, thanks meow, DJB1954. I'll see what I can do tomorrow with that information. Your right meow with your prediction, as is it just sticks to the top.

I sort of forgot you wanted to center the second div. There are different ways to center a block level element. One way is to give it equal left and right margins.

.corporate { margin: 0 10% }
or if you prefer to write it out
.corporate { margin-left: 10%; margin-right: 10% }

--
http://yupapa.com

I actually want the second <div> to be on the border of the first, in the place of a nav bar, for example.