August 13th, 2013, 02:31 PM
Help with positioning divs
I am trying to make a page layout for a webpage with CSS and have a basic idea on how I want the divs to be positioned but I can't get it right. If I get the positioning right in IE then it wont work in Chrome and vice versa. I have no hair left on my head to pull out so I reach out my hand for help or comments here.
I drew a scetch of how I want it to look, but couldnt upload it because of the forum rules.
Basically I want all divs centered on the browser window starting with a header on top, three columns centered below the header and a footer at the bottom.
I use fixed width for all divs. During my last attempts of getting this right I placed all divs within a container that was centered wich seems to work in IE but not in Chrome.
Any tips on how to position the divs so that it works in most browsers?
Thanks in advance!
August 13th, 2013, 02:39 PM
This is basically what the css that I started with looked like:
border: 2px solid #0000FF;
margin: 0 auto;
padding: 20px 50px 20px 0px float: left;
August 14th, 2013, 12:25 PM
Welcome to DevShed Forums, Corvin.
If it's not working in IE, then IE is probably using "quirks mode", which is usually bad. Add this to the very beginning of your HTML:
The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)
Yeah, there is a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.
P.S. When posting code, please place it between [code][/code] tags.
P.P.S. Out of curiosity, is that your real name or a DXHR reference?
August 14th, 2013, 04:38 PM
Hi and thanks for the tips and most of all the links to the validation sites! Only two minor errors in the css but no more then 36 in the index.php and included files...
It looks like a friend of my who is coding functions for the page have unclosed divs in some of the included files. Ill try to track them down tomorrow and see if it works as it should. Im almost sure that I will return to this thread with another angle of the div positioning problems :-)
Corvin is actually a old family name but it's not used by the family anymore. Haven't tried DXHR... yet... used to be a MMORPG junkie back from MUDS and Ultima Online but dont have as much time for it anymore.
August 16th, 2013, 10:43 AM
Ok so I cleaned up the code and now the divs are positioned correctly withing each other. Now the only problem is that they are all positioned to the left of the screen and I want them all centered in the middle of the browser window. Do I need to place them all in a container first and center that one or is there another way. And if I place them in a holding container, wich command should I use to center that one?
The raw clean code for the divs looks like this now:
/* CSS Document */
border: 1px solid #FF00FF;
border: 1px solid #0000FF;
border: 1px solid #FFAAAA;
border: 1px solid #AACCCC;
border: 1px solid #11AA33;
border: 1px solid #CD7D00;
And the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- CONTAINER -->
<!--<div id="container"> -->
<!-- HEADER -->
<div id="header"> HEADER
<!-- LEFT PADDING -->
<div id="lpad"> LPAD
<!-- MAIN CONTENT BOX -->
<div id="article"> ARTICLE
<!-- RIGHT SIDE BOX -->
<!--- FOOTER BOX -->
<div id="footer"> FOOTER
August 16th, 2013, 10:45 AM
The container in the CSS is not used at the moment, I added that one for testing but couldnt get it to work.
August 16th, 2013, 11:19 AM
PSPad is great. In fact it's my primary editor, however, its default HTML templates are obsolete. Use the doctype I posted, not the practically useless one from the template. The main point of using a doctype is to tell browsers not to use "quirks mode". The doctype in that template does not do that.
Technically you could give <body> a width and center it, but that didn't work in some very, very old browsers, so I prefer to use a wrapper <div> (or two). (Having multiple containers for large blocks of content can come in very handy.) The most common way to center block-level elements (that have a set width) is to set the left and right margins to "auto", e.g. "margin: 0 auto" (which also sets the top and bottom margins to 0).
More info: Four ways to Center Elements with CSS
By the way, giving "position:fixed" to "#container" doesn't make sense. What it effectively does is prevent everything in it from scrolling, unless you set the overflow property somewhere.
Last edited by Kravvitz; August 16th, 2013 at 11:22 AM.
August 19th, 2013, 03:37 PM
Thanks for the great help Kravvitz, the page is looking just as I want it now (in all browsers). The link tips have been great help to :-)