PDA

View Full Version : Creating Content inside of centered <Div>s


Starforth
10-10-2008, 07:24 PM
Hey guys - newbie questions here from a new member to this forum. I read the tutorial on how to create centered web pages with css using auto margins, and txt centering.

However my questions is this: Once I have a nice centered body, how to I create layers within the body that stay where they are supposed to?

Thanks for the info.

domedia
10-10-2008, 07:29 PM
Hi Star, don't rely to heavy on absolute positioning for the main layout of your site. It's not flexible and will not adjust as your content changes.

Do you have a design maybe you can show? We'll be able to give good recommendations based of it.

Starforth
10-10-2008, 08:06 PM
Yeah I don't really want to use absolute positioning at all if I dont have to. My question is realy basic. Check out the bad diagram below:


|--------------------|
|Header ..................|
|--------------------|
| Side .| ..................|
| Bar... | .................|
|.........| .................|
| ........|..................|
|.........|..................|
|------ |..................|
| Body ....................|
|--------------------|
| ...........................|
| Footer ..................|
----------------------

Basically I can figure out how to make the header, body, and footer centered using margin: auto, but now my questions is how to I add additional elements inside the body, such as the Side Bar, and get them to stay in the correct position when people resize the page.

I am sure theres a really easy way to do it, I just have no clue what it is.

domedia
10-10-2008, 08:25 PM
Just put in a container <div id="column">your sidebar stuff here</div>
and then in your css set it to float: left. Super easy :)

Rob_Che
10-11-2008, 09:33 PM
|--------------------|
|Header ..................|
|--------------------|
| Side .| ..................|
| Bar... | .................|
|.........| .................|
| ........|..................|
|.........|..................|
|------ |..................|
| Body ....................|
|--------------------|
| ...........................|
| Footer ..................|
----------------------


Is that your code ? sorry... :roll:

Welcome to the forum.