Jump to content

CSS middle container


tns2205
 Share

Recommended Posts

Hi there I am new to this forum and CSS. Could someone please help me. I want to create a containing Div that "floats" in the middle of the page and when you resize the size of you browser the container will reposition itself and keep its width.I basically want to create a Div tag instead of the 1 cell table with 800 width and the body has a center align. I have tried and tried, but can't seem to get it right.My second question is that now that I have created and positioned the center Div tag, now I want to place a picture or other div tag inside and place it on a specific location and has to move with the center Div.This would help me a lot I have contacted my trainer regarding this, but he says it can only be done with tables.

Link to comment
Share on other sites

That is not true, lol :) You can do it with divs too. See this:

.body { text-align:center; vertical-align:middle; height:100%; }.centerdiv { text-align:left; vertical-align:top; width:800px; height:500px; }.childpic { position:relative; left:10px; top:10px; }.childdiv { position:relative; left:10px; top:200px; }
<body><div class="centerdiv"><img class="childpic" src="image_link_here" width="" height="" alt="" /><div class="childdiv">something in here too</div></div></body>
This should result in practically the thing you want... (I can't be sure, you should test it) :)
Link to comment
Share on other sites

What did it do then, when you tried my code?

Well nothing, it just sat there :) Did you even bother to test it before posting :)
(I can't be sure, you should test it)
I take it no thenMaybe only post code that works, otherwise your just wasting people's time. :)
Link to comment
Share on other sites

Thank you very much for this it works perfectly.But one step further, say I am using my center div as the container and it is centered, but I want to use the child pic as the background and the childdiv as the body text, how would I position the text on top of the bg, we learnt about z-index, but as I understand it is going to override the container.Don't be nasty

"If you just eat everything you get you might seem like a baby, but when you start experimenting you will find that the orange tastes much better without the skin"What I am trying to say is.Just remove the . in front of the body class or type<body class="body"> :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...